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.

85

1.09x
Quality

78%

Does it follow best practices?

Impact

96%

1.09x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/frontend-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body communicates a clear creative vision and is well-organized, but leans on motivational verbosity and abstract direction over concrete, executable design guidance. Tightening rhetoric and adding a brief post-implementation review checkpoint would lift the weaker dimensions.

Suggestions

Trim rhetorical emphasis ("Don't hold back", "show what can truly be created", repeated IMPORTANT/NEVER blocks) to reduce token overhead without losing the anti-generic-AI-slop guidance.

Replace abstract directives ("Choose fonts that are beautiful, unique") with a short concrete starter palette or named example pairings per aesthetic direction so guidance is more actionable.

Add a brief validation/review step at the end (e.g., verify cohesion of typography/color/motion against the chosen aesthetic before delivering) to strengthen workflow clarity.

DimensionReasoningScore

Conciseness

Core design guidance (tone options, aesthetic techniques) adds value Claude lacks, but it is padded with motivational rhetoric ("What makes this UNFORGETTABLE?", "Don't hold back", "show what can truly be created") and repeated NEVER/IMPORTANT emphasis that could be tightened.

2 / 3

Actionability

Offers some concrete pointers (Motion library for React, CSS variables, animation-delay, gradient meshes, noise textures) but mostly abstract direction ("Choose fonts that are beautiful, unique", "Commit to a cohesive aesthetic") rather than executable, copy-ready guidance.

2 / 3

Workflow Clarity

A loose two-phase sequence exists (Design Thinking checklist, then implement), but there are no validation or review checkpoints to confirm the output meets the stated aesthetic goals before delivery.

2 / 3

Progressive Disclosure

A short (~50 line) single-purpose skill with no bundle files; content is organized into clearly labeled sections (Design Thinking, Frontend Aesthetics Guidelines) per the simple-skills allowance.

3 / 3

Total

9

/

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 specific, uses natural trigger terms, and clearly states both capability and activation conditions in third person. It is a strong, concise description with no over-claims.

DimensionReasoningScore

Specificity

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

3 / 3

Completeness

Explicitly answers both what ("Create distinctive, production-grade frontend interfaces") and when ("Use this skill when the user asks to build..."), with an explicit Use-when clause.

3 / 3

Trigger Term Quality

Natural trigger phrasing ("when the user asks to build web components, pages, or applications") covers terms users would actually say, with good variation across component/page/application.

3 / 3

Distinctiveness Conflict Risk

The "distinctive, production-grade frontend interfaces" / "avoids generic AI aesthetics" niche has distinct triggers and is unlikely to fire for unrelated 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
dtsola/xiaoyaosearch
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.