# ui-design

A build guide and quality gate for visual interfaces, covering track selection, accessibility, responsive behavior, themes, motion, and preview delivery.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1800 installs · ★ 29
- Author: Starchild-ai-agent
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Starchild-ai-agent/official-skills/tree/HEAD/ui-design/SKILL.md
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/skills/starchild-ai-agent-ui-design

## What it does

\`ui-design` is the main workflow for user-facing HTML/CSS/JS, including landing pages, dashboards, web apps, portfolios, and internal tools. It starts by choosing Track A, based on vanilla HTML/CSS/JS, or Track B, using React/Vite/Next with a component library. The process also checks accessibility, responsive behavior, theming, performance, and preview delivery.

Style direction comes from `taste-skill`, which is called for Brief Inference, Design Dials, and the final Anti-slop check. A project that produces visual HTML/CSS/JS must use this skill with `project-builder`. Interactive pages also need tactile feedback and feedback for state changes; otherwise their interaction states are treated as incomplete. Engineering references live under `references/`, while the style rules are read from `https://github.com/Leonxlnx/taste-skill`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Starchild-ai-agent/official-skills ui-design
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Starchild-ai-agent/official-skills --path ui-design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-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/Starchild-ai-agent/official-skills/tree/HEAD/ui-design/SKILL.md

## When to use it
- choose a build track for a visual page
- plan motion before implementing interactions
- check an interface for accessibility and responsive behavior
- prepare a dashboard for preview delivery
- separate style decisions from engineering constraints

## Example prompts
- Use the `ui-design` skill to choose a track for a landing page built with HTML/CSS/JS.
- Design an interactive dashboard with a motion plan, then review accessibility and responsive behavior.
- Build this visual project with `project-builder` and use `taste-skill` for the style decisions.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [ui-design · mblode](https://affpapa.org/en/nevibecode/skills/mblode-ui-design.md) — 1400 installs
- [ui-design · frappe](https://affpapa.org/en/nevibecode/skills/frappe-ui-design.md) — 832 installs
- [ui-design · tencentcloudbase](https://affpapa.org/en/nevibecode/skills/ui-design.md) — 1800 installs
- [ui-design · pymodel](https://affpapa.org/en/nevibecode/skills/pymodel-ui-design.md) — 513 installs
- [ui-design · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-ui-design.md) — 981 installs

From the same set: [starchild-ai-agent/official-skills](https://affpapa.org/en/nevibecode/by/starchild-ai-agent/official-skills.md) — 30 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