frontend-design-skill

Create distinctive, production-grade frontend interfaces with high design quality — avoids generic AI aesthetics.

Quality

40%

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 ./frontend/frontend-design-skill/SKILL.md

Quality

Discovery

22%

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 description is too abstract and lacks actionable specificity. It focuses on quality attributes ('distinctive', 'production-grade', 'high design quality') rather than concrete capabilities, and completely omits trigger guidance for when Claude should select this skill.

Suggestions

Add a 'Use when...' clause with specific trigger terms like 'UI design', 'web interface', 'CSS styling', 'React components', or 'landing page'

Replace vague quality claims with concrete actions such as 'Build responsive layouts, style components, implement animations, create design systems'

Include natural user keywords and file types users would mention: 'HTML', 'CSS', 'React', 'Vue', 'Tailwind', '.tsx', '.css'

Dimension	Reasoning	Score
Specificity	The description uses vague language like 'distinctive' and 'high design quality' without listing concrete actions. It doesn't specify what actions are performed (e.g., build components, style layouts, create animations).	1 / 3
Completeness	The 'what' is vague (create interfaces) and there is no 'when' clause or explicit trigger guidance. Missing a 'Use when...' statement entirely.	1 / 3
Trigger Term Quality	Contains 'frontend interfaces' which users might say, but lacks common variations like 'UI', 'web design', 'CSS', 'React', 'components', or file extensions that users would naturally mention.	2 / 3
Distinctiveness Conflict Risk	The phrase 'avoids generic AI aesthetics' provides some distinction, but 'frontend interfaces' is broad and could overlap with general web development, React, CSS, or UI/UX skills.	2 / 3
	Total	6 / 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 skill provides strong conceptual guidance for distinctive frontend design with good organization and clear anti-patterns. However, it lacks the concrete, executable code examples that would make it immediately actionable—no CSS snippets, animation examples, or typography implementations are provided despite being a code-focused skill.

Suggestions

Add 2-3 concrete code examples showing distinctive typography setup, color variable patterns, or animation implementations

Include a specific CSS snippet demonstrating the recommended animation approach (e.g., staggered reveals with animation-delay)

Add a validation checkpoint for accessibility (e.g., 'Run contrast checker before finalizing color palette')

Dimension	Reasoning	Score
Conciseness	The skill is reasonably efficient but includes some unnecessary elaboration, particularly in the 'Design Thinking' section with extensive tone options that could be condensed. The anti-patterns section is useful but slightly verbose.	2 / 3
Actionability	Provides conceptual guidance and principles but lacks concrete, executable code examples. No copy-paste ready snippets for CSS variables, animations, or typography implementations despite being a frontend skill.	2 / 3
Workflow Clarity	The 'Design Thinking' section provides a clear sequence (Purpose → Tone → Constraints → Differentiation → Implementation), but lacks validation checkpoints or feedback loops for verifying design quality or accessibility compliance.	2 / 3
Progressive Disclosure	Well-organized with clear sections (Design Thinking, Guidelines, Anti-Patterns, Key Conventions, Integration Notes). References to companion skills are clearly signaled. Content is appropriately structured for a skill overview.	3 / 3
	Total	9 / 12 Passed

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: achreftlili/deep-dev-skills
Commit: 181fcbc

Reviewed: about 1 month 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.