planetscale-ui-skills
Planetscale's UI design system. Use when building interfaces inspired by Planetscale'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/planetscale/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 brand anchor (Planetscale), making it easy to identify when to select this skill. However, it lacks specificity about what concrete actions the skill performs (e.g., generating components, applying color palettes, creating layouts) and could benefit from additional natural trigger terms users might use when requesting this type of work.
Suggestions
Add concrete actions the skill performs, e.g., 'Creates UI components, applies color palettes, and generates styled layouts following Planetscale's design system.'
Include additional natural trigger terms users might say, such as 'dashboard UI', 'design tokens', 'component styling', or 'Planetscale-style theme'.
| 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 buttons', or 'build layouts'. | 2 / 3 |
Completeness | Clearly answers both what ('Planetscale's UI design system') and when ('Use when building interfaces inspired by Planetscale's aesthetic - dark mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Planetscale', 'dark mode', 'Inter font', and '4px grid' which are somewhat relevant, but misses natural user terms like 'UI components', 'design tokens', 'styling', 'theme', or 'dashboard design'. | 2 / 3 |
Distinctiveness Conflict Risk | The Planetscale brand name creates a very distinct niche, and the specific aesthetic markers (dark mode, Inter font, 4px grid) further narrow the scope, making it unlikely to conflict with 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 skill provides a comprehensive design system reference with clear constraints using MUST/SHOULD/NEVER language, well-structured tables, and specific values. However, it lacks executable code examples (CSS custom properties, Tailwind config, or component snippets) that would make it immediately actionable, and includes verbose reference data (10 heading styles, 24 font sizes) that could be split into separate files. Some color choices seem inconsistent with a dark-mode system (e.g., surface-raised is #F8F8F9 which is nearly white).
Suggestions
Add executable code examples: a CSS custom properties block defining the semantic tokens, a Tailwind config snippet, or a sample component implementing the button variant.
Split detailed reference tables (all text styles, all font sizes, detected layout patterns) into a separate REFERENCE.md file and link to it from the main skill.
Review color token consistency—several values seem contradictory for a dark-mode system (e.g., surface-raised #F8F8F9 is white, text-primary #202020 is dark on a dark background, border-default #D44927 is bright orange).
Add a brief 'Quick Start' workflow showing the steps to set up a new Planetscale-style interface (e.g., 1. Set up CSS variables, 2. Configure font, 3. Apply base styles).
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful design tokens and constraints but is overly verbose in places—the text styles table lists 10 nearly identical heading sizes with single-use counts, and the typography reference section repeats information. The detected layout patterns section adds marginal value. Some of this could be trimmed significantly. | 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 constraints in practice (e.g., a Tailwind config, CSS custom properties block, or component snippet). The MUST/SHOULD/NEVER directives are clear but remain declarative rather than executable. | 2 / 3 |
Workflow Clarity | This is primarily a reference/constraint skill rather than a multi-step workflow, so explicit sequencing is less critical. However, there's no guidance on the order of applying these constraints when building a new interface, and no validation steps (e.g., how to verify contrast ratios or grid alignment). For a design system skill, a brief 'getting started' workflow would help. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and tables, but it's a monolithic document that could benefit from splitting detailed reference tables (all 24 font sizes, all text styles, all layout patterns) into separate reference files. The 'When to Apply' section is a good overview, but the document doesn't link to any supplementary files for deeper detail. | 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.