Frontend Design Agent Skill
Production-grade agent skill that eliminates generic AI aesthetics, enforcing typography hierarchy, responsive CSS tokens, and accessible UI polish.
Install files
What is this skill?
The Frontend Design Agent Skill equips AI coding agents in Claude Code, Cursor, Antigravity, and OpenClaw with production-grade UI design heuristics. It prevents low-effort defaults—like purple-on-dark glow gradients, untracked typography, and arbitrary card clutter—by enforcing strict token architecture, fluid responsiveness, and accessible component structure.
How do I install it?
Copy the canonical skill file into your agent runtime skill directory:
- Claude Code: Copy
SKILL.mdto.claude/skills/frontend-design/SKILL.md - Cursor: Copy
SKILL.mdto.cursor/rules/frontend-design.mdc - Antigravity CLI / IDE: Copy
SKILL.mdto.gemini/antigravity-cli/skills/frontend-design/SKILL.md - OpenClaw: Copy
SKILL.mdtoskills/frontend-design/SKILL.md - Direct Download: SKILL.md · AGENTS.md
What does it enforce?
| Category | Enforced Standard | Anti-Pattern Blocked |
|---|---|---|
| Typography | Curated type scales, tight tracking on headings (-0.02em), tuned line-height (1.4–1.6) | Untracked oversized display headers |
| Color & Theme | Semantic CSS custom properties, WCAG AA 4.5:1 contrast ratios | Neon violet / purple glow on pitch black |
| Layout & Structure | Semantic HTML5 elements, fluid CSS Grid/Flexbox containment | Arbitrary bento box clutter, 3+ nested cards |
| Interactivity | Tactile focus-visible rings, micro-transitions, styled scrollbars | Missing active states, unstyled scrollbars |
Download the SKILL.md specification for the canonical implementation rules.
How do I verify it?
Prompt your agent to scaffold a landing page hero or dashboard widget:
"Build a responsive stats card and pricing summary using vanilla CSS tokens."
Pass criteria: The agent defines CSS custom properties, applies negative tracking to headings, uses high-contrast neutral surfaces, and avoids neon purple accent glows.
FAQ
- Can I use this with Claude Code, Cursor, and OpenClaw?
Yes. Place the file in
.claude/skills/frontend-design/,.cursor/rules/frontend-design.mdc, or your OpenClawskills/directory.
- Does this replace AGENTS.md?
No. Skills are modular task capabilities invoked during UI construction, whereas AGENTS.md provides standing workspace governance.
- What if the agent ignores it?
The most common causes are an incorrect directory path, the skill not being loaded in the workspace, or a competing system prompt instruction.