FewTone UI

Smooth UI skill

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

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:

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

FileWhat it holds
SKILL.mdThe rules, the map of which pattern fits which change, what never to do, and when it's done
references/tokens.mdDurations, easings, springs and keyframes, ready to paste as CSS and JavaScript
references/patterns.mdEvery motion pattern, with the reasoning and values
references/components.mdRecipes for about 40 controls, from buttons and switches to toasts and calendars
references/code.mdWorking React code for the core patterns, type-checked
references/pitfalls.mdBugs that make an interface feel off, by symptom, with the fix
references/audit.mdThe 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