Content
42%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 set of design constraints with specific values, which is valuable for maintaining consistency. However, it suffers from being a monolithic reference document that mixes high-level rules with detailed lookup tables, lacks executable code examples (CSS variables, Tailwind config, or component snippets), and could benefit significantly from splitting reference data into separate files. Some values seem auto-generated from design analysis (e.g., 'detected lightness: 12', 'used 54x', input height '0px') and need curation.
Suggestions
Split detailed reference tables (text styles, semantic tokens, border radius scales) into a separate REFERENCE.md file and link to it from the main skill
Add executable code examples: a CSS custom properties block defining the design tokens, a sample Tailwind config, or a concrete component implementation showing the system in use
Review and curate auto-generated values that seem incorrect or unhelpful—input height '0px' and element widths '10px, 9px, 11px' appear to be artifacts rather than intentional design decisions
Add a validation checklist or quick-reference section at the top summarizing the most critical constraints (dark background, Inter font, 4px grid, contrast ratios) for fast scanning
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful design tokens and constraints, but includes excessive detail that could be trimmed—e.g., the full text styles table with 10 rows of 15px variants, detected layout patterns with redundant viewport info, and font size lists that are more reference data than actionable guidance. Some of this belongs in a separate reference file. | 2 / 3 |
Actionability | The skill provides concrete values (hex codes, pixel sizes, specific CSS properties) and clear MUST/SHOULD/NEVER constraints, which is good. However, it lacks executable code examples—no CSS snippets, no Tailwind config, no component code. For a UI design system skill, showing a concrete component implementation or CSS custom properties setup would significantly improve actionability. | 2 / 3 |
Workflow Clarity | This is primarily a reference/constraint skill rather than a multi-step workflow, so explicit sequencing is less critical. However, there's no guidance on how to apply these constraints in order (e.g., start with colors, then typography, then layout), and no validation steps for checking contrast ratios or grid alignment despite mentioning accessibility requirements. | 2 / 3 |
Progressive Disclosure | Everything is in a single monolithic file with no references to external files for detailed content. The extensive token tables, typography reference, and border radius scales could be split into separate reference files, with the main SKILL.md providing a concise overview and links. The file is quite long and mixes high-level constraints with granular reference data. | 1 / 3 |
Total | 7 / 12 Passed |