mercury-ui-skills
Mercury's UI design system. Use when building interfaces inspired by Mercury'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/mercury/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 effectively identifies a clear niche (Mercury's design system) and provides explicit 'when to use' guidance with specific design attributes. Its main weakness is the lack of concrete actions—it describes what the system is rather than what it does (e.g., generating components, styling elements). The trigger terms are adequate but could benefit from broader coverage of user language.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Generates UI components, styles layouts, and applies design tokens following Mercury's aesthetic.'
Expand trigger terms to include variations users might say, such as 'Mercury-style', 'banking UI', 'fintech design', 'component library', or 'design tokens'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific elements like 'light mode, Inter font, 4px grid', but doesn't list concrete actions (e.g., 'create buttons, style forms, build layouts'). It describes attributes rather than actions. | 2 / 3 |
Completeness | Clearly answers both 'what' (Mercury's UI design system) and 'when' (Use when building interfaces inspired by Mercury's aesthetic) with explicit trigger guidance including specific attributes like light mode, Inter font, and 4px grid. | 3 / 3 |
Trigger Term Quality | Includes some relevant keywords like 'Mercury', 'UI', 'light mode', 'Inter font', '4px grid', and 'interfaces', but misses common variations users might say such as 'design system', 'component styling', 'Mercury-style', 'banking UI', or specific component names. | 2 / 3 |
Distinctiveness Conflict Risk | The description is highly distinctive by referencing a specific brand (Mercury) with specific design attributes (Inter font, 4px grid, light mode), making it very unlikely to conflict with other UI or design system 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 skill provides a structured design system reference with concrete values for colors, typography, spacing, and interactive states, which is valuable. However, it appears partially auto-generated with some contradictory or nonsensical values (black page background for 'light-mode', 0px input height, tiny element widths), lacks executable code examples showing implementation, and could be more concise by moving detailed token tables to separate reference files.
Suggestions
Review and fix contradictory/nonsensical values: '#000000' as page background contradicts 'light-mode' description, '0px' input height is unusable, and element widths of '11px, 8px' appear to be detection artifacts rather than intentional design values.
Add executable code examples showing how to implement the design system (e.g., a Tailwind config snippet, a CSS custom properties block, or a sample component using these tokens).
Move detailed token tables (text styles, layout patterns) to a separate REFERENCE.md file and keep SKILL.md as a concise overview with the most important constraints and links to details.
Remove raw detection artifacts like 'Count: 1' columns, 'currently 23 colors detected', and 'used 56x' annotations that appear to be from an automated design analysis tool rather than curated guidance.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful design tokens and constraints, but includes some redundant information (e.g., listing 'Count: 1' for every text style, repeating border-radius scale in both rules and a separate reference section, listing element widths like '11px, 8px' that seem auto-detected and not curated). The detected layout patterns with specific pixel dimensions feel like raw data dumps rather than actionable guidance. | 2 / 3 |
Actionability | The skill provides concrete values (hex codes, pixel sizes, font weights) which is good, but lacks executable code examples showing how to implement these in practice (e.g., CSS/Tailwind snippets, component templates). Some values seem contradictory or auto-generated (e.g., '#000000' as page background for a 'light-mode' interface, '0px' height for input fields, element widths of '11px, 8px' which are nonsensical for layout). | 2 / 3 |
Workflow Clarity | The skill is primarily a reference/constraint document rather than a multi-step workflow, so explicit sequencing is less critical. However, there's no guidance on the order of applying these constraints when building a UI, and no validation steps to verify the implementation matches the design system. The 'When to Apply' section is helpful but minimal. | 2 / 3 |
Progressive Disclosure | The content is organized into clear sections with tables, which aids scanning. However, it's a fairly long monolithic document (~150+ lines) that could benefit from splitting detailed token tables and component specs into separate reference files, keeping the SKILL.md as a concise overview with links to detailed specs. | 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.