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.

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 ./.agents/skills/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.

A well-organized, actionable design-guidance skill with concrete technique lists and a clear think-then-build workflow. The main weakness is motivational padding that inflates token cost without adding actionable value.

Suggestions

Trim motivational padding such as 'Remember: Claude is capable of extraordinary creative work. Don't hold back...' and 'There are so many flavors to choose from' to improve token efficiency.

Add an explicit final review/refine step (e.g., 're-evaluate the result against the chosen aesthetic direction and refine details') to strengthen workflow checkpoints.

Reduce redundant emphasis — the intentionality point is made multiple times and could be consolidated once.

DimensionReasoningScore

Conciseness

Mostly efficient bullet lists of concrete techniques, but motivational padding ('Remember: Claude is capable of extraordinary creative work. Don't hold back...', 'There are so many flavors to choose from') could be trimmed without losing guidance value.

3 / 5

Actionability

Concrete, specific guidance for an instruction-only skill — named techniques (CSS variables, Motion library, animation-delay, gradient meshes, noise textures, grid-breaking) and concrete font/palette direction, with only minor abstraction in the 'commit to a BOLD aesthetic direction' framing.

4 / 5

Workflow Clarity

Clear two-phase sequence (Design Thinking: Purpose/Tone/Constraints/Differentiation, then 'implement working code') with the 'before coding, understand the context' gate acting as a checkpoint; minor gap is the absence of an explicit review/refine-against-vision step.

4 / 5

Progressive Disclosure

A single ~37-line SKILL.md with no bundle files and no need for external references, organized into well-signaled sections (Design Thinking, Frontend Aesthetics Guidelines) with clear bold sub-points — meets 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.

A strong description that clearly states both capability and trigger conditions with concrete examples, scoring well across all dimensions. The only weakness is slightly repetitive action verbs and a few missing common trigger synonyms.

Suggestions

Vary the action verbs beyond 'build/create' and 'styling/beautifying' (e.g., add 'design' or 'redesign') to broaden natural trigger coverage.

Consider adding 'web design' or 'frontend design' as explicit keywords users commonly say.

DimensionReasoningScore

Specificity

Lists several concrete actions and artifact types ('build web components, pages, artifacts, posters, or applications', 'styling/beautifying any web UI'), but the verbs are limited to build/create plus style, leaving minor coverage gaps versus the comprehensive anchor.

4 / 5

Completeness

Explicitly answers both what ('Create distinctive, production-grade frontend interfaces') and when ('Use this skill when the user asks to build...') with concrete trigger phrases and examples.

5 / 5

Trigger Term Quality

Strong natural phrasing users would say ('build web components, pages', 'landing pages, dashboards', 'styling/beautifying any web UI') with synonyms, though common terms like 'design' or 'redesign' are absent.

4 / 5

Distinctiveness Conflict Risk

Clear niche (distinctive visual frontend design that 'avoids generic AI aesthetics') with distinct triggers and minimal overlap with other 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
Kiz8-Team/open-agents
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.