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 for Segment-style UIs with good use of constraint language (MUST/SHOULD/NEVER) and structured tables. However, it reads more like raw design audit output than curated guidance — duplicate entries, seemingly auto-detected values (multiple header heights, arbitrary widths), and lack of executable code examples reduce its effectiveness. Adding code snippets, a brief component-building workflow, and splitting reference data into separate files would significantly improve it.
Suggestions
Add executable code examples (CSS custom properties block, Tailwind config snippet, or a sample component) to make the design tokens immediately actionable rather than just reference tables.
Clean up apparent extraction artifacts: remove duplicate text-15px entries, consolidate multiple header heights into a recommended value, and curate the element widths list to meaningful layout breakpoints.
Add a brief workflow section showing how to compose these tokens when building a new component (e.g., 1. Set up tokens → 2. Apply typography scale → 3. Check contrast → 4. Verify grid alignment).
Split the detailed reference tables (full typography list, detected layout patterns) into a separate REFERENCE.md file, keeping SKILL.md focused on the essential constraints and quick-start guidance.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes excessive detail that may not earn its tokens — e.g., listing every detected font size, multiple near-identical header heights, duplicate text-15px entries, and element widths like '8px, 248px, 11px' that seem like raw extraction artifacts rather than curated guidance. | 2 / 3 |
Actionability | Provides concrete values (hex codes, pixel sizes, font weights) and clear constraint language (MUST/SHOULD/NEVER), but lacks executable code examples. For a UI design system skill, CSS/Tailwind snippets or component code would make this significantly more actionable and copy-paste ready. | 2 / 3 |
Workflow Clarity | The 'When to Apply' section provides context, and the content is organized by concern (colors, typography, spacing, etc.), but there's no workflow for actually building a component or page. For a design system skill, a brief workflow showing how to compose these tokens into a component would improve clarity. No validation steps for checking contrast ratios or grid alignment. | 2 / 3 |
Progressive Disclosure | Content is well-organized with clear section headers and tables, but it's a monolithic file with no references to external files for detailed component specs, examples, or advanced patterns. The extensive typography and layout detection data could be split into reference files, keeping the main skill leaner. | 2 / 3 |
Total | 8 / 12 Passed |