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 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 |