# frontend-design

Walks the agent through a decision order: task and hierarchy first, systems next, colour and decoration last. Useful when building or reworking interfaces.

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

## What it does

The skill sets a working order for frontend work. Start from the specific user task, not the shell around it. Then check hierarchy in grayscale — if it does not read without colour, colour will not fix it. Constrained scales for spacing, type, radius and elevation come next, and only after that does the agent add colour, depth, motion and finishing touches.

Context gathering is a separate gate. The skill wants the target audience, the use cases and the brand tone, and it states plainly that you cannot read those out of the codebase: code shows what was built, not who it is for. If no context exists in the loaded instructions, in `.better-web-ui.md`, or in the legacy `.better-ui.md` and `.impeccable.md`, the agent must run `$setup` before anything else. Worth knowing: on a fresh project with none of those files, work starts with setup rather than markup.

The library stays framework-agnostic on purpose. Precedence runs from the existing project stack, to explicit user choices, to a default matrix only for a new unspecified project. For Next.js it advises reading the bundled docs under `node_modules/next/dist/docs/` instead of trusting stale memory about the installed version. Reference material covers component anatomy, `shadcn/ui` accelerators, and focused patterns such as accordions, carousels and complex tables.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install aladicf/better-web-ui frontend-design
```

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

### Gemini CLI

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

2. **Platform CLI**
```bash
gemini skills install https://github.com/aladicf/better-web-ui --path skills/frontend-design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add aladicf/better-web-ui --skill 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/aladicf/better-web-ui/tree/HEAD/skills/frontend-design/SKILL.md

## When to use it
- build an interface that does not look like default model output
- get hierarchy right before adding colour
- lock spacing and type scales instead of one-off tweaking
- pick a component strategy that matches the existing stack
- rework an existing page or flow without a rewrite

## Example prompts
- Build the pricing page: grayscale hierarchy first, colour after
- Rework the signup form — it looks generic right now
- Run $setup and record the project context before you start

## Similar
- [avoid-ai-design](https://affpapa.org/en/nevibecode/skills/avoid-ai-design.md) — skill · 641 installs
- [designing-frontend-interfaces](https://affpapa.org/en/nevibecode/skills/designing-frontend-interfaces.md) — skill · 642 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/nexu-io-design-taste-frontend.md) — skill · 808 installs
- [design-brief](https://affpapa.org/en/nevibecode/skills/design-brief.md) — skill · 5300 installs
- [ui-design](https://affpapa.org/en/nevibecode/skills/frappe-ui-design.md) — skill · 832 installs
- [design-with-taste](https://affpapa.org/en/nevibecode/skills/design-with-taste.md) — skill · 758 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

From the same set: [aladicf/better-web-ui](https://affpapa.org/en/nevibecode/by/aladicf/better-web-ui.md) — 22 cards

---
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