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

89%

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 concise, well-structured instruction skill with concrete actionable guidance and a clear validated workflow, undermined only by referenced bundle files that do not exist and by the absence of an explicit error-recovery feedback loop.

Suggestions

Add the missing bundle files COMPONENTS.md and REFERENCE.md (or remove the dead links) so the signaled references actually resolve.

Add an explicit feedback loop after the verification step, e.g. 'If contrast or overflow checks fail, adjust the relevant tokens/animations and re-verify before marking done.'

Include one complete runnable CSS example (a small :root token block plus one keyframe animation) to lift actionability from concrete directives to copy-paste-ready code.

Dimension	Reasoning	Score
Conciseness	Lean and efficient — no explaining of concepts Claude already knows (what CSS is, what contrast means); every line is actionable instruction that earns its place.	5 / 5
Actionability	Concrete directives with inline syntax examples ('@media (prefers-reduced-motion: no-preference)', "'Fraunces', 'Georgia', serif", ':root custom property') and specific thresholds (4.5:1, 3:1), but no complete runnable code block — a minor gap versus the anchor-5 fully-copy-paste-ready bar.	4 / 5
Workflow Clarity	A clear 4-step numbered sequence with an explicit validation checkpoint in step 4 ('Verify before marking done: contrast >=4.5:1... no overflow at mobile sizes'), but it lacks an explicit validate->fix->retry feedback loop, stopping just short of anchor 5.	4 / 5
Progressive Disclosure	The overview is lean and references are clearly signaled one-level-deep with labeled descriptions, but the referenced files COMPONENTS.md and REFERENCE.md do not exist in the bundle (no references/, scripts/, or assets/ dirs), so the navigation links are broken — scoring against the actual bundle structure per the rubric guideline lands at anchor 3.	3 / 5
	Total	16 / 20 Passed

Description

100%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: third-person voice, concrete actions, natural trigger phrases, explicit what+when guidance, and a clear disambiguation clause that separates it from generic UI skills.

Dimension	Reasoning	Score
Specificity	Lists four concrete actions — 'Defines named visual aesthetic, selects typography pairings, builds CSS token systems, adds entrance animations' — giving comprehensive coverage of the skill's capabilities, matching the anchor-5 example's breadth.	5 / 5
Completeness	Explicitly answers both what (the four actions) and when ('Use when user asks to design landing page... specifically when visual polish, brand identity matter') with concrete trigger phrases, mirroring the anchor-5 good example.	5 / 5
Trigger Term Quality	Includes multiple natural phrases a user would actually say — 'design landing page', 'style marketing site', 'create distinctive UI theme', 'pick fonts', 'add CSS animations' — with synonym coverage across the design domain.	5 / 5
Distinctiveness Conflict Risk	The disambiguation clause 'specifically when visual polish, brand identity matter rather than generic component scaffolding' carves a clear niche distinct from generic component skills, minimizing conflict risk.	5 / 5
	Total	20 / 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: f297837

Reviewed: 7 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.