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.

63

Quality

73%

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 ./clawd/skills/frontend-design/SKILL.md

The canonical home for this skill is frontend-design in anthropics/skills

SKILL.md
Quality
Evals
Security

Quality

Content

72%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 tight, well-structured, actionable design guide that assumes Claude's competence and needs no bundle files, but its workflow is a loose think-then-build sequence without verification checkpoints and offers no concrete code scaffold.

Suggestions

Remove the closing motivational paragraph ("Remember: Claude is capable of extraordinary creative work...") and the filler line "There are so many flavors to choose from" to tighten conciseness.

Add a brief post-implementation review step (e.g., "Re-check the result against your chosen tone and the one memorable detail") to give the workflow a verification checkpoint.

Include one minimal executable snippet (e.g., a CSS-variables theme skeleton or a staggered-reveal animation-delay block) to lift actionability from guidance to copy-paste ready.

DimensionReasoningScore

Conciseness

It assumes Claude's competence (no explaining of CSS, fonts, or libraries) and delivers dense, opinionated design guidance, but a few lines are motivational filler ("Remember: Claude is capable of extraordinary creative work. Don't hold back...") that could be trimmed.

4 / 5

Actionability

It gives concrete, named techniques (gradient meshes, noise textures, grain overlays, custom cursors, Motion library for React, fonts to avoid like Inter/Arial, CSS variables for dominant-plus-accent color) — actionable for an instruction-only skill, with the minor gap of no starter code or template scaffold.

4 / 5

Workflow Clarity

A rough two-phase sequence exists ("Before coding, understand the context and commit to a BOLD aesthetic direction" → "Then implement working code"), but there are no validation checkpoints or review loops, and the implementation phase is a criteria list rather than sequenced steps.

3 / 5

Progressive Disclosure

The body is under 50 lines, needs no external references, and is well-organized into clearly headed sections (Design Thinking, Frontend Aesthetics Guidelines) with structured bullets — meeting the simple-skill exception for a top score.

5 / 5

Total

16

/

20

Passed

Description

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

The description clearly states both capability and an explicit trigger clause, but its verbs are generic and laden with design buzzwords, and its broad trigger terms create overlap risk with general frontend coding skills.

Suggestions

Tighten the capability statement with concrete deliverables (e.g., "Designs and builds UI components, landing pages, and web apps with a distinctive visual direction") and trim buzzwords like "production-grade" and "high design quality".

Add discriminating trigger terms (UI, dashboard, landing page, website, design/styling) and clarify it applies when design quality or visual distinction matters, to reduce overlap with plain coding skills.

Open with a third-person verb ("Creates distinctive frontend interfaces...") rather than the imperative "Create" to match the rubric's voice guidance.

DimensionReasoningScore

Specificity

It names the frontend domain and several action categories ("build web components, pages, or applications", "Generates creative, polished code") but the verbs are high-level and padded with buzzword fluff ("distinctive", "production-grade", "high design quality"), falling short of the concrete action list in the 4-anchor.

3 / 5

Completeness

It explicitly answers both what ("Create distinctive, production-grade frontend interfaces... Generates creative, polished code") and when ("Use this skill when the user asks to build web components, pages, or applications") with concrete trigger phrases.

5 / 5

Trigger Term Quality

The natural trigger phrase "the user asks to build web components, pages, or applications" plus "frontend interfaces" gives good keyword coverage, though common synonyms like UI, dashboard, website, or design are missing.

4 / 5

Distinctiveness Conflict Risk

The design-aesthetic framing ("avoids generic AI aesthetics") carves a niche, but the broad trigger "build web components, pages, or applications" would also fire for ordinary functional frontend tasks, creating real overlap with general coding skills.

3 / 5

Total

15

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
stukennedy/openclaw-starter-kit
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.