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.

70

Quality

86%

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

SKILL.md
Quality
Evals
Security

Quality

Content

72%

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, well-organized design guidance that earns its place, but is weighed down by pep-talk filler and a soft workflow without checkpoints. Trimming motivational redundancy and tightening the think-then-build sequence would lift the weaker dimensions.

Suggestions

Remove motivational filler ('Remember: Claude is capable of extraordinary creative work. Don't hold back...', 'There are so many flavors to choose from') to tighten conciseness.

Make the workflow explicit and sequenced — e.g., numbered steps for the Design Thinking checklist followed by implementation criteria — instead of two prose phases, adding a lightweight self-check (does the result match the chosen tone?) as a validation checkpoint.

De-duplicate guidance between the 'Design Thinking' tone list and the 'Frontend Aesthetics Guidelines', since several aesthetic-direction advice points overlap.

DimensionReasoningScore

Conciseness

The body is mostly efficient and assumes Claude's competence (no basics explained), but is padded with motivational fluff such as 'Remember: Claude is capable of extraordinary creative work. Don't hold back' and 'There are so many flavors to choose from' that earn no informational value.

2 / 3

Actionability

As an instruction-only skill it gives concrete, specific techniques — named fonts to avoid (Arial, Inter, Space Grotesk), CSS variables, animation-delay staggered reveals, Motion library for React, gradient meshes/noise textures/grain overlays — which are directly actionable despite the absence of code.

3 / 3

Workflow Clarity

A rough two-phase sequence exists ('Before coding, understand the context...' then 'Then implement working code'), but the Design Thinking checklist and implementation criteria are loosely coupled with no explicit validation or feedback checkpoints.

2 / 3

Progressive Disclosure

The skill is under 50 lines with no external bundle files and no need for them, and is organized into clear sections (Design Thinking, Frontend Aesthetics Guidelines), satisfying the simple-skill allowance for a top score.

3 / 3

Total

10

/

12

Passed

Description

100%

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 well-formed: it uses third-person voice, states concrete capabilities, and includes an explicit 'Use when...' trigger tied to natural user phrasing. It clearly carves out a distinct design-quality niche.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'build web components, pages, or applications' and 'Generates creative, polished code' — matching the anchor for listing several specific concrete actions.

3 / 3

Completeness

Explicitly answers both 'what' (create distinctive production-grade frontend interfaces, generate polished code) and 'when' via the explicit 'Use this skill when the user asks to build...' trigger clause.

3 / 3

Trigger Term Quality

Natural user-facing terms like 'build web components, pages, or applications' are exactly what a user would say when requesting this skill, giving good coverage.

3 / 3

Distinctiveness Conflict Risk

The niche is clear — high-design-quality frontend interfaces that 'avoid generic AI aesthetics' — with distinct triggers unlikely to overlap with other skills.

3 / 3

Total

12

/

12

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.