CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Build web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Covers composition, typography, color, motion, and copy. Verifies results via screenshots before declaring done.

71

1.10x
Quality

79%

Does it follow best practices?

Impact

96%

1.10x

Average score across 1 eval scenario

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

75%Weight 40%Scale 1-5

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

The body is a well-structured, opinionated guide with a clear four-stage workflow, concrete defaults, explicit checkpoints, and good respect for token budget. It sits just below excellent on all four dimensions due to minor rhetorical padding, inherently subjective aesthetic guidance, no explicit re-verify loop after fixes, and a single-file length that could benefit from split-out references.

Suggestions

Trim rhetorical flourishes (e.g., "Ask: what makes this unforgettable?", "Elegance comes from executing the vision well") to tighten the conciseness dimension.

In Visual Verification, add an explicit re-screenshot step after fixing a glaring issue so the fix itself is verified rather than assumed.

Consider moving the Context Modules (A/B/C) detail and the aesthetic tone catalog into references/ files so SKILL.md stays a lean overview with clearly signaled one-level-deep pointers.

DimensionReasoningScore

Conciseness

Lean, opinionated prose with no explanations of concepts Claude already knows; every section carries guidance. Minor rhetorical flourishes ("Ask: what makes this unforgettable?", "Elegance comes from executing the vision well, not from intensity") could be trimmed, keeping it below the every-token-earns-its-place anchor.

4 / 5

Actionability

Concrete and executable throughout: "Two typefaces maximum", "One H1 headline. One primary CTA above the fold", WCAG AA contrast, detection signals like `--color-*` and `tailwind.config.*`, copy examples (Good: "Plan status" / Bad: "Unlock Your Potential"), and a named tool cascade. Some guidance ("commit to a bold aesthetic direction") is inherently subjective without operationalizable specifics.

4 / 5

Workflow Clarity

Clear layered sequence (Detect context -> Plan -> Build -> Verify visually) with checkpoints (litmus checks, visual verification) and an escalation path for ambiguity (ask the user). Falls short of 5 because the verification pass says "fix any glaring issues, and move on" without an explicit re-verify step after a fix; no destructive/batch cap applies.

4 / 5

Progressive Disclosure

Well-sectioned single-file skill with one-level-deep, clearly signaled external pointers (agent-browser skill, design-iterator agent). At ~250 lines, the Context Modules and tone catalogs are candidates for split-out reference files, which keeps it short of the clear-overview anchor.

4 / 5

Total

16

/

20

Passed

Description

83%Weight 40%Scale 1-5

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 that explicitly covers both what the skill does and when to use it, with natural trigger terms and a distinctive design-quality positioning. Its main weakness is the deliberately broad "any frontend work" scope, which creates minor overlap risk and leaves a few common user phrasings (UI, website, redesign) uncovered.

DimensionReasoningScore

Specificity

Names concrete actions ("Detects existing design systems", "Verifies results via screenshots") and enumerates work types (landing pages, web apps, dashboards, admin panels, components), but the opening claim "Build web interfaces with genuine design quality" is partly abstract, keeping it short of comprehensive coverage.

4 / 5

Completeness

Explicitly answers both "what" (build web interfaces covering "composition, typography, color, motion, and copy", verified via screenshots) and "when" ("Use for any frontend work - landing pages, web apps, dashboards...") with concrete trigger phrases, in third-person voice.

5 / 5

Trigger Term Quality

Good coverage of natural phrases users would say ("frontend work", "landing pages", "dashboards", "components", "greenfield builds", "modifications to existing applications"), but common variants like "UI", "website", "redesign", and "frontend design" are missing.

4 / 5

Distinctiveness Conflict Risk

The design-quality niche ("not AI slop", design-system detection) is clearly distinct, but "any frontend work" and "dashboards" overlap with closely related frontend skills such as charting/dataviz skills, so it is mostly distinct rather than minimal-conflict.

4 / 5

Total

17

/

20

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
udecode/plate
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.