CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

90

1.35x
Quality

85%

Does it follow best practices?

Impact

96%

1.35x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

The canonical home for this skill is frontend-design in anthropics/skills

SKILL.md
Quality
Evals
Security

Quality

Content

78%Weight 40%Scale 1-5

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

A tight, well-organized design-guidance skill that gives concrete aesthetic directives and a clear think-then-implement sequence. The main weakness is minor motivational padding and the absence of any executable code examples despite many technique references.

Suggestions

Trim motivational exhortations ('Don't hold back...', 'Remember: Claude is capable of extraordinary creative work', 'There are so many flavors to choose from') to recover tokens without losing guidance.

Add at least one small executable snippet (e.g., a CSS-variables palette block or a staggered-reveal animation-delay example) to lift actionability from directive-level to copy-paste-ready.

Optionally surface a lightweight validation/iteration checkpoint (e.g., 'review the result against the chosen Tone and Differentiation before finalizing') to make the workflow's feedback loop explicit.

DimensionReasoningScore

Conciseness

The body is mostly efficient actionable guidance, but includes motivational padding ('Don't hold back, show what can truly be created', 'Remember: Claude is capable of extraordinary creative work', 'There are so many flavors to choose from') that could be trimmed without losing substance.

4 / 5

Actionability

Gives concrete, implementable directives — named techniques (animation-delay, CSS variables, gradient meshes, noise textures, grain overlays), a named library (Motion for React), and named anti-patterns (Inter/Roboto/Arial/Space Grotesk, purple gradients on white); absence of executable code is acceptable for an instruction-only design skill but keeps it just short of fully copy-paste ready.

4 / 5

Workflow Clarity

A clear two-phase sequence (Design Thinking: Purpose/Tone/Constraints/Differentiation, then implement working code with four explicit criteria) is present; no explicit validation checkpoints, but the task is generative rather than destructive or batch, so the missing-checkpoint cap does not apply.

4 / 5

Progressive Disclosure

No bundle files exist and the body is ~37 lines (under 50) with well-organized sections (## Design Thinking, ## Frontend Aesthetics Guidelines), satisfying the simple-skill exception for progressive disclosure.

5 / 5

Total

17

/

20

Passed

Description

91%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-structured description that explicitly states both capability and trigger conditions with natural, comprehensive keywords. Minor overlap risk with general frontend development and somewhat repetitive action verbs keep it just below perfect.

DimensionReasoningScore

Specificity

Lists several concrete actions (build, create, generate, style/beautify) across many concrete objects (web components, pages, posters, dashboards, React components, HTML/CSS layouts); the actions themselves are somewhat repetitive, leaving minor coverage gaps versus a comprehensive list.

4 / 5

Completeness

Explicitly answers both 'what' ('Create distinctive, production-grade frontend interfaces... Generates creative, polished code and UI design that avoids generic AI aesthetics') and 'when' ('Use this skill when the user asks to build...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Comprehensive natural trigger terms including synonyms and concrete artifacts ('web components, pages, artifacts, posters, or applications', 'websites, landing pages, dashboards, React components, HTML/CSS layouts', 'styling/beautifying any web UI') that users would naturally say.

5 / 5

Distinctiveness Conflict Risk

Has a clear design-aesthetics niche with distinctive framing ('avoids generic AI aesthetics'), but the broad 'build web components, pages, or applications' trigger could overlap with general web-development skills.

4 / 5

Total

18

/

20

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
freekmurze/dotfiles
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.