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.

65

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/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 is well-structured, actionable, and appropriately scoped for a creative frontend skill, with concrete aesthetic techniques and a clear thinking-to-implementation flow. Its main weakness is conciseness: motivational exhortations and repeated anti-generic framing inflate the token budget without adding actionable guidance.

Suggestions

Trim motivational padding such as 'Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created' to reduce token overhead.

Consolidate the three overlapping anti-generic statements ('NEVER use generic AI-generated aesthetics...', 'NEVER converge on common choices', 'No design should be the same') into a single concise rule.

Add one short concrete worked example (e.g., a minimal HTML/CSS snippet demonstrating a distinctive font pairing and CSS-variable palette) to lift actionability from concrete directives to copy-paste-ready guidance.

DimensionReasoningScore

Conciseness

Mostly efficient directive guidance, but it carries motivational padding ('Don't hold back, show what can truly be created', 'Bold maximalism and refined minimalism both work - the key is intentionality, not intensity') and restates the anti-generic point across 'NEVER use', 'NEVER converge', and 'No design should be the same', which could be tightened.

3 / 5

Actionability

Concrete, specific directives are provided (named aesthetic categories, techniques like 'gradient meshes, noise textures, geometric patterns, layered transparencies, grain overlays', and library guidance 'Use Motion library for React', 'animation-delay'), but there is no full worked example to copy, leaving a minor gap.

4 / 5

Workflow Clarity

A clear light sequence is present (Design Thinking -> commit to a BOLD direction -> implement working code), appropriate for a simple creative skill with no destructive/batch validation needs, though the steps are implied more than crisply enumerated.

4 / 5

Progressive Disclosure

Under 50 lines with no need for external references and no bundle files present; the body is well-organized with clear section headers ('Design Thinking', 'Frontend Aesthetics Guidelines') and structured bullets, satisfying the simple-skill exception.

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 explicitly covers both what the skill does and when to use it, with concrete object types and natural trigger phrasing. Its only weakness is that the listed actions are largely variations on 'build/generate' rather than a comprehensive set of distinct operations.

DimensionReasoningScore

Specificity

Lists several concrete actions and object types ('build web components, pages, artifacts, posters, or applications', 'styling/beautifying any web UI', 'Generates creative, polished code') but the actions are mostly variations of build/generate, leaving minor coverage gaps versus the comprehensive anchor 5.

4 / 5

Completeness

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

5 / 5

Trigger Term Quality

Strong natural keyword coverage including synonyms ('web components, pages, artifacts, posters', 'websites, landing pages, dashboards, React components, HTML/CSS layouts', 'styling/beautifying any web UI'), with a few common terms (redesign, mockup, prototype) absent.

4 / 5

Distinctiveness Conflict Risk

Clear niche in frontend design/aesthetics with an anti-generic-AI framing and specific triggers (posters, dashboards, styling/beautifying), giving minimal overlap risk with non-frontend skills.

5 / 5

Total

18

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
netease-youdao/LobsterAI
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.