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.

1.35x

Quality

71%

Does it follow best practices?

Impact

96%

1.35x

Average score across 5 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./config/claude/skills/frontend-design/SKILL.md

Quality

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 articulates capabilities with specific examples and includes explicit 'Use this skill when...' guidance. The description effectively uses third person voice and provides good trigger term coverage. The main weakness is potential overlap with general web development or coding skills, though the emphasis on design quality and avoiding 'generic AI aesthetics' provides some differentiation.

Dimension	Reasoning	Score
Specificity	Lists multiple specific concrete actions: 'build web components, pages, artifacts, posters, or applications' with examples including 'websites, landing pages, dashboards, React components, HTML/CSS layouts' and 'styling/beautifying any web UI'.	3 / 3
Completeness	Clearly answers both what ('Create distinctive, production-grade frontend interfaces') AND when ('Use this skill when the user asks to build web components, pages, artifacts...') with explicit trigger guidance.	3 / 3
Trigger Term Quality	Excellent coverage of natural terms users would say: 'web components', 'pages', 'websites', 'landing pages', 'dashboards', 'React components', 'HTML/CSS', 'styling', 'beautifying', 'web UI', 'posters', 'artifacts'.	3 / 3
Distinctiveness Conflict Risk	While it emphasizes 'high design quality' and 'avoids generic AI aesthetics' as differentiators, terms like 'web components', 'React components', and 'HTML/CSS' could overlap with general coding skills. The design-quality focus helps but doesn't fully eliminate conflict risk.	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 strong conceptual guidance for creating distinctive frontend designs with clear aesthetic principles and anti-patterns to avoid. However, it lacks concrete code examples, executable snippets, and explicit workflow validation steps that would make it immediately actionable. The content would benefit from showing rather than telling through specific implementation examples.

Suggestions

Add 2-3 concrete code examples showing typography setup, CSS variable patterns for theming, and a sample animation implementation

Include a brief checklist or validation steps (e.g., 'Before finalizing: verify contrast ratios, test on mobile, confirm animation performance')

Consider extracting detailed aesthetic options and font pairing examples to a separate reference file to keep SKILL.md focused on workflow

Dimension	Reasoning	Score
Conciseness	The skill is moderately efficient but includes some unnecessary elaboration. Phrases like 'Claude is capable of extraordinary creative work' and repeated emphasis on avoiding 'AI slop' could be trimmed. The aesthetic options list is helpful but verbose.	2 / 3
Actionability	Provides conceptual guidance and design principles but lacks concrete code examples. No executable snippets showing typography implementation, animation patterns, or CSS variable structures. Describes what to do rather than showing how.	2 / 3
Workflow Clarity	Has a logical flow (Design Thinking → Implementation) but lacks explicit validation steps. No checkpoints for reviewing design choices, testing responsiveness, or verifying accessibility. The process is implied rather than sequenced.	2 / 3
Progressive Disclosure	Content is reasonably organized with clear sections, but everything is inline in one file. Could benefit from references to separate files for specific topics like animation patterns, typography pairings, or color palette examples.	2 / 3
	Total	8 / 12 Passed

Validation

100%

Warnings & errors only

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: 355d067

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.