mixpanel-ui-skills
Mixpanel's UI design system. Use when building interfaces inspired by Mixpanel'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/mixpanel/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 distinct branding focus on Mixpanel's aesthetic. Its main weakness is the lack of specific concrete actions - it describes the design system's attributes but not what actions Claude should perform with it (e.g., creating components, applying styles, building layouts). The trigger terms are adequate but could be broader.
Suggestions
Add specific concrete actions like 'Applies Mixpanel-inspired styling to UI components, builds layouts, and styles forms and dashboards' to improve specificity.
Expand trigger terms to include variations users might say, such as 'Mixpanel-style', 'Mixpanel theme', 'UI components', 'dashboard design', or 'analytics interface'.
| 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 components', 'apply styling', or 'build layouts'. | 2 / 3 |
Completeness | Clearly answers both what ('Mixpanel's UI design system') and when ('Use when building interfaces inspired by Mixpanel's aesthetic - light mode, Inter font, 4px grid'), with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Mixpanel' as a strong trigger term and some design-related terms like 'light mode', 'Inter font', '4px grid', but misses common variations users might say like 'design system', 'UI components', 'styling', 'theme', or 'Mixpanel-style'. | 2 / 3 |
Distinctiveness Conflict Risk | Very distinct niche - specifically targets Mixpanel's design aesthetic with unique identifiers (Inter font, 4px grid, light mode). Unlikely to conflict with other design system skills unless there are multiple Mixpanel-related 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 structured design system reference with clear semantic tokens, typography specs, and interaction guidelines using MUST/SHOULD/NEVER conventions. However, it contains several suspicious or erroneous values (0px input height, dark red for 'surface-raised' in a light-mode system, light gray #CFCFCF for 'text-primary'), lacks executable code examples, and could benefit from splitting detailed reference tables into separate files.
Suggestions
Review and fix apparently erroneous values: input height of 0px, surface-raised (#85292D) being dark red in a light-mode system, and text-primary (#CFCFCF) being very light gray which would fail the stated 4.5:1 contrast ratio against #F4F3F4 background.
Add executable code examples showing how to apply the design tokens (e.g., Tailwind config snippets, CSS custom properties setup, or component examples).
Move detailed reference tables (full font size list, border-radius scale, text styles table) into separate reference files and link to them from the main skill.
Remove redundant information like the border-radius scale listed twice and the 'Count' column in the text styles table that adds no value.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful reference data but is overly verbose in places—listing every detected font size (5px through 62px), redundant border-radius scales repeated twice, and some questionable values (e.g., `surface-raised` as #85292D which is a dark red, not a typical 'raised surface' color in a light-mode design system). Some tables include a 'Count' column with all 1s, adding no value. | 2 / 3 |
Actionability | The skill provides concrete design tokens, specific hex values, and clear MUST/SHOULD/NEVER constraints, which is good. However, it lacks executable code examples (e.g., CSS/Tailwind snippets showing how to apply these tokens), and some values appear contradictory or erroneous (input height of 0px, surface-raised being a dark red), which undermines practical usability. | 2 / 3 |
Workflow Clarity | This is primarily a reference/constraint skill rather than a multi-step workflow, so explicit sequencing is less critical. However, the 'When to Apply' section is vague, and there's no guidance on how to resolve conflicts between constraints or how to validate that an implementation conforms to the design system. | 2 / 3 |
Progressive Disclosure | The content is well-structured with clear sections and tables, but it's quite long (~180 lines) with detailed reference tables that could be split into separate files (e.g., COLORS.md, TYPOGRAPHY.md). There are no references to external files for deeper detail, and everything is inlined in a single document. | 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.