retool-ui-skills
Retool's UI design system. Use when building interfaces inspired by Retool'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/retool/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 well-structured with a clear 'Use when' clause and distinctive triggers tied to Retool's specific design system. Its main weakness is the lack of concrete actions—it describes the aesthetic but not what the skill actually does (e.g., generate components, apply styles, create layouts). Adding specific capabilities would strengthen it significantly.
Suggestions
Add concrete actions the skill performs, e.g., 'Generates UI components, applies consistent styling, and builds layouts following Retool's design system.'
Include additional trigger terms users might naturally say, such as 'dashboard UI', 'admin panel', 'Retool-style components', or 'internal tool interface'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific details (light 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 ('Retool's UI design system') and when ('Use when building interfaces inspired by Retool's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Retool' as a strong trigger term and mentions 'UI design system', 'light mode', 'Inter font', and '4px grid', but misses common variations users might say like 'dashboard', 'admin panel', 'component styling', or 'design tokens'. | 2 / 3 |
Distinctiveness Conflict Risk | Very distinct niche - specifically targets Retool's aesthetic with unique identifiers (Inter font, 4px grid, light mode). 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-organized design system reference with concrete values and clear MUST/SHOULD/NEVER constraints, but it reads more like a raw design audit dump than a curated skill. It lacks executable code examples (CSS snippets, Tailwind classes, component templates) that would make it immediately actionable, and the verbose reference tables could be split into separate files with a concise overview in the main skill.
Suggestions
Add executable code examples: include a sample component (e.g., a button in HTML/CSS or React with Tailwind) that demonstrates the design tokens, typography, and spacing rules in practice.
Split detailed reference tables (full text styles list, all font sizes, layout patterns) into a separate REFERENCE.md file and keep only the most-used values inline.
Deduplicate the text styles table—multiple entries with the same style name but different colors should be consolidated or explained.
Add a quick-start section at the top with a minimal, copy-paste ready code snippet showing the core setup (Inter font import, base colors, grid spacing) so Claude can immediately scaffold a compliant UI.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful reference data but is overly verbose in places—the text styles table has many redundant entries (e.g., multiple 'text-45px', 'text-36px' rows with slight color variations), the font sizes list is exhaustive but not clearly actionable, and detected layout patterns feel like raw data dumps rather than curated guidance. Some sections like 'Detected Layout Patterns' add little value. | 2 / 3 |
Actionability | The skill provides concrete values (hex codes, pixel sizes, specific CSS properties) which is good, but lacks executable code examples. There are no copy-paste ready component snippets, CSS/Tailwind examples, or implementation code. The MUST/SHOULD/NEVER rules are specific but remain declarative rather than showing how to implement them. | 2 / 3 |
Workflow Clarity | For a design system reference skill, there's no clear workflow for applying these guidelines—no sequence like 'start with layout, then apply colors, then typography.' The rules are well-organized by category but there's no guidance on how to validate compliance or handle conflicts between rules. The interaction section mentions AlertDialog for destructive actions but doesn't show validation steps. | 2 / 3 |
Progressive Disclosure | The content is well-structured with clear section headers and tables, but it's a monolithic file that could benefit from splitting detailed reference tables (all font sizes, all text styles) into separate reference files. No external file references are provided. The inline tables make the file long when a quick-start summary plus linked references would be more effective. | 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.