rippling-ui-skills
Rippling's UI design system. Use when building interfaces inspired by Rippling'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/rippling/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 effectively identifies its niche (Rippling's design system) and includes 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., generate components, style layouts) and could include more natural trigger terms users might use when requesting Rippling-style interfaces.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Creates UI components, styles layouts, and generates themed pages following Rippling's design system.'
Expand trigger terms to include variations like 'Rippling-style', 'design system', 'UI components', 'themed interface', or 'component library'.
| 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 'generate themed pages'. | 2 / 3 |
Completeness | Clearly answers both what ('Rippling's UI design system') and when ('Use when building interfaces inspired by Rippling's aesthetic - dark mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Rippling' as a key trigger and some design terms like 'dark mode', 'Inter font', '4px grid', but misses common user phrases like 'design system', 'component library', 'UI components', 'Rippling-style', or 'theme'. | 2 / 3 |
Distinctiveness Conflict Risk | The specificity to Rippling's brand aesthetic with named design tokens (Inter font, 4px grid, dark mode) creates a clear niche that is 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 reasonably well-structured design system reference with clear constraints using MUST/SHOULD/NEVER language and organized tables for tokens and typography. Its main weaknesses are the lack of executable code examples (no CSS, Tailwind, or component snippets), some auto-generated content that adds noise without value (duplicate body-secondary entries, arbitrary spacing values like 71px), and the absence of validation guidance for the accessibility requirements it mandates.
Suggestions
Add at least 2-3 executable code examples showing how to implement key components (e.g., a button, a card, or a page layout) using these design tokens in CSS/Tailwind/React
Remove or consolidate the near-duplicate body-secondary typography entries - either pick canonical values or explain the variation pattern
Add a validation checklist or tool command for verifying contrast ratios meet the stated 4.5:1 requirement and spacing adheres to the 4px grid
Split the detailed token tables and typography reference into a separate TOKENS.md or REFERENCE.md file, keeping SKILL.md as a concise overview with links
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., multiple near-identical body-secondary entries with slightly different colors, detected layout patterns that add little value, and the 'count' column in text styles is mostly '1' and uninformative). Some sections like the spacing scale (2px, 3px, 5px, 15px, 71px) seem auto-generated rather than curated. | 2 / 3 |
Actionability | The skill provides concrete design tokens, specific values, and clear constraints (MUST/SHOULD/NEVER), which is good. However, it lacks executable code examples - no CSS snippets, no Tailwind config, no component code. For a UI design system skill, having at least one concrete implementation example (e.g., a button component or a card layout) would make it significantly more actionable. | 2 / 3 |
Workflow Clarity | The skill is primarily a reference document rather than a workflow, but the 'When to Apply' section is clear. However, there's no guidance on the order of operations when building a UI (e.g., start with layout, then typography, then colors), and no validation steps for checking contrast ratios or grid alignment despite mentioning accessibility requirements like 4.5:1 contrast ratio. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and tables, making it easy to scan. However, it's a fairly long monolithic document that could benefit from splitting detailed token tables and typography references into separate files, with the main SKILL.md providing a concise overview and linking out to detailed references. | 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.