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.

68

Quality

83%

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.

The body delivers a clear, actionable, well-structured design workflow with an explicit self-review checkpoint and lean, competent prose. It lacks executable code examples and a retry feedback loop, which cap actionability and workflow clarity just below the top anchor.

Suggestions

Add one minimal self-contained HTML/CSS example to lift actionability toward 5 without much token cost.

Turn the step-6 self-review into an explicit validate-fix-retry loop so workflow clarity can reach the top anchor.

Trim framing prose like 'The goal is not just make it nicer' to tighten conciseness.

DimensionReasoningScore

Conciseness

The body is efficient and assumes Claude's competence, avoiding explanations of basic frontend concepts, but framing lines like 'The goal is not just make it nicer' and the OpenDesign adaptation note add minor trimmable padding.

4 / 5

Actionability

Concrete, specific guidance throughout ('Use CSS variables for repeated colors, spacing, shadows, and type scale', 'Prefer transforms and opacity for performance') with mostly executable direction; no code samples, but acceptable for an instruction-only design skill.

4 / 5

Workflow Clarity

A clear six-step sequence runs from understanding the brief through self-review, with an explicit validation checklist in step 6, but there is no validate-fix-retry feedback loop, keeping it below 5.

4 / 5

Progressive Disclosure

Well-organized into clear sections (Workflow, OpenDesign Integration, Source, License) with no nested references and a single one-level LICENSE.txt pointer; good structure with only minor organization gaps given the all-inline content.

4 / 5

Total

16

/

20

Passed

Description

92%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 is specific, complete, and distinct, clearly stating both what the skill does and when to use it with natural trigger terms. Only minor keyword-synonym gaps keep trigger quality from a perfect score.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'Create distinctive, production-grade frontend interfaces', 'polished typography, considered layout', and 'working HTML/CSS/JS or framework code' — with comprehensive coverage, matching the score-5 anchor.

5 / 5

Completeness

Explicitly answers both what ('Create distinctive, production-grade frontend interfaces...') and when ('Use for websites, landing pages, dashboards...') with concrete trigger phrases, matching the score-5 anchor.

5 / 5

Trigger Term Quality

Natural terms like 'websites, landing pages, dashboards, React components, application screens, and UI beautification' give good coverage, but a few common synonyms (e.g. 'web app', 'frontend') are absent, so it sits at 4 rather than 5.

4 / 5

Distinctiveness Conflict Risk

The frontend-design niche has distinct, specific triggers and minimal overlap with other skills; the production-grade frontend framing carves a clear niche.

5 / 5

Total

19

/

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.

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.