superhuman-ui-skills
Superhuman's UI design system. Use when building interfaces inspired by Superhuman'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/superhuman/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 well-structured with a clear 'Use when' clause and a distinctive niche tied to Superhuman's design aesthetic. Its main weakness is that it describes the design system identity but lacks specific concrete actions (e.g., 'create components', 'apply spacing', 'style buttons'). Adding more natural trigger terms and explicit capabilities would strengthen it.
Suggestions
Add concrete actions the skill performs, e.g., 'Builds UI components, applies spacing and typography, styles layouts following Superhuman's design system.'
Expand trigger terms to include variations users might say, such as 'clean minimal UI', 'email-style interface', 'Superhuman-like design', or 'modern SaaS UI'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific elements (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create layouts', 'style components', or 'apply typography rules'. | 2 / 3 |
Completeness | Clearly answers both what ('Superhuman's UI design system') and when ('Use when building interfaces inspired by Superhuman's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Superhuman' as a strong trigger term and mentions specific design tokens (Inter font, 4px grid, light mode), but misses common variations users might say like 'email client UI', 'clean minimal design', 'design system', or 'component styling'. | 2 / 3 |
Distinctiveness Conflict Risk | Very distinct niche - specifically tied to Superhuman's aesthetic, which is unlikely to conflict with other design system skills. The mention of specific design tokens (Inter font, 4px grid) further narrows the scope. | 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 well-organized design system reference with clear constraint levels (MUST/SHOULD/NEVER) and concrete values. Its main weaknesses are the lack of executable code examples showing implementation, some redundant/low-value data (duplicate text style entries, repeated typography info), and the monolithic structure that could benefit from splitting reference tables into separate files.
Suggestions
Add at least one concrete code example (e.g., a React/Tailwind component) showing how to apply the design tokens and constraints together for a common UI element like a card or button.
Remove redundant sections like 'Typography Reference' that repeat information already in the Text Styles table, and consolidate the near-duplicate text style entries (e.g., multiple 'text-14px' rows with slightly different colors).
Consider splitting the detailed token tables (Semantic Tokens, Text Styles, Border Radius) into a separate REFERENCE.md file, keeping SKILL.md as a concise overview with the key constraints and linking to the reference.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful design tokens and constraints, but includes redundant information (e.g., the text styles table has many near-duplicate entries with slightly different colors, the 'Typography Reference' section repeats what's already in the table, and detected layout patterns add little value). Some sections like 'Font Families: Inter (used 44x)' are noise. | 2 / 3 |
Actionability | The skill provides concrete values (hex codes, pixel sizes, specific CSS properties) which is good, but lacks executable code examples showing how to implement these patterns in actual components. The MUST/SHOULD/NEVER constraints are specific but would benefit from at least one concrete component implementation example (e.g., a Tailwind or CSS snippet for a button). | 2 / 3 |
Workflow Clarity | This is a reference/constraint skill rather than a multi-step workflow skill. The single task (apply design system constraints when building UI) is unambiguous, and the constraints are clearly organized by category with clear priority levels (MUST/SHOULD/NEVER). No destructive or batch operations are involved. | 3 / 3 |
Progressive Disclosure | The content is reasonably well-structured with clear section headers and tables, but it's a long monolithic file (~150+ lines of detailed reference data) that could benefit from splitting detailed token tables and text style references into separate files. No external references are provided for deeper exploration. | 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.