frontend-design · mager — Claude Code skill: UI with a point of view
A skill that gives the agent a specific design stance: type, palette, tactile states. Useful when building a UI from scratch or restyling an existing one.
npx skills add mager/frontend-design --skill frontend-design -a claude-code
npx skills add mager/frontend-design --skill mager-frontend-design -a claude-codeWhat frontend-design does
The skill lays out a philosophy for picking a project's visual language. First you settle the product mood: editorial warmth, bright modern product, or hard neon contrast. Then type hierarchy, then palette and spacing rhythm, and atmospheric layers like gradients and grain come last.
What's inside is principles, not components. There's a font list mapped to each job: literary serifs for editorial work, monospace for system-facing surfaces, geometric sans for product tools. Color schemes are grouped by mood too, and hover and press states come with transition timings between 150 and 300 ms. Containers are advised to land around 1100px-1280px, with clamp() for major type steps.
The skill adapts to whatever framework the project already uses, but on a fresh start it prefers Astro, SvelteKit or Next.js. Bootstrap and heavy UI libraries it advises against, since they fight an authored look. On an existing codebase it works inside the current framework and upgrades type first, then color, then spacing, keeping functionality intact.
What it helps with
- build a UI with real type hierarchy instead of default styles
- restyle an existing interface without breaking its behavior
- pick fonts and a palette that match the product's mood
- bring dead hover and press states back to life
- lay out a grid where content stays dense instead of floating in empty space
Example prompts for the agent
- Build a landing page for a craft magazine: editorial typography, warm paper palette, thin rules between sections
- Restyle this dashboard — it looks like default Bootstrap right now, I want a bright product feel with one accent color
- Add tactile hover states to the cards and a staggered reveal for the list
How to install frontend-design
1Skills CLI (Vercel)
npx skills add mager/frontend-design --skill frontend-design -a claude-codenpx skills add mager/frontend-design --skill mager-frontend-design -a claude-code2Manually: put the files in place
~/.claude/skills/mager-frontend-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mager-frontend-design/
1Skills CLI (Vercel)
npx skills add mager/frontend-design --skill mager-frontend-design -a codex2Manually: put the files in place
.agents/skills/mager-frontend-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add mager/frontend-design --skill mager-frontend-design -a cursor2Manually: put the files in place
.cursor/skills/mager-frontend-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install mager/frontend-design mager-frontend-design2Manually: put the files in place
.github/skills/mager-frontend-design/SKILL.md1Skills CLI (Vercel)
npx skills add mager/frontend-design --skill mager-frontend-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/mager/frontend-designManually: put the files in place
.devin/skills/mager-frontend-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add mager/frontend-design --skill mager-frontend-design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about frontend-design
How do I install frontend-design in Claude?
Run npx skills add mager/frontend-design --skill frontend-design -a claude-code. The skill lands at ~/.claude/skills/mager-frontend-design/SKILL.md.
What does the frontend-design skill do?
It gives the agent a design stance: how to choose a product mood, fonts, palette and interaction states. It works both when generating new UI and when restyling existing code.
Which frameworks does it work with?
The skill adapts to the framework the project already uses. On a fresh start it suggests Astro, SvelteKit or Next.js, and it advises against Bootstrap and heavy UI libraries.
Similar skills
Everything for Frontend and UI →frontend-design by other authors comes first.
