# Smooth UI skill

Smooth UI is an Agent Skill that teaches your AI coding assistant how to make any web interface feel smooth, calm and premium. It holds everything we learned building FewTone UI: the motion rules, the exact timings, which pattern to use where, recipes for about 40 common controls, working React code, and the bugs that make an interface feel off.

It isn't about FewTone UI. It works in any project, with any components, and it tells your assistant to use your own tokens and libraries first. Its code examples use React, Tailwind CSS and `motion`, and each pattern explains what it does, so it carries to other stacks.

## What your assistant learns

- **One set of timings.** Five durations, three easings and three springs, used everywhere, so the whole app moves with one voice.
- **Which motion fits which change.** A pill that slides to the active tab, one highlight gliding through a menu, a panel that glides to its new height, a dialog that grows out of the button that opened it, a number that rolls, progress that rises without stopping.
- **The blur.** Content that appears or swaps sharpens in from a soft blur instead of only fading.
- **Restraint.** Motion only where it explains a change: no bounces, glows or scale on press. Exits quicker than entrances. Nothing animating on page load.
- **The details.** Widths that never jump, animations you can interrupt mid-way, hover only for the mouse, focus never lost, reduced motion always respected.
- **The pitfalls.** Indicators that float, springs that overshoot an edge, leftover filters, loops that snap, and how to fix each.
- **An audit.** A step-by-step pass that upgrades an existing app, highest-value fixes first.

## Install

The quickest way: press **Copy prompt** at the top and paste it into your assistant in your project. It installs the skill in the right place for itself, checks the install and reads it, without touching anything else.

### With the skills CLI

Works with Claude Code, Cursor, Codex, GitHub Copilot and other assistants that read Agent Skills. Run it in your project:

```bash
npx skills add FewTone/ui --skill smooth-ui
```

### Claude Code by hand

Download the skill with the button at the top, then unzip it into your project's skills folder, so you have `.claude/skills/smooth-ui/SKILL.md`:

```bash
unzip smooth-ui.zip -d .claude/skills
```

Unzip it into `~/.claude/skills` instead to use it in every project.

### Claude desktop app and claude.ai

Download the skill, then open **Settings → Capabilities → Skills**, choose **Upload skill** and pick `smooth-ui.zip`.

### Other assistants

Unzip the download wherever your assistant reads skills from (many read `.agents/skills/`). The skill is plain Markdown, so you can also point your assistant at `SKILL.md` directly.

## Use it

Your assistant uses the skill on its own when you work on UI. You can also ask for it:

- "Make this app's UI smoother."
- "Build a settings page with tabs, and make the tabs feel premium."
- "Audit the motion in this project and fix what feels off."
- "Why does my dropdown highlight jump when I scroll?"

## What's inside

| File | What it holds |
| --- | --- |
| `SKILL.md` | The rules, the map of which pattern fits which change, what never to do, and when it's done |
| `references/tokens.md` | Durations, easings, springs and keyframes, ready to paste as CSS and JavaScript |
| `references/patterns.md` | Every motion pattern, with the reasoning and values |
| `references/components.md` | Recipes for about 40 controls, from buttons and switches to toasts and calendars |
| `references/code.md` | Working React code for the core patterns, type-checked |
| `references/pitfalls.md` | Bugs that make an interface feel off, by symptom, with the fix |
| `references/audit.md` | The step-by-step pass for upgrading an existing UI |

The assistant only reads `SKILL.md` up front. It opens a reference file when it needs one, so the skill costs little context.

## Next steps

- [See the patterns in action](https://ui.fewtone.com/components): every FewTone UI component follows this skill.
- [Connect the MCP server](https://ui.fewtone.com/docs/mcp) to let your assistant find and install FewTone UI components too.