frontend-design

Defines named visual aesthetic, selects typography pairings, builds CSS token systems, adds entrance animations for high-design-quality pages. Use when user asks to design landing page, style marketing site, create distinctive UI theme, pick fonts, or add CSS animations — specifically when visual polish, brand identity matter rather than generic component scaffolding.

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

78%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 lean, well-organized instruction skill with a concrete 4-step workflow and an explicit verification checkpoint. The main weakness is broken external references — COMPONENTS.md and REFERENCE.md are cited but absent from the bundle — which undermines progressive disclosure, and there are no complete copy-paste code blocks.

Suggestions

Ship the missing bundle files COMPONENTS.md and REFERENCE.md (or remove the links), so the one-level-deep references actually resolve.

Add at least one complete copy-paste-ready CSS snippet (e.g. a :root token block or an entrance-animation @keyframes) to lift actionability from concrete-but-fragmented to fully executable.

Add a brief feedback loop to the workflow ('If contrast or overflow checks fail, adjust tokens and re-verify') to turn the single validation checkpoint into a true validate-fix-retry cycle.

Dimension	Reasoning	Score
Conciseness	The ~15-line body is lean and directive — 'Define every color, space, and radius as a :root custom property', 'keep key animations under 500ms' — with no padding or explanation of concepts Claude already knows; every token earns its place, matching anchor 5.	5 / 5
Actionability	Concrete, specific guidance is present (exact contrast thresholds ≥4.5:1/≥3:1, a named media query, an example fallback chain 'Fraunces, Georgia, serif'), but there are no complete copy-paste code blocks, only inline snippets; fits anchor 4 ('concrete guidance with minor gaps') rather than 5 which requires copy-paste-ready blocks.	4 / 5
Workflow Clarity	A clear 4-step sequence ends with an explicit validation checkpoint ('Verify before marking done: contrast ≥4.5:1 body text and ≥3:1 large text, no overflow at mobile sizes'), but there is no feedback/retry loop ('if contrast fails, fix and re-verify'); this is a design skill so the destructive/batch feedback-loop cap does not apply, landing at anchor 4 rather than 5.	4 / 5
Progressive Disclosure	Section structure is clear and the two references are well-labeled and one-level deep ('Card patterns, hero animations, extended token sets: COMPONENTS.md; Design principles, typography catalogue: REFERENCE.md'), but the referenced files (COMPONENTS.md, REFERENCE.md) do not exist in the bundle, so navigation is broken; this drops it to anchor 3 ('references present but navigation fails / could be better organized') rather than 4.	3 / 5
	Total	16 / 20 Passed

Description

88%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, third-person description that concretely names four design actions and pairs them with five natural trigger phrases plus an explicit conflict-reducing discriminator. Minor gaps are limited to missing file-extension synonyms and some residual overlap with generic frontend skills.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'Defines named visual aesthetic', 'selects typography pairings', 'builds CSS token systems', 'adds entrance animations' — giving comprehensive coverage of the domain; not a 4 because coverage is broad rather than having minor gaps. Third-person voice ('Defines', 'selects') is used correctly, so no specificity penalty applies.	5 / 5
Completeness	Explicitly answers both 'what' (four named actions) and 'when' ('Use when user asks to design landing page, style marketing site, create distinctive UI theme, pick fonts, or add CSS animations') with concrete trigger phrases plus a discriminator clause; matches anchor 5, not 4 which requires weaker 'when' guidance.	5 / 5
Trigger Term Quality	Includes several natural phrases users would say — 'design landing page', 'style marketing site', 'create distinctive UI theme', 'pick fonts', 'add CSS animations' — but misses file extensions (.css) and common synonyms like 'stylesheet' or 'theming'; closer to anchor 4 ('good coverage, a few natural terms missing') than 5.	4 / 5
Distinctiveness Conflict Risk	The explicit discriminator 'specifically when visual polish, brand identity matter rather than generic component scaffolding' carves out a niche from generic component-scaffolding skills, but triggers like 'design landing page' and 'style marketing site' still overlap with general frontend/web-design skills, fitting anchor 4 ('minor overlap risk with closely related skills') rather than 5.	4 / 5
	Total	18 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
relative_links	Relative link issues: 2 missing	Warning

	Total	15 / 16 Passed

Repository: monkilabs/opencastle
Path: src/orchestrator/skills/frontend-design/SKILL.md
Commit: fa0c341

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.