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

78%

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
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.

A well-organized, directive design guide that assumes Claude's competence, but it carries redundant motivational repetition and offers no executable code examples despite being a code-generation skill. The workflow lacks an explicit verification step.

Suggestions

Cut redundant anti-generic-aesthetic restatements and the motivational closers to tighten token usage toward a lean 3.

Add at least one executable HTML/CSS or React snippet demonstrating a distinctive technique (e.g., a CSS-variable palette with a gradient-mesh background) so guidance becomes copy-paste ready.

Add a final verification checkpoint — e.g., "Before finishing, confirm the output is non-generic: would a designer recognize it as intentionally designed?" — to close the workflow loop.

DimensionReasoningScore

Conciseness

Avoids explaining basic concepts Claude knows, but repeats the anti-generic-aesthetic directive (lines 8, 37, 39) and includes motivational padding ("There are so many flavors to choose from", "Remember: Claude is capable of extraordinary creative work. Don't hold back...") that could be trimmed; not every token earns its place.

2 / 3

Actionability

Gives concrete design directives (CSS variables, Motion library, animation-delay staggered reveals, gradient meshes, noise textures) but provides no executable code examples for a skill whose purpose is generating polished code — guidance is concrete yet incomplete and not copy-paste ready.

2 / 3

Workflow Clarity

A clear think-then-build sequence exists (Design Thinking checklist → commit to aesthetic → implement code), but there is no validation/verification checkpoint such as confirming the result is distinctive and non-generic, leaving checkpoints implicit.

2 / 3

Progressive Disclosure

The body is under 50 lines, self-contained with no external references needed, and organized into clear sections (Design Thinking, Frontend Aesthetics Guidelines), meeting the simple-skill threshold for a 3.

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.

A strong, third-person description that clearly states capabilities, includes a broad set of natural trigger terms, and provides an explicit "Use when..." clause. It is specific, complete, and unlikely to conflict with other skills.

DimensionReasoningScore

Specificity

Names multiple concrete actions — "Create distinctive, production-grade frontend interfaces", "build web components, pages, artifacts, posters, or applications", "Generates creative, polished code and UI design" — matching the multiple-specific-actions anchor.

3 / 3

Completeness

Explicitly answers both "what" (Create/Generates frontend interfaces and UI code) and "when" ("Use this skill when the user asks to build..."), satisfying the explicit-trigger requirement for a 3.

3 / 3

Trigger Term Quality

Covers natural terms users would say — "web components, pages, artifacts, posters, applications, websites, landing pages, dashboards, React components, HTML/CSS layouts, styling/beautifying any web UI" — broad real-language coverage, not technical jargon.

3 / 3

Distinctiveness Conflict Risk

The frontend-design niche with "high design quality" and "avoids generic AI aesthetics" framing gives distinct triggers unlikely to collide with other skills.

3 / 3

Total

12

/

12

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
Galaxy-Dawn/claude-scholar
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.