CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-design

Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.

65

Quality

82%

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

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.

A well-structured, token-efficient instruction skill with a clear sequenced workflow, a concrete craft checklist, and specific anti-AI-slop guidance. Main gaps are the absence of a fix-and-recheck feedback loop after self-review, a dangling LICENSE.txt reference, and advisory-only typography guidance without examples.

Suggestions

Add an explicit feedback loop after step 6's self-review: if any checklist item fails, fix it and re-verify before delivery (and name how to check items like 'text fits its containers').

Resolve the dangling 'LICENSE.txt' reference — either include the file in the bundle or state the license terms inline instead of pointing to a missing file.

Make the typography guidance concrete with one or two example type pairings per aesthetic direction, so 'choose expressive but readable type pairings' becomes directly executable.

DimensionReasoningScore

Conciseness

The body is lean, assumes Claude's competence, and contains no basic-concept padding, but has minor trimmable redundancy: the upstream URL appears in both frontmatter and a 'Source' section, and the License section repeats frontmatter license information. Efficient (4) rather than every-token-earns-its-place (5).

4 / 5

Actionability

Concrete, executable guidance for an instruction-only skill — 'Use CSS variables for repeated colors, spacing, shadows, and type scale', 'Prefer transforms and opacity for performance', a list of named aesthetic directions, and a specific anti-pattern list ('purple-blue gradients, vague glass cards…'). Short of 5 because some guidance stays advisory ('choose expressive but readable type pairings') without worked examples.

4 / 5

Workflow Clarity

A clear 6-step sequence with an explicit self-review checklist in step 6 ('The interface works at mobile and desktop widths… Text fits its containers…'). Not 5: there is no feedback loop — no instruction to fix and re-verify when a checklist item fails, and checks like 'text fits its containers' lack a verification method.

4 / 5

Progressive Disclosure

Well-organized single-file skill (~60 lines) with clear sections, but the body references 'LICENSE.txt' which is not present in this bundle, and OpenDesign craft references ('typography', 'color', 'anti-ai-slop') are named without paths. Good structure with minor organization gaps, matching the 4 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 clearly states what the skill does and when to use it, with concrete trigger terms and a distinctive frontend-craft niche. It loses a little on action variety and on missing common trigger synonyms such as 'web design' or 'redesign'.

DimensionReasoningScore

Specificity

Names the domain and concrete deliverables ('production-grade frontend interfaces', 'working HTML/CSS/JS or framework code', 'websites, landing pages, dashboards, React components') with only minor gaps in action coverage — essentially one build action described via its craft attributes, short of the comprehensive multi-action coverage of the 5 anchor.

4 / 5

Completeness

Explicitly answers both questions: 'Create distinctive, production-grade frontend interfaces…' (what) and 'Use for websites, landing pages, dashboards, React components, application screens, and UI beautification' (when, with concrete trigger phrases).

5 / 5

Trigger Term Quality

'Use for websites, landing pages, dashboards, React components, application screens, and UI beautification' provides good natural keyword coverage, but a few common phrasings ('web design', 'redesign', 'make it prettier') are missing. Better than 3 because coverage is clearly good rather than partial; short of 5's comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

A distinct frontend-craft niche with mostly distinct triggers, but 'dashboards' and 'UI beautification' carry minor overlap risk with closely related data-viz and brand-design skills, matching the 4 anchor rather than the minimal-conflict 5 anchor.

4 / 5

Total

17

/

20

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.

Validation — 15 / 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

nexu-io/open-design

Path

skills/frontend-design/SKILL.md

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.