Content
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 comprehensive design token reference with clear MUST/SHOULD/NEVER constraints, which is valuable for consistent UI implementation. However, it reads more like auto-extracted design audit data than curated guidance—some values appear suspect (0px input height, arbitrary element widths), and it lacks executable code examples showing how to apply these tokens in practice. The content would benefit from curation to remove noise, addition of implementation examples, and splitting reference tables into separate files.
Suggestions
Add executable code examples (CSS custom properties, Tailwind config, or component snippets) showing how to implement the design tokens in practice
Audit and curate auto-extracted values—input height '0px', element widths '10px, 227px, 7px, 30px, 17px', and some color assignments (e.g., destructive as #D29E79) appear incorrect or uncurated
Move detailed reference tables (full font size list, all text styles, border radius scale) to a separate REFERENCE.md and keep SKILL.md as a concise overview with the most important constraints
Add a validation checklist or verification steps (e.g., 'verify contrast ratios meet 4.5:1', 'confirm spacing aligns to 4px grid') to help catch implementation errors
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with clear token tables and MUST/SHOULD/NEVER constraints, but includes some redundant information (e.g., listing every detected font size from 5px-53px, element widths like '10px, 227px, 7px' that seem auto-generated rather than curated, and duplicate text style entries). The 'count: 1' columns and some reference sections feel like raw data dumps rather than curated guidance. | 2 / 3 |
Actionability | The skill provides specific values (hex codes, pixel sizes, font weights) which are concrete, but lacks executable code examples showing how to implement these design tokens in practice (e.g., CSS/Tailwind snippets, component templates). Some values seem suspect or auto-extracted (input height '0px', inconsistent element widths), reducing trustworthiness and copy-paste readiness. | 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 (e.g., checking contrast ratios, verifying 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 a long monolithic document (~150 lines of detailed specs) that could benefit from splitting detailed reference tables (all font sizes, all border radii) into separate files while keeping the SKILL.md as a concise overview with links. | 2 / 3 |
Total | 8 / 12 Passed |