# frontend-design

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1700 installs · ★ 4
- Author: mager
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/mager/frontend-design/tree/HEAD/SKILL.md
- Updated: 2026-04-25
- HTML: https://affpapa.org/en/nevibecode/skills/mager-frontend-design

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mager/frontend-design --skill frontend-design -a claude-code
```
```bash
npx skills add mager/frontend-design --skill mager-frontend-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/mager-frontend-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/mager-frontend-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mager/frontend-design --skill mager-frontend-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/mager-frontend-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mager/frontend-design --skill mager-frontend-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/mager-frontend-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mager/frontend-design mager-frontend-design
```

2. **Manually: put the files in place**
- File: `.github/skills/mager-frontend-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mager/frontend-design --skill mager-frontend-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mager/frontend-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/mager-frontend-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mager/frontend-design --skill mager-frontend-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/mager/frontend-design/tree/HEAD/SKILL.md

## When to use it
- 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
- 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

## Similar
- [designing-frontend-interfaces](https://affpapa.org/en/nevibecode/skills/designing-frontend-interfaces.md) — skill · 642 installs
- [ui-design](https://affpapa.org/en/nevibecode/skills/frappe-ui-design.md) — skill · 832 installs
- [frontend-design-deslop](https://affpapa.org/en/nevibecode/skills/frontend-design-deslop.md) — skill · 4800 installs
- [design-systems-frontend-architecture](https://affpapa.org/en/nevibecode/skills/design-systems-frontend-architecture.md) — skill · 635 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/nexu-io-design-taste-frontend.md) — skill · 808 installs
- [bolder](https://affpapa.org/en/nevibecode/skills/bolder.md) — skill · 535 installs

## Other versions with the same name
- [frontend-design · anthropics](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — 1025790 installs
- [frontend-design · bytedance](https://affpapa.org/en/nevibecode/skills/bytedance-frontend-design.md) — 3700 installs
- [frontend-design · nexu-io](https://affpapa.org/en/nevibecode/skills/nexu-io-frontend-design.md) — 4800 installs
- [frontend-design · sickn33](https://affpapa.org/en/nevibecode/skills/sickn33-frontend-design.md) — 2600 installs
- [frontend-design · julianoczkowski](https://affpapa.org/en/nevibecode/skills/julianoczkowski-frontend-design.md) — 5500 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md