notion-ui-skills
Notion's UI design system. Use when building interfaces inspired by Notion's aesthetic - light mode, Inter font, 4px grid.
70
62%
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/notion/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 concise and well-structured with a clear 'Use when' clause and distinctive identifiers that tie it to Notion's specific design language. Its main weakness is the lack of concrete actions—it describes what the system is but not what it does (e.g., style components, create layouts, apply spacing). Adding specific capabilities would strengthen it significantly.
Suggestions
Add concrete actions the skill performs, e.g., 'Styles components, applies spacing, creates layouts following Notion's UI design system.'
Include additional natural trigger terms users might say, such as 'Notion-style', 'Notion-like UI', 'clean minimal interface', or 'sidebar navigation'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Notion's 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 ('Notion's UI design system') and when ('Use when building interfaces inspired by Notion's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes some relevant keywords like 'Notion', 'UI', 'design system', 'light mode', 'Inter font', but misses common user variations like 'Notion-style', 'clean minimal UI', 'Notion-like', 'dashboard design', or 'sidebar layout'. | 2 / 3 |
Distinctiveness Conflict Risk | Highly distinctive - specifically targets Notion's aesthetic with concrete identifiers (Inter font, 4px grid, light mode), making it unlikely to conflict with other generic UI or design system skills. | 3 / 3 |
Total | 10 / 12 Passed |
Implementation
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 with clear MUST/SHOULD/NEVER constraints, which is valuable for maintaining consistency. However, it reads more like a raw design audit output than a curated skill - it includes suspicious values (0px input height, inconsistent element widths), lacks executable code examples (CSS/Tailwind snippets), and could be more concise by separating reference data from core guidelines. The actionability would significantly improve with concrete code examples showing how to implement these tokens.
Suggestions
Add executable code examples (CSS custom properties, Tailwind config, or component snippets) showing how to implement the design tokens - e.g., a CSS variables block or a Tailwind theme extension.
Review and fix suspicious values: '0px' input height and 'consistent element widths: 16px, 13px, 17px, 18px, 10px' appear to be raw audit artifacts rather than intentional design decisions.
Split the detailed reference tables (full typography list, all font sizes) into a separate REFERENCE.md file, keeping only the core tokens and rules in the main skill.
Add a brief workflow or checklist for applying the design system when building a new component (e.g., 'Start with surface-base background → Apply Inter font → Use 4px grid → Verify contrast ratios').
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with clear tables and MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., 'Border Radius Reference' section repeats what's already in the Borders section, duplicate 'body-secondary' entries, and the 'Detected Layout Patterns' section adds little value). The extensive typography table with individual 'Count: 1' entries feels like raw audit data rather than curated guidance. | 2 / 3 |
Actionability | The skill provides specific values (hex codes, pixel sizes, font weights) which is concrete, but lacks executable code examples. For a UI design system skill, there are no CSS/Tailwind snippets, no component code examples, and some values seem suspect (e.g., input height of '0px', element widths of '16px, 13px, 17px' which seem like raw measurements rather than actionable guidance). The MUST/SHOULD/NEVER format is clear but not always copy-paste ready. | 2 / 3 |
Workflow Clarity | The skill is organized as a reference rather than a workflow, which is appropriate for a design system. However, there's no guidance on how to apply these constraints in sequence when building a component, and no validation steps (e.g., how to verify contrast ratios meet the 4.5:1 requirement). The 'When to Apply' section is helpful but minimal. | 2 / 3 |
Progressive Disclosure | The content is well-structured with clear sections and tables, but it's a monolithic document that could benefit from splitting detailed reference tables (typography, colors) into separate files. There are no references to external files for deeper content, and some sections (like the full font size list) could be in a reference file rather than inline. | 2 / 3 |
Total | 8 / 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.