miro-ui-skills
Miro's UI design system. Use when building interfaces inspired by Miro'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/miro/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 clearly scoped to Miro's design system with an explicit 'Use when' clause, making it strong on completeness and distinctiveness. However, it lacks concrete action verbs describing what the skill actually does (e.g., generates components, applies styles) and could include more natural trigger terms users might use when requesting Miro-inspired designs.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Generates UI components, applies color tokens, and builds layouts following Miro's design system.'
Expand trigger terms with natural user language variations like 'Miro-style', 'Miro theme', 'whiteboard app UI', 'collaboration tool design'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system for Miro) and mentions some specific elements (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create components', 'apply styles', or 'generate layouts'. | 2 / 3 |
Completeness | Clearly answers both what ('Miro's UI design system') and when ('Use when building interfaces inspired by Miro'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 'Miro', 'UI design system', 'light mode', 'Inter font', and '4px grid', but misses common user variations like 'Miro-style', 'whiteboard UI', 'design tokens', 'component library', or 'Miro theme'. | 2 / 3 |
Distinctiveness Conflict Risk | Very distinct niche — specifically targets Miro's design aesthetic with unique identifiers (Inter font, 4px grid, light mode). Unlikely to conflict with other design system skills unless there are multiple Miro-related 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 with clear constraint hierarchy (MUST/SHOULD/NEVER) and well-organized semantic token tables. Its main weaknesses are the lack of executable code examples showing implementation and some raw data that feels auto-generated rather than curated (e.g., font sizes including 2px-6px, element widths like '9px, 4px, 10px'). The content would benefit from trimming low-value detected patterns and adding implementation snippets.
Suggestions
Add executable code examples (CSS custom properties, Tailwind config, or styled-components) showing how to implement the design tokens rather than just listing values.
Remove or curate raw detected data that appears auto-generated and isn't actionable (e.g., font sizes 2px-6px seem implausible for text, element widths '9px, 4px, 10px, 12px, 7px' are unclear in purpose).
Split detailed reference tables (full text styles, all border radii) into a separate REFERENCE.md file, keeping only the most-used tokens in the main skill.
Clarify suspicious values like '7px / 400 for body text' which seems unusually small - verify this is intentional or correct it.
| 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 repeats font size information already shown in the Text Styles table, and some detected layout patterns feel like raw data dumps rather than actionable guidance). The 'Count' column in text styles showing '1' for everything adds no value. | 2 / 3 |
Actionability | Provides specific values (hex codes, pixel sizes, font weights) which are concrete, but lacks executable code examples showing how to implement these design tokens in CSS/Tailwind/React. The guidance is more of a specification reference than copy-paste-ready implementation instructions. | 2 / 3 |
Workflow Clarity | This is a reference/constraint skill rather than a multi-step workflow, so the single-purpose nature is appropriate. The MUST/SHOULD/NEVER hierarchy clearly communicates priority, and the organized sections make it easy to find relevant constraints for any given UI task. | 3 / 3 |
Progressive Disclosure | Content is well-organized with clear section headers and tables, but it's a long monolithic file that could benefit from splitting detailed token tables and typography references into separate files. The 'When to Apply' section is a good overview, but there are no references to supplementary files for deeper details. | 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.