frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.

Quality

69%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

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

Quality

Discovery

82%

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 does a solid job of establishing both what the skill does and when to use it, with a clear 'Use when' clause and several natural trigger terms. Its main weaknesses are the somewhat vague capability description (relying on qualitative adjectives rather than concrete actions) and a broad scope that could conflict with other frontend or design skills. The trailing clause 'or when any design skill requires project context' is particularly ambiguous and could cause unintended triggering.

Suggestions

Replace qualitative descriptors like 'distinctive, production-grade' with more concrete actions such as 'build responsive layouts, style UI components, create landing pages with custom typography and color schemes'.

Narrow or clarify the catch-all clause 'or when any design skill requires project context' to reduce conflict risk with other skills—specify what 'project context' means or remove it.

Dimension	Reasoning	Score
Specificity	Names the domain (frontend interfaces) and some actions ('generates creative, polished code'), but the specific actions are not very concrete—'distinctive, production-grade frontend interfaces' and 'avoids generic AI aesthetics' are more qualitative descriptors than concrete actions like 'create layouts, style components, build responsive pages'.	2 / 3
Completeness	Clearly answers both what ('Create distinctive, production-grade frontend interfaces with high design quality, generates creative polished code') and when ('Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context') with an explicit 'Use when' clause.	3 / 3
Trigger Term Quality	Includes good natural trigger terms users would say: 'web components', 'pages', 'artifacts', 'posters', 'applications', 'build', 'design'. These cover a reasonable range of how users would phrase frontend design requests.	3 / 3
Distinctiveness Conflict Risk	While it emphasizes 'high design quality' and 'avoids generic AI aesthetics' as differentiators, the scope is quite broad ('web components, pages, artifacts, posters, or applications') and could easily overlap with general frontend/coding skills or other UI-related skills. The phrase 'or when any design skill requires project context' is especially broad and conflict-prone.	2 / 3
	Total	10 / 12 Passed

Implementation

57%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-structured design skill with strong progressive disclosure and specific aesthetic guidelines that genuinely add value beyond Claude's baseline knowledge. Its main weaknesses are the lack of executable code examples (CSS snippets, component templates) and the absence of explicit validation checkpoints during the implementation workflow. The DO/DON'T format is effective but would benefit from concrete code demonstrations.

Suggestions

Add 2-3 executable CSS/HTML code snippets demonstrating key techniques (e.g., a clamp() fluid type scale, an OKLCH palette with custom properties, a grid-template-rows height animation) to improve actionability.

Add an explicit implementation workflow with numbered steps and validation checkpoints, e.g.: 1. Gather context → 2. Define direction → 3. Implement structure → 4. Apply aesthetics → 5. Run AI Slop Test checklist → 6. Iterate on failures.

Trim motivational language in the Implementation Principles section ('the model is capable of extraordinary creative work', 'Don't hold back') which doesn't add actionable guidance.

Dimension	Reasoning	Score
Conciseness	The skill is fairly well-organized and most content earns its place, but there's some verbosity in motivational/philosophical statements ('the model is capable of extraordinary creative work', 'show what can truly be created') and some redundancy between the AI Slop Test section and the DON'T guidelines already listed. The context gathering protocol is somewhat over-explained for Claude.	2 / 3
Actionability	The skill provides extensive DO/DON'T guidelines which are concrete and specific, but lacks executable code examples. For a frontend design skill, showing even one concrete CSS snippet (e.g., a clamp() fluid sizing example, an OKLCH palette definition, or a grid-template-rows animation) would significantly improve actionability. The guidance is specific but descriptive rather than executable.	2 / 3
Workflow Clarity	The Context Gathering Protocol has a clear 3-step sequence, which is good. However, the overall design workflow (gather context → choose direction → implement → validate against AI slop test) is implicit rather than explicitly sequenced. There are no validation checkpoints during implementation, and the AI Slop Test is presented as a review step but without a structured feedback loop for iteration.	2 / 3
Progressive Disclosure	Excellent use of progressive disclosure with clear one-level-deep references to specific reference files (typography.md, color-and-contrast.md, spatial-design.md, motion-design.md, interaction-design.md, responsive-design.md, ux-writing.md). Each section provides actionable summary content inline while pointing to detailed references. Navigation is well-signaled with arrow markers.	3 / 3
	Total	9 / 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: pbakaus/impeccable
Commit: db1add7

Reviewed: 4 days 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.