Skip to content
Motion

Make Interfaces Feel Better

Tool coverage — filled cells are supported. Full names under “Works with” below.

Nineteen small physical details — concentric radii, tabular numbers, scale-on-press — that add up to "feels expensive."

Nineteen small, extremely specific physical-detail rules — the kind that don’t show up in a style guide but that your eye clocks instantly when they’re missing. Concentric border radius (outer = inner + padding). Scale-on-press pinned to exactly 0.96, never below 0.95. Icon stroke width matched to adjacent text weight. A pure-black-or-white 10% outline on images, explicitly not a tinted neutral, because a tinted outline “reads as dirt on the image edge.”

The instruction to slow every animation to 10% speed in the browser’s Animations panel before judging it is the kind of concrete, repeatable check that makes a review skill actually useful rather than vibes-based.

Install: standalone repo, no plugin manifest — copy skills/make-interfaces-feel-better/ (with its five reference files: typography, surfaces, animations, icons, performance) into .claude/skills/.

Gotcha: several rules assume a specific motion library convention (motion/framer-motion in package.json) and branch behavior accordingly — read the animations reference before applying its icon-transition guidance to a project with no motion library installed.

File & content map

SKILL.md

Make Interfaces Feel Better

Nineteen small physical details — concentric radii, tabular numbers, scale-on-press — that add up to "feels expensive."

Contents — 4 sections

Quick Reference
Core Principles
1. Concentric Border Radius
2. Optical Over Geometric Alignment
3. Shadows for Elevation, Borders for Structure
4. Interruptible Animations
+ 15 more
Common Mistakes
Review Output Format
Scope and Coverage
Findings
Example
Considered but Rejected
+ 1 more
content section file folder