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.

56

Quality

62%

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 ./.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 skill body is well-structured with a clear design-thinking workflow and excellent progressive disclosure via the anime.js reference. It is weakened by motivational padding, abstract aesthetic direction without in-body executable examples, and a light implementation workflow lacking checkpoints.

Suggestions

Trim motivational filler ('Remember: Claude is capable of extraordinary creative work...') and consolidate redundant aesthetic directives to tighten token efficiency.

Add one or two small concrete code snippets (e.g., a CSS-variable theme block or an animation-delay stagger example) so the body is actionable rather than purely directional.

Turn the implementation phase into a short sequenced checklist with a self-review checkpoint (e.g., 'verify cohesion against the chosen aesthetic before finalizing') to strengthen workflow clarity.

DimensionReasoningScore

Conciseness

The body is mostly efficient and contains skill-specific directives ('avoid generic fonts like Arial and Inter', 'NEVER converge on common choices (Space Grotesk)'), but it carries motivational padding ('Remember: Claude is capable of extraordinary creative work. Don't hold back...') and some restated guidance that could be tightened, so it is not fully lean.

2 / 3

Actionability

Concrete directives are present ('Use CSS variables for consistency', 'Use `anime.js` for animations: `./references/animejs.md`', named techniques like gradient meshes and noise textures), but much of the body is abstract aesthetic direction ('asymmetry', 'overlap', 'diagonal flow') with no executable code in-body, so guidance is actionable but incomplete and largely directional.

2 / 3

Workflow Clarity

A think-then-build sequence exists ('Design Thinking' with Purpose/Tone/Constraints/Differentiation, then 'implement working code'), but the implementation phase is a bulleted list of desired qualities rather than a sequenced process, and there are no checkpoints; this matches 'sequence present but checkpoints missing or implicit'.

2 / 3

Progressive Disclosure

The body is organized into clear sections and delegates the only deep detail (anime.js usage) to a real, well-signaled one-level-deep reference ('./references/animejs.md', verified to exist), matching the clear-overview-with-well-signaled-references anchor.

3 / 3

Total

9

/

12

Passed

Description

67%

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 cleanly answers both what the skill does and when to use it, with a clear design-quality niche. Its main weaknesses are limited natural trigger-term coverage and broad triggers that could overlap with generic frontend skills.

Suggestions

Expand the trigger clause with natural user phrasings like 'frontend', 'UI', 'design a page', 'website', or 'landing page' to improve trigger-term coverage.

Sharpen the trigger so it fires for design-quality work rather than any component-building request, reducing overlap with generic web-dev skills.

Add one or two more specific concrete actions (e.g., 'style and theme components', 'prototype visual interactions') to lift specificity toward the top anchor.

DimensionReasoningScore

Specificity

It names the domain and several actions ('Create distinctive, production-grade frontend interfaces', 'build web components, pages, or applications', 'Generates creative, polished code'), but these are high-level rather than a comprehensive list of distinct concrete actions, so it sits at the 'domain and some actions' anchor rather than the multi-action top anchor.

2 / 3

Completeness

It explicitly states both what it does ('Create distinctive, production-grade frontend interfaces... Generates creative, polished code that avoids generic AI aesthetics') and when to use it ('Use this skill when the user asks to build web components, pages, or applications'), matching the clear what-and-when anchor.

3 / 3

Trigger Term Quality

The trigger 'when the user asks to build web components, pages, or applications' captures some natural phrasings, but common variations a user would actually say ('frontend', 'UI', 'design a page', 'website', 'landing page') are missing, placing it at 'some relevant keywords but missing common variations'.

2 / 3

Distinctiveness Conflict Risk

The distinctive-aesthetic framing ('avoids generic AI aesthetics', 'high design quality') carves a niche, but the trigger 'build web components, pages, or applications' is broad and would overlap with ordinary web-development skills, so it lands at 'somewhat specific but could still overlap'.

2 / 3

Total

9

/

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
mrgoonie/claudekit-skills
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.