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 system reference with clear constraints using MUST/SHOULD/NEVER language and well-structured tables for design tokens. Its main weaknesses are the lack of executable code examples (no CSS, Tailwind, or component snippets), some redundant information across sections, and the monolithic structure that could benefit from splitting detailed references into separate files. Some values seem questionable (e.g., input height of 0px) which could cause issues.
Suggestions
Add at least 2-3 executable code examples showing how to implement key components (e.g., a button, card, or header) using these design tokens in CSS/Tailwind
Split detailed reference tables (full typography list, all font sizes, layout patterns) into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the most essential tokens
Review and fix suspicious values like input height '0px' which appears to be a data extraction error and could lead to broken implementations
Add a brief 'Quick Start' workflow showing the sequence for applying the design system when building a new page (e.g., 1. Set base styles → 2. Apply layout → 3. Add components)
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient with its table-based format and MUST/SHOULD/NEVER constraints, but includes some redundant information (e.g., listing font sizes twice, detected layout patterns with raw pixel values that add little value, RGB values alongside HEX). Some sections like 'Border Radius Reference' repeat what was just stated above. | 2 / 3 |
Actionability | Provides concrete design tokens, specific values, and clear constraints (MUST/SHOULD/NEVER), but lacks executable code examples. No CSS snippets, no Tailwind classes, no component code. For a UI design system skill, having at least one concrete code example (e.g., a button component or a card layout) would significantly improve actionability. | 2 / 3 |
Workflow Clarity | The skill is primarily a reference/constraint document rather than a multi-step workflow, so workflow clarity is less critical. However, there's no guidance on the order of applying these constraints when building a UI, and the 'When to Apply' section is vague. For a design system, a brief 'getting started' sequence (set up fonts → apply colors → use spacing grid → add components) would help. | 2 / 3 |
Progressive Disclosure | Content is well-organized with clear section headers and tables, making it scannable. However, the file is quite long (~150 lines of dense reference material) and could benefit from splitting detailed token tables and typography references into separate files, keeping SKILL.md as a concise overview with links to detailed specs. | 2 / 3 |
Total | 8 / 12 Passed |