gusto-ui-skills
Gusto's UI design system. Use when building interfaces inspired by Gusto's aesthetic - light mode, Inter font, 4px grid.
75
68%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/gusto/SKILL.mdQuality
Discovery
75%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description is functional with a clear 'Use when' clause and distinctive branding to Gusto, making it easy to select from a pool of skills. However, it lacks specificity about what concrete actions the skill performs (e.g., generating components, applying tokens, building layouts) and could include more natural trigger terms users might use when requesting Gusto-style interfaces.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Generates UI components, applies spacing and color tokens, and builds page layouts following Gusto's design system.'
Expand trigger terms to include variations like 'design system', 'UI components', 'Gusto theme', 'Gusto styling', or 'Gusto brand'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific details (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create components', 'apply spacing tokens', or 'generate layouts'. | 2 / 3 |
Completeness | Clearly answers both what ('Gusto's UI design system') and when ('Use when building interfaces inspired by Gusto's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Gusto' as a key trigger term and some relevant terms like 'light mode', 'Inter font', '4px grid', but misses common variations users might say such as 'design system', 'UI components', 'styling', 'theme', or 'brand guidelines'. | 2 / 3 |
Distinctiveness Conflict Risk | The specificity to Gusto's design system with named attributes (Inter font, 4px grid, light mode) creates a clear niche that is unlikely to conflict with other design system skills or generic UI skills. | 3 / 3 |
Total | 10 / 12 Passed |
Implementation
62%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid design system reference skill with clear constraint language (MUST/SHOULD/NEVER) and well-structured tables for color tokens, typography, and spacing. Its main weaknesses are the lack of executable code examples showing implementation (e.g., CSS custom properties, Tailwind config, or component snippets) and some redundancy in the typography and border sections that reads like raw audit output rather than curated guidance.
Suggestions
Add executable code examples showing how to implement the design tokens (e.g., CSS custom properties block, Tailwind config snippet, or a sample React component using the system)
Remove redundant reference sections (Typography Reference duplicates Text Styles table data; border radius scale is listed twice) to improve conciseness
Complete the Buttons component table - currently only Ghost variant is listed with mostly empty fields; add primary, secondary, and destructive button variants with full specifications
Consider splitting detailed reference tables (full font size scale, all text styles) into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the most common patterns
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., the Typography Reference section listing all font sizes after the Text Styles table, border radius listed twice). The detected layout patterns and some raw data (like 'used 80x', 'Count' columns) feel like audit output rather than actionable guidance. | 2 / 3 |
Actionability | Provides specific values (hex codes, pixel sizes, font weights) and clear constraints (MUST/SHOULD/NEVER), which is good. However, there are no executable code examples showing how to implement these tokens in CSS/Tailwind/React, no component code snippets, and the button component table only has one variant (Ghost) with mostly empty fields, making it incomplete. | 2 / 3 |
Workflow Clarity | This is a reference/constraint skill rather than a multi-step workflow skill. The single-purpose nature (design system reference) is well-served by its clear categorical organization. The MUST/SHOULD/NEVER hierarchy provides unambiguous decision-making guidance for each design dimension. | 3 / 3 |
Progressive Disclosure | The content is well-organized with clear sections and tables, but it's a long monolithic file (~180 lines of dense reference material). The typography section alone has three sub-sections that could be split out. No references to external files for detailed component libraries or extended examples. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- ihlamury/design-skills
- Commit
126714e
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.