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 ./public/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 the skill does and when to use it, with rich trigger terms covering many natural user phrasings. The description effectively differentiates itself through its emphasis on design quality and avoiding generic AI aesthetics, though its broad scope across all frontend work could create overlap with more specialized skills. The third-person voice is used correctly 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 with high design quality, generates creative polished code) and 'when' (explicit 'Use this skill when...' clause with specific trigger scenarios like building web components, pages, dashboards, 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 scope is quite broad ('web components, pages, applications') and could overlap with general coding skills or specific framework skills. The 'high design quality' and 'avoids generic AI aesthetics' differentiators help but the domain coverage is wide enough to potentially conflict with more specialized frontend skills. | 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 strong creative philosophy for frontend design with useful anti-patterns to avoid and good aesthetic direction categories. However, it reads more as a design manifesto than an actionable skill—it lacks concrete code examples, starter templates, or executable patterns that would make it immediately useful. The workflow is implicit rather than explicit, and motivational language consumes tokens that could be spent on concrete guidance.
Suggestions
Add 1-2 concrete code examples showing a before (generic AI aesthetic) and after (distinctive design) for a common component like a hero section or card, demonstrating the principles in practice.
Define an explicit workflow: 1) Analyze requirements → 2) Choose aesthetic direction → 3) Define design tokens (CSS variables) → 4) Implement structure → 5) Add motion/effects → 6) Review against anti-pattern checklist.
Remove motivational/aspirational language ('Claude is capable of extraordinary creative work', 'show what can truly be created') and replace with additional concrete, actionable guidance or examples.
Consider creating a separate reference file with curated font pairings, color palette examples, and animation snippets organized by aesthetic direction (brutalist, editorial, luxury, etc.).
| 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). The design thinking section and aesthetics guidelines are mostly useful but could be tightened—some bullet points explain concepts Claude already understands about design. | 2 / 3 |
Actionability | The skill provides concrete design direction (specific font anti-patterns, color strategy, animation approaches, layout techniques) and names specific libraries (Motion for React), but lacks any executable code examples, starter templates, or concrete before/after demonstrations. It's more of a design philosophy guide than a step-by-step actionable skill. | 2 / 3 |
Workflow Clarity | There's a loose two-phase workflow (design thinking → implementation) but no explicit sequencing, validation checkpoints, or feedback loops. For a skill that produces production-grade code, there's no mention of testing, browser compatibility checks, accessibility validation, or iterative refinement steps. | 2 / 3 |
Progressive Disclosure | The content is reasonably organized with clear section headers (Design Thinking, Frontend Aesthetics Guidelines) but everything is inline in a single file. For a skill of this scope, separate references for typography resources, color palette examples, animation patterns, or framework-specific templates would improve navigation. However, with no bundle files, the monolithic approach is somewhat justified. | 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
- douglasvought/wiggle-skills
- Commit
b27906e
- 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.