frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
84
71%
Does it follow best practices?
Impact
96%
1.35xAverage score across 5 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./config/claude/skills/frontend-design/SKILL.mdQuality
Discovery
92%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description that clearly communicates both what it does and when to use it, with rich trigger terms covering many natural user phrasings. The main weakness is potential overlap with general web development or coding skills, though the emphasis on design quality and production-grade aesthetics provides some differentiation. The description uses proper third-person voice throughout.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and outputs: 'web components, pages, artifacts, posters, applications' with further examples like 'websites, landing pages, dashboards, React components, HTML/CSS layouts'. Also specifies the quality dimension: 'production-grade', 'polished code and UI design', 'avoids generic AI aesthetics'. | 3 / 3 |
Completeness | Clearly answers both 'what' (create distinctive, production-grade frontend interfaces) and 'when' (explicit 'Use this skill when...' clause with detailed trigger scenarios including building web components, pages, applications, styling/beautifying web UI). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'web components', 'pages', 'landing pages', 'dashboards', 'React components', 'HTML/CSS layouts', 'styling', 'beautifying', 'web UI', 'posters', 'artifacts', 'websites', 'applications'. These are terms users naturally use when requesting frontend work. | 3 / 3 |
Distinctiveness Conflict Risk | While it focuses on frontend/UI with a design quality emphasis, the broad scope ('web components, pages, applications, React components, HTML/CSS') could overlap with general coding skills or basic web development skills. The distinguishing factor is the 'high design quality' and 'avoids generic AI aesthetics' angle, but terms like 'React components' or 'HTML/CSS layouts' could easily trigger for a general coding skill too. | 2 / 3 |
Total | 11 / 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 solid conceptual framework for creating distinctive frontend designs with good anti-pattern identification (avoiding 'AI slop' aesthetics). Its main weaknesses are the lack of concrete, executable code examples demonstrating the principles, some motivational verbosity, and missing validation/iteration steps. The guidance is more philosophical than actionable—it tells Claude what good design looks like but doesn't show it.
Suggestions
Add 2-3 concrete code examples showing before (generic) and after (distinctive) implementations for key principles like typography pairing, color systems, or animation patterns.
Include a brief validation checklist at the end (e.g., 'Verify: no default fonts used, CSS variables defined, at least one memorable visual element, animations tested') to create a feedback loop for quality.
Trim motivational language ('Claude is capable of extraordinary creative work', 'Don't hold back') which doesn't add actionable guidance and wastes tokens.
Consider extracting the detailed aesthetics guidelines into a referenced file (e.g., AESTHETICS.md) to keep SKILL.md as a concise overview with clear navigation.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains some unnecessary motivational language ('Claude is capable of extraordinary creative work', 'Don't hold back') and repetitive emphasis on avoiding generic aesthetics (stated multiple times). However, most content is relevant guidance that Claude wouldn't inherently know about the user's design preferences. | 2 / 3 |
Actionability | The skill provides specific design principles (typography pairing, color variables, animation approaches) and names concrete anti-patterns to avoid, but lacks any executable code examples, specific CSS snippets, or concrete before/after demonstrations. It describes what to do rather than showing how. | 2 / 3 |
Workflow Clarity | There is a clear two-phase workflow (Design Thinking → Implementation) with the design thinking phase having structured questions. However, there are no validation checkpoints, no explicit steps for reviewing output quality, and no feedback loop for iterating on the design. For a skill that produces complex frontend code, some verification guidance would be valuable. | 2 / 3 |
Progressive Disclosure | The content is reasonably structured with clear sections (Design Thinking, Frontend Aesthetics Guidelines) but everything is inline in a single file. The aesthetics guidelines section is quite long and could benefit from being split into referenced files (e.g., a typography guide, animation patterns, or example gallery). No external references are provided. | 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
- freekmurze/dotfiles
- Commit
05d40bb
- 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.