CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

69

Quality

85%

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

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-sequenced body with concrete thresholds and an explicit verification step, undermined by dangling bundle references: COMPONENTS.md, REFERENCE.md, and the "Foundation Phase" material are not present, so the skill's progressive-disclosure structure does not resolve.

Suggestions

Ship COMPONENTS.md and REFERENCE.md in the skill bundle (or remove the links) so the referenced card patterns, hero animations, typography catalogue, and design principles actually resolve.

Add one small copy-paste CSS snippet showing a named aesthetic comment plus 2-3 :root tokens to make the token workflow fully executable.

Replace or inline the opaque "project-consistency" skill handoff with the essential Foundation Phase guidance, since the referenced skill and its "Foundation Phase pattern" are undefined from this skill's context.

DimensionReasoningScore

Conciseness

The ~24-line body is lean and assumes Claude's competence — every line instructs (token strategy, animation constraints, verification thresholds) with no concept re-explanation; only the OpenCastle management comment is overhead, and it is tooling boilerplate rather than padded explanation.

5 / 5

Actionability

Guidance is highly concrete — exact mechanisms like `:root` custom properties, `@media (prefers-reduced-motion: no-preference)`, sub-500ms limits, a contrast ratio, and one code-style example ('Fraunces', 'Georgia', serif) — but there is no complete copy-paste CSS example, keeping it just below fully executable.

4 / 5

Workflow Clarity

The 4-step Design Workflow is clearly sequenced and ends with an explicit numeric validation step ("contrast ≥4.5:1 body text and ≥3:1 large text, no overflow at mobile sizes"), but there is no error-recovery or fix-and-retry loop, so it sits between the 4 and 5 anchors.

4 / 5

Progressive Disclosure

References are clearly labeled and one level deep ("Card patterns, hero animations, extended token sets: [COMPONENTS.md]"), but neither COMPONENTS.md nor REFERENCE.md exists in the bundle — the referenced paths don't resolve, breaking the disclosure structure; the "project-consistency" skill handoff also points to an undefined external pattern.

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

A strong description: concrete capability list, explicit and well-phrased trigger guidance, and a boundary clause that separates it from adjacent front-end skills. Only minor keyword variants are missing.

DimensionReasoningScore

Specificity

The description lists four concrete, distinct capabilities — "Defines named visual aesthetic, selects typography pairings, builds CSS token systems, adds entrance animations" — giving comprehensive coverage of the skill's scope with no vague filler.

5 / 5

Completeness

It 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"), plus a boundary clause "rather than generic component scaffolding".

5 / 5

Trigger Term Quality

Triggers like "design landing page, style marketing site, create distinctive UI theme, pick fonts, or add CSS animations" are natural user phrasing, but a few common variants (e.g., "brand colors", "restyle homepage", "polish the design") are absent.

4 / 5

Distinctiveness Conflict Risk

A clear niche (high-design-quality visual polish) with explicit disambiguation against "generic component scaffolding" minimizes conflict risk with general front-end/component skills.

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 2 missing

Warning

Total

15

/

16

Passed

Repository
monkilabs/opencastle
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.