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.

64

Quality

75%

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 ./.agents/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-driven design skill with clear sections and no reference sprawl. It is held back by abstract, sometimes motivational guidance that lacks concrete executable examples and explicit validation checkpoints.

Suggestions

Replace motivational filler ('Don't hold back', 'There are so many flavors') with concrete guidance to improve conciseness.

Add at least one concrete, copy-paste example (e.g., a CSS-variable palette skeleton or an animation-delay stagger snippet) to raise actionability.

Add a lightweight validation checkpoint (e.g., 'Before finishing, verify the chosen aesthetic is consistent across typography, color, and motion') to strengthen workflow clarity.

DimensionReasoningScore

Conciseness

Mostly efficient guidance that avoids explaining basic concepts, but padded with motivational phrasing like 'Claude is capable of extraordinary creative work. Don't hold back' and 'There are so many flavors to choose from' that could be tightened.

2 / 3

Actionability

Names some concrete techniques (gradient meshes, noise textures, animation-delay, Motion library), but most guidance is abstract directives ('Choose fonts that are beautiful', 'Commit to a cohesive aesthetic') with no concrete executable examples or templates.

2 / 3

Workflow Clarity

A loose sequence exists (Design Thinking then implement), but the multi-phase process has no explicit validation checkpoints or feedback loops for verifying the aesthetic direction was achieved.

2 / 3

Progressive Disclosure

A single well-organized SKILL.md with clear sections (## Design Thinking, ## Frontend Aesthetics Guidelines) and no nested references; per the simple-skills note this is sufficient for a top score.

3 / 3

Total

9

/

12

Passed

Description

92%

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: concrete actions, explicit 'Use when' trigger, and good natural-term coverage. Its only weakness is the broad frontend scope, which raises some conflict risk against general coding skills.

Suggestions

Narrow the trigger scope or add a disambiguating phrase (e.g., 'when visual design quality or aesthetic polish is the primary goal') to reduce overlap with general code-generation skills.

Consider leading with the distinctive 'avoids generic AI aesthetics' framing earlier in the description to sharpen the niche.

DimensionReasoningScore

Specificity

Lists multiple concrete actions—'build web components, pages, artifacts, posters, or applications', 'styling/beautifying any web UI', 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') and when via a clear 'Use this skill when the user asks to build...' trigger clause.

3 / 3

Trigger Term Quality

Covers natural user terms across 'websites, landing pages, dashboards, React components, HTML/CSS layouts' and 'styling/beautifying any web UI', phrases a user would actually say when requesting this skill.

3 / 3

Distinctiveness Conflict Risk

The aesthetic/anti-slop framing gives it a distinct identity, but the scope ('any web UI', broad frontend building) overlaps with general code-generation skills, so it could still trigger for similar skills.

2 / 3

Total

11

/

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
quran/quran.com-frontend-next
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.