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 maintaining consistency. However, it reads more like a raw design audit export than a curated skill—duplicate rows, suspicious values (0px input height, arbitrary widths), and lack of executable code examples reduce its practical utility. Trimming redundant data, adding code snippets, and splitting reference tables into separate files would significantly improve it.
Suggestions
Add executable code examples showing how to apply the design tokens (e.g., a CSS custom properties block, Tailwind config, or a sample React component using the tokens).
Clean up suspicious/raw audit values: '0px' input height, near-duplicate body-secondary rows, and arbitrary element widths (249px, 97px, 78px) that appear to be measurements rather than intentional design constraints.
Move detailed reference tables (full text styles list, font sizes, layout patterns) into a separate REFERENCE.md file and link to it from the main skill.
Add a quick-start section at the top with a minimal component example that demonstrates the core constraints (Inter font, 4px grid, surface-base background, border-radius scale) in action.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful design tokens and constraints but is overly verbose in places—the text styles table has many near-duplicate rows (body-secondary repeated 6 times with minor color/weight variations), and some reference data (font sizes list, detected layout patterns) adds marginal value. The 'Count' column and raw detection artifacts feel like unprocessed audit output rather than curated guidance. | 2 / 3 |
Actionability | Provides concrete values (hex codes, pixel sizes, specific CSS properties) which is good, but lacks executable code examples showing how to apply these tokens in practice (e.g., a Tailwind config snippet, CSS custom properties block, or a sample component). Some values are questionable—'0px height for input fields' and inconsistent element widths like '249px, 24px, 97px'—which would confuse rather than guide implementation. | 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, the 'When to Apply' section is vague, and there's no guidance on how to compose these constraints when building a component end-to-end. The MUST/SHOULD/NEVER hierarchy provides some implicit ordering of priorities but no validation steps. | 2 / 3 |
Progressive Disclosure | Content is organized into clear sections with headers and tables, which aids scanning. However, the document is quite long and monolithic—detailed reference tables (all text styles, all border radii, layout patterns) could be split into separate reference files. No external file references are provided for deeper dives. | 2 / 3 |
Total | 8 / 12 Passed |