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.
68
83%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Design Workflow
- Name the aesthetic in 2–3 words in a comment at the top of the main CSS file; commit to it.
- Define every color, space, and radius as a
:rootcustom property; build components from those tokens only — no ad-hoc values. - Wrap entrance animations in
@media (prefers-reduced-motion: no-preference); keep key animations under 500ms. - Verify before marking done: contrast ≥4.5:1 body text and ≥3:1 large text, no overflow at mobile sizes.
Every design must have one unforgettable detail. No two designs should look alike.
Card patterns, hero animations, extended token sets: COMPONENTS.md. Design principles, typography catalogue, example constraints: REFERENCE.md.
Typography
Always ship a metric-preserving fallback chain (e.g. 'Fraunces', 'Georgia', serif).
Load project-consistency skill for the full Foundation Phase pattern and prompt templates.
- Repository
- monkilabs/opencastle
- Commit
fa0c341
- Last updated
- First committed
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.