CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

74

Quality

92%

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

85%

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

The content is a well-structured, actionable six-step workflow with a self-review checklist and clean section organization. Its only weakness is minor editorial verbosity that could be trimmed without losing clarity.

Suggestions

Tighten the editorial prose in the intro and step 2 (e.g., 'The goal is not just make it nicer') to leaner imperative phrasing that earns every token.

Consider moving the anti-AI-default enumeration into a compact checklist so the craft rules scan faster.

DimensionReasoningScore

Conciseness

The body is well-organized and largely free of basic-concept padding, but editorial prose like 'The goal is not just make it nicer' and lengthy anti-slop enumeration could be tightened. It sits at the score-2 'mostly efficient but could be tightened' rather than the score-3 'every token earns its place,' and well above the score-1 verbose anchor that explains concepts Claude already knows.

2 / 3

Actionability

Concrete, specific guidance such as 'Use CSS variables for repeated colors, spacing, shadows, and type scale' and 'Use semantic markup, keyboard-accessible controls, visible focus states.' As an instruction-only design skill with actionable guidance, absence of executable code is not penalized per the scoring notes, placing it at the score-3 concrete-instruction anchor rather than score-2 'incomplete/missing key details.'

3 / 3

Workflow Clarity

A clear six-step sequence culminating in a self-review checklist (step 6) that functions as validation checkpoints. There are no destructive or batch operations that would cap the score, matching the score-3 'clear sequence with explicit checkpoints' rather than the score-2 'sequence present but checkpoints missing or implicit.'

3 / 3

Progressive Disclosure

A single self-contained file with well-organized sections (Workflow, Open Design Integration, Source, License) and no bundle files present. Per the judging guidelines, a skill under 50 lines with no need for external references can score 3 with well-organized sections, so this is not capped at 2.

3 / 3

Total

11

/

12

Passed

Description

100%

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 is concise, specific, and clearly answers both what the skill does and when to use it, with natural trigger terms and a distinct niche. It is third-person and avoids fluff, hitting the top anchor on every dimension.

DimensionReasoningScore

Specificity

Lists multiple concrete actions: 'Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code.' This matches the score-3 anchor listing several specific concrete actions rather than the score-2 'names domain and some actions.'

3 / 3

Completeness

Explicitly answers both 'what does this do' (create production-grade frontend interfaces) and 'when should Claude use it' ('Use for websites, landing pages, dashboards, React components, application screens, and UI beautification'), matching the score-3 anchor rather than the score-2 'has what, but when is missing or only implied.'

3 / 3

Trigger Term Quality

'Use for websites, landing pages, dashboards, React components, application screens, and UI beautification' covers natural terms users would actually say, matching the score-3 anchor of good coverage rather than the score-2 'some relevant keywords but missing common variations.'

3 / 3

Distinctiveness Conflict Risk

'production-grade frontend interfaces' and 'React components' define a clear niche with distinct triggers unlikely to overlap with unrelated skills, matching the score-3 anchor rather than the score-2 'somewhat specific but could still overlap.'

3 / 3

Total

12

/

12

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.

Validation15 / 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
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.