wise-ui-skills
Wise's UI design system. Use when building interfaces inspired by Wise's aesthetic - light mode, Inter font, 4px grid.
70
62%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/wise/SKILL.mdQuality
Discovery
75%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description is well-structured with a clear 'Use when' clause and distinct brand-specific triggers that make it easy to identify when this skill should be selected. Its main weakness is the lack of specific concrete actions - it describes the design system's characteristics but not what it actually does (e.g., generate components, apply styles, create layouts). Adding action verbs would strengthen the specificity dimension.
Suggestions
Add concrete actions the skill performs, e.g., 'Creates UI components, applies styling, and generates layouts following Wise's design system.'
Include additional natural trigger terms users might say, such as 'Wise theme', 'Wise styling', 'Wise components', or 'TransferWise design'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific elements (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create buttons', 'style forms', or 'generate layouts'. | 2 / 3 |
Completeness | Clearly answers both what ('Wise's UI design system') and when ('Use when building interfaces inspired by Wise's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Wise', 'UI design system', 'light mode', 'Inter font', and '4px grid' which are relevant but somewhat niche. Missing common user terms like 'components', 'design tokens', 'styling', 'theme', or 'Wise-style'. | 2 / 3 |
Distinctiveness Conflict Risk | Very distinct niche - specifically targets Wise's design system with unique identifiers (Wise brand, Inter font, 4px grid). Unlikely to conflict with other design system skills unless there are multiple Wise-related skills. | 3 / 3 |
Total | 10 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a reasonably well-structured design system reference with clear semantic tokens, typography specs, and constraint-based rules (MUST/SHOULD/NEVER). Its main weaknesses are the lack of executable code examples showing implementation, some redundant reference data that reads like raw audit output, and the monolithic structure that could benefit from splitting detailed tables into separate reference files.
Suggestions
Add concrete code examples (CSS custom properties, Tailwind config, or React component snippets) showing how to implement the design tokens — e.g., a card component using surface-raised, border-default, and the 20px border-radius.
Remove redundant sections like the 'Border Radius Reference' that repeats the scale already listed above, and the 'Typography Reference' font families/sizes already covered in the Text Styles table.
Split detailed token tables and typography references into separate files (e.g., TOKENS.md, TYPOGRAPHY.md) and keep SKILL.md as a concise overview with links to these references.
Flesh out the Components section with more variants and actual implementation code — the single Ghost button variant with mostly empty fields provides minimal value.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., border-radius scale listed twice, typography reference repeating font families/sizes already shown in the table). The detected counts ('used 26x', 'currently 20 colors detected') feel like audit artifacts rather than actionable guidance. | 2 / 3 |
Actionability | Provides specific hex values, pixel sizes, and concrete constraints (MUST/SHOULD/NEVER), which is good. However, there are no executable code examples showing how to implement these tokens in CSS/Tailwind/React, no component code snippets, and the button component table has only one variant with mostly empty fields. The guidance describes what to use but rarely shows how. | 2 / 3 |
Workflow Clarity | For a design system reference skill, there's no multi-step workflow needed, but the content lacks any guidance on how to apply these tokens in practice — no implementation sequence, no validation steps for checking contrast ratios or grid alignment. The 'When to Apply' section is helpful but minimal. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and tables, making it scannable. However, it's quite long (~150 lines of dense reference material) and could benefit from splitting detailed token tables and typography references into separate files, keeping SKILL.md as a concise overview with links. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- ihlamury/design-skills
- Commit
126714e
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.