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.
Install with Tessl CLI
npx tessl i github:boisenoise/skills-collections --skill frontend-design84
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillEvaluation — 96%
↑ 1.35xAgent success when using this skill
Validation for skill structure
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 with natural trigger terms. The emphasis on design quality and avoiding 'generic AI aesthetics' provides some differentiation, though there's moderate overlap risk with general web development skills. Uses proper third-person voice throughout.
| 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'. Also specifies output quality: 'production-grade', 'high design quality', 'polished code'. | 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, posters, or applications') with explicit trigger guidance and concrete examples. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'web components', 'pages', 'artifacts', 'posters', 'applications', 'websites', 'landing pages', 'dashboards', 'React components', 'HTML/CSS layouts', 'styling', 'beautifying', 'web UI'. These are terms users naturally use when requesting frontend work. | 3 / 3 |
Distinctiveness Conflict Risk | While it carves out a frontend/UI niche with emphasis on 'high design quality' and avoiding 'generic AI aesthetics', terms like 'React components' and 'web applications' could overlap with general coding skills. The design quality emphasis helps differentiate but isn't a hard boundary. | 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 direction for creating distinctive frontend interfaces and successfully communicates the aesthetic philosophy. However, it lacks the concrete, executable code examples expected for a frontend development skill, relying instead on descriptive guidance. The skill would benefit from specific implementation patterns, CSS snippets, and validation steps to make it truly actionable.
Suggestions
Add concrete code examples: include a CSS variable setup for theming, a sample animation pattern, and a typography pairing implementation that demonstrates the principles described
Include a validation checklist: add explicit steps for reviewing design output against the stated principles (e.g., 'Check: Is the font choice distinctive? Is there a clear color hierarchy?')
Create separate reference files for detailed examples: move extensive lists (font alternatives, animation patterns, color palette examples) to linked files 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' add motivational padding rather than actionable content. | 2 / 3 |
Actionability | Provides conceptual guidance and design principles but lacks concrete, executable code examples. No copy-paste ready snippets for typography setup, animation patterns, or CSS variable structures despite being a frontend coding skill. | 2 / 3 |
Workflow Clarity | Has a logical flow (Design Thinking → Implementation) but lacks explicit validation checkpoints. No guidance on testing, reviewing output quality, or iterating on designs. The 'Before coding, understand the context' section is a good start but doesn't define clear completion criteria. | 2 / 3 |
Progressive Disclosure | Content is reasonably organized with clear sections (Design Thinking, Frontend Aesthetics Guidelines) but everything is inline. 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%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.
- 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.