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, or applications. Generates creative, polished code that avoids generic AI aesthetics.

66

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/frontend-design/frontend-design/SKILL.md

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

SKILL.md
Quality
Evals
Security

Quality

Content

71%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.

The body delivers concrete, opinionated design guidance with clear sections and specific dos/don'ts, well-suited to a compact instruction-only skill. It would benefit from trimming motivational padding and adding an explicit review checkpoint against the chosen aesthetic.

Suggestions

Remove motivational padding ('There are so many flavors to choose from', the 'Remember: Claude is capable...' closing paragraph) to tighten token efficiency.

Add a brief validation checkpoint, e.g. 'Review the result against the chosen tone and the anti-pattern list before finalizing.'

Optionally include one small worked example (a font pairing or CSS variable palette) to lift actionability from concrete directives to copy-paste-ready.

DimensionReasoningScore

Conciseness

The body is mostly efficient and assumes Claude's design competence, but includes padding such as 'There are so many flavors to choose from' and the motivational closing 'Remember: Claude is capable of extraordinary creative work. Don't hold back...' that could be trimmed.

3 / 5

Actionability

Gives concrete, executable directives per aesthetic dimension (CSS variables, animation-delay, Motion library for React, gradient meshes/noise textures) plus specific anti-patterns to avoid (Inter, Roboto, Arial, purple gradients on white, Space Grotesk); minor gaps remain with no worked code example.

4 / 5

Workflow Clarity

A clear two-phase sequence is present (Design Thinking context → pick aesthetic direction → implement), and the skill is single-purpose so the simple-skill exception applies; however there is no explicit validation/review checkpoint to confirm the output matches the chosen vision.

4 / 5

Progressive Disclosure

The skill is under 50 lines with no bundle files and no need for external references, and content is well-organized into clearly signaled sections ('Design Thinking', 'Frontend Aesthetics Guidelines'), meeting the simple-skill exception for a top score.

5 / 5

Total

16

/

20

Passed

Description

87%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.

The description is strong: it states concrete capabilities, gives an explicit 'Use when...' trigger covering components/pages/applications, and carves out a distinctive design-quality niche. Minor room to broaden trigger synonyms and add more granular action verbs.

DimensionReasoningScore

Specificity

Lists several concrete actions ('build web components, pages, or applications', 'Generates creative, polished code', 'production-grade frontend interfaces') but does not enumerate the distinct design techniques in as much granularity as the 5-anchor example.

4 / 5

Completeness

Explicitly answers both what ('Create distinctive, production-grade frontend interfaces... Generates creative, polished code') and when ('Use this skill when the user asks to build web components, pages, or applications') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural phrases users would say ('build web components, pages, or applications', 'frontend interfaces') are present with good coverage, though common synonyms like 'website', 'UI', 'landing page', or 'dashboard' are missing.

4 / 5

Distinctiveness Conflict Risk

A clear design-quality niche ('avoid generic AI aesthetics', 'high design quality') with concrete frontend triggers means minimal overlap with general coding skills.

5 / 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
anbeime/skill
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.