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.

83

1.11x
Quality

75%

Does it follow best practices?

Impact

98%

1.11x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./data/1-frontend-design/SKILL.md

The canonical home for this skill is frontend-design in majiayu000/claude-skill-registry

SKILL.md
Quality
Evals
Security

Quality

Content

72%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, token-efficient design-instruction skill with concrete do/don't lists and named example aesthetics. The main gap is workflow clarity: it offers a design philosophy rather than a sequenced, checkable process for arriving at and validating a chosen aesthetic direction.

Suggestions

Add a short sequenced workflow with checkpoints, e.g. 1) Identify purpose & audience → 2) Pick one aesthetic direction from the list → 3) Choose a font + palette that fits → 4) Review against the Critical Rules before coding.

Consolidate the repeated 'make creative, bold choices / vary aesthetics / no design should be the same' guidance into a single statement to tighten conciseness.

Add a self-check step (e.g. 'Does the result avoid every font/color in the banned list and commit to one named direction?') to give the workflow a validation checkpoint.

DimensionReasoningScore

Conciseness

Lean and assumes Claude's competence (no explanation of what HTML/CSS or a dashboard is); the 'make creative, bold choices' idea is restated a few times across Critical Rules, Implementation Guidelines, and DO lists and could be trimmed.

4 / 5

Actionability

Concrete, actionable specifics for an instruction-only skill — banned fonts (Inter, Roboto, Space Grotesk), named aesthetic archetypes, and example combos (JetBrains Mono + grayscale + single accent) — with only minor gaps like 'optimize performance' staying vague.

4 / 5

Workflow Clarity

A rough sequence exists ('Before coding, understand the context...commit to a BOLD aesthetic direction' then rules then implementation) but there are no explicit checkpoints or feedback loops; it reads as philosophy rather than a sequenced process.

3 / 5

Progressive Disclosure

Self-contained guidance organized into clear, well-labeled sections (When to Use, Design Philosophy, Critical Rules, Implementation Guidelines, Examples) with no need for external reference files, matching the simple-skill exception.

5 / 5

Total

16

/

20

Passed

Description

78%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 capability and trigger conditions in third person with good natural-language coverage. Its only weak spot is specificity, where most of the 'what' is expressed via adjectives ('distinctive', 'production-grade') rather than enumerated concrete actions.

DimensionReasoningScore

Specificity

Names the frontend domain with two concrete actions ('Create...frontend interfaces', 'Generates creative, polished code and UI design') but the rest are adjectives rather than additional actions, so coverage is not comprehensive.

3 / 5

Completeness

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

5 / 5

Trigger Term Quality

Strong natural-term coverage with synonyms ('web components, pages, artifacts, posters... websites, landing pages, dashboards, React components, HTML/CSS layouts... styling/beautifying'), though a few common framings (e.g. Vue/Svelte/Tailwind, 'redesign') are absent.

4 / 5

Distinctiveness Conflict Risk

The design-quality/aesthetic-avoidance niche is mostly distinct from a generic web-dev skill, with only minor overlap risk for plain component-build requests.

4 / 5

Total

16

/

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
majiayu000/claude-skill-registry-data
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.