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 solid design token reference with clear constraints using MUST/SHOULD/NEVER language, and the table format for tokens is well-structured. However, it reads more like a raw design audit dump than curated guidance—it lacks executable code examples, includes redundant/low-value data (multiple identical text-14px entries, raw layout dimensions), and could benefit from splitting reference tables into separate files while keeping the main skill focused on key principles and a quick-start example.
Suggestions
Add at least one executable code example (e.g., a Tailwind config snippet or a CSS custom properties block) showing how to implement the design tokens in practice.
Remove or consolidate redundant entries in the Text Styles table (e.g., the five text-14px variants with count=1) and the Detected Layout Patterns section, which adds little actionable value.
Split detailed reference tables (full color tokens, text styles, border radius scales) into a separate REFERENCE.md file and link to it, keeping SKILL.md focused on key constraints and quick-start guidance.
Add a brief workflow or checklist for applying these guidelines when building a new component (e.g., 1. Set base tokens, 2. Apply typography scale, 3. Verify contrast ratios).
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful design tokens and constraints, but includes redundant reference data (e.g., listing 10 nearly identical text-14px styles with count=1, detected layout patterns that are just viewport sizes, font sizes list). The 'Count' column and some detected metrics feel like raw audit output rather than curated guidance. | 2 / 3 |
Actionability | Provides concrete values (hex codes, pixel sizes, specific CSS properties) and clear MUST/SHOULD/NEVER constraints, which is good. However, there are no executable code examples—no CSS snippets, no Tailwind config, no component code. For a UI design system skill, at least one concrete implementation example would significantly improve actionability. | 2 / 3 |
Workflow Clarity | The skill is organized by design dimension (colors, typography, spacing, etc.) which provides clear structure, but there's no workflow for how to apply these guidelines when building a component. For a reference-style skill this is acceptable, but the 'When to Apply' section is vague and there's no sequencing guidance for building interfaces. | 2 / 3 |
Progressive Disclosure | Content is well-sectioned with clear headings and tables, but everything is in a single monolithic file. The detailed token tables, text style references, and border radius scales could be split into reference files, with the main skill focusing on key constraints and linking out. No external references are provided. | 2 / 3 |
Total | 8 / 12 Passed |