CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-design

Visual direction for distinctive pages: a named aesthetic, type pairing, color and spacing tokens, and motion. Use when designing a landing page, marketing site or UI theme where the look itself matters, not when scaffolding components.

72

Quality

91%

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

92%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.

An exceptionally tight, actionable body: a sequenced workflow with numeric validation criteria, highly specific anti-generic tells, and concrete token/motion conventions. The one real defect is a dangling reference — the body defers design principles and reasoning to REFERENCE.md, which is missing from the bundle.

Suggestions

Add the missing REFERENCE.md (design principles and reasoning) to the bundle, or remove the link and inline the one or two principles that matter most.

Consider adding a compact example of the plan comment and a starter :root token block so the step-2 spec has a model to follow.

In the Typography section, replace 'Choose a pairing that fits the subject' with a short decision heuristic (e.g. subject tone -> display face category) to remove the only vague instruction.

DimensionReasoningScore

Conciseness

The ~30-line body is lean and assumes Claude's competence — no explanation of known concepts — and every line carries earned specifics ("rgba(0,0,0,.12)", "under 500ms", "Inter, Roboto, Arial or the system stack"), matching the 'every token earns its place' anchor.

5 / 5

Actionability

For an instruction-only skill the guidance is fully actionable: copy-paste-ready specifics like `:root` custom properties, `@media (prefers-reduced-motion: no-preference)`, a fallback chain example ('Fraunces', 'Georgia', serif), numeric acceptance criteria (contrast >=4.5:1 body, >=3:1 large), and a complete spec for the plan comment (2-3 word aesthetic, 4-6 named colors).

5 / 5

Workflow Clarity

The six numbered steps are clearly sequenced and include both an explicit validation step ("Verify before marking done: contrast >=4.5:1 body text and >=3:1 large text, no overflow at mobile sizes") and a pre-code critique-replace feedback loop (step 3), matching the top anchor; the multi-agent section adds its own sequencing rule ("start the pages only when it is done").

5 / 5

Progressive Disclosure

Sections are well-organized and the single reference is clearly signaled ("Design principles and the reasoning behind them: [REFERENCE.md](./REFERENCE.md)"), but the referenced file does not exist in the bundle — no REFERENCE.md, references/, scripts/, or assets/ are present — so navigation to the deferred material fails, which falls below the 'references mostly clear' level 4 anchor.

3 / 5

Total

18

/

20

Passed

Description

87%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: concrete deliverables, an explicit use-when clause with natural trigger phrases, and a rare explicit negative trigger that sharply reduces conflict risk. The only weakness is slightly thin synonym coverage for design-related requests.

DimensionReasoningScore

Specificity

Enumerates concrete deliverables ("a named aesthetic, type pairing, color and spacing tokens, and motion") but leaves layout only implied via "UI theme", a minor coverage gap that fits the 'several specific actions with minor gaps' anchor rather than comprehensive coverage.

4 / 5

Completeness

Explicitly answers both what ("Visual direction for distinctive pages: a named aesthetic, type pairing, color and spacing tokens, and motion") and when ("Use when designing a landing page, marketing site or UI theme"), and adds a concrete negative trigger ("not when scaffolding components") that makes the when-clause fully explicit.

5 / 5

Trigger Term Quality

Natural user phrases like "designing a landing page, marketing site or UI theme" and "the look itself matters" are present, but common synonyms such as "style guide", "brand", or "redesign" are missing, matching the 'good keyword coverage; a few natural terms missing' anchor.

4 / 5

Distinctiveness Conflict Risk

The skill carves a clear niche (visual design direction) and the explicit exclusion "not when scaffolding components" actively fences it off from generic frontend/component-builder skills, minimizing conflict risk.

5 / 5

Total

18

/

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

relative_links

Relative link issues: 1 missing

Warning

Total

15

/

16

Passed

Repository

monkilabs/opencastle

Path

src/orchestrator/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.