convex-ui-skills
Convex's UI design system. Use when building interfaces inspired by Convex's aesthetic - dark 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/convex/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 has a clear 'Use when' clause and is distinctly scoped to Convex's design system, which are strengths. However, it lacks specificity about what concrete actions the skill performs (e.g., generating components, applying styles, creating layouts) and could include more natural trigger terms users might use when requesting UI work.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Creates styled components, layouts, and pages following Convex's UI design system.'
Expand trigger terms to include variations like 'Convex-style UI', 'design tokens', 'themed components', 'Convex dashboard', or 'Convex branding'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific elements (dark mode, Inter font, 4px grid), but doesn't list concrete actions like 'create components', 'style layouts', or 'apply theme tokens'. | 2 / 3 |
Completeness | Clearly answers both what ('Convex's UI design system') and when ('Use when building interfaces inspired by Convex's aesthetic - dark mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes some relevant terms like 'dark mode', 'Inter font', '4px grid', and 'Convex', but misses common variations users might say such as 'design tokens', 'component styling', 'theme', 'UI components', or 'Convex-style'. | 2 / 3 |
Distinctiveness Conflict Risk | The description is clearly scoped to Convex's specific design system with distinct identifiers (Convex brand, Inter font, 4px grid, dark mode), making it unlikely to conflict with generic UI or other 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 is a solid design system reference with specific, opinionated values and clear MUST/SHOULD/NEVER constraints. Its main weaknesses are the lack of executable code examples showing implementation (CSS variables, Tailwind config, or component snippets) and the inclusion of raw audit data (detected counts, layout dimensions) that reads more like a design analysis output than curated guidance. Splitting detailed reference tables into separate files and adding implementation examples would significantly improve it.
Suggestions
Add executable code examples showing how to implement the design tokens (e.g., a CSS custom properties block, Tailwind config snippet, or a sample component using the color/typography system).
Remove raw audit artifacts like 'detected lightness: 6', 'currently 31 colors detected', 'Count' columns with all 1s, and 'Detected Layout Patterns' with specific pixel dimensions — these read as analysis output rather than actionable guidance.
Extract the detailed reference tables (full text styles, font sizes, border radius scale) into a separate REFERENCE.md file and link to it, keeping only the most common/important values inline.
Add a brief workflow or quick-start section showing the sequence for building a new page with this design system (e.g., 'Set up CSS variables → Apply surface colors → Set typography → Build components').
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with well-structured tables and clear rules, but includes some redundancy (e.g., listing both HEX and RGB for every color, the 'Count' column with all 1s adds no value, and the extensive font size list and detected layout patterns feel like raw data dumps rather than curated guidance). The 'detected lightness: 6' and 'currently 31 colors detected' comments feel like audit artifacts rather than actionable instructions. | 2 / 3 |
Actionability | The skill provides specific values (hex codes, pixel sizes, timing constraints) which are concrete, but lacks executable code examples showing how to implement these design tokens in practice (e.g., CSS/Tailwind snippets, component templates). The rules are declarative constraints rather than copy-paste-ready implementations. | 2 / 3 |
Workflow Clarity | For a design system reference skill, there's no explicit workflow for building a UI from scratch or applying these tokens. The sections are well-organized as a reference, but there's no sequencing guidance (e.g., 'start with surface colors, then typography, then layout'). The interactive states section hints at a workflow but doesn't provide validation steps for checking contrast ratios or grid alignment. | 2 / 3 |
Progressive Disclosure | The content is well-sectioned with clear headings and tables, but it's a monolithic file with a lot of detail inline. The extensive text styles table (10 rows), full font size list, and border radius scale could be split into reference files. There are no cross-references to separate files for deeper topics like component patterns or accessibility guidelines. | 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.