# design-with-taste

A skill that gives the agent a design philosophy: gradual revelation, fluid transitions and selective emphasis. Useful when generated UI keeps looking generic.

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

## What it does

The skill encodes three principles the agent applies to any interface: simplicity through gradual revelation, fluidity of transitions, and delight through selective emphasis. Order matters — no delight without fluidity, no fluidity without simplicity. The rules are concrete rather than aspirational: one primary action per view, layered trays instead of long forms, visibly different heights for stacked layers, and a title plus dismiss action on every sheet.

Animation gets its own set of rules. Nothing appears or disappears instantly, shared elements travel between states instead of remounting, and content enters from the direction the user navigated. Entrances and morphs use `cubic-bezier(0.16, 1, 0.3, 1)`, exits use `ease-in`. For changing button labels the skill points to `torph` (`npm i torph`), with crossfade as the fallback.

This one is meant to sit alongside `frontend-design`, `web-animation-design` and similar skills rather than replace them. Install it before the agent writes its first component — the rules apply to every UI generation, so retrofitting them later means redoing the work.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install cristicretu/family-taste-skill design-with-taste
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add cristicretu/family-taste-skill --skill design-with-taste -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/cristicretu/family-taste-skill --path skills/design-with-taste
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add cristicretu/family-taste-skill --skill design-with-taste -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/cristicretu/family-taste-skill/tree/HEAD/skills/design-with-taste/SKILL.md

## When to use it
- build a screen where the next action is obvious at a glance
- turn a long form into a step-by-step flow
- make navigation between views move instead of cutting
- keep users oriented when a panel opens over the current context
- animate a button label change instead of swapping the text

## Example prompts
- Build the checkout page following design-with-taste
- Rework this dashboard: one primary action per view, trays instead of full pages
- Add tab transitions per the skill, with a shared easing curve

## Similar
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/nexu-io-design-taste-frontend.md) — skill · 808 installs
- [frontend-design](https://affpapa.org/en/nevibecode/skills/cline-frontend-design.md) — skill · 7300 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
- [awesome-design-md](https://affpapa.org/en/nevibecode/skills/awesome-design-md.md) — skill · 666 installs
- [avoid-ai-design](https://affpapa.org/en/nevibecode/skills/avoid-ai-design.md) — skill · 641 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