Make Interfaces Feel Better

Why it's ranked here

The value is specificity. Where most style guidance says "keep motion subtle", this one gives numbers: about 100ms between staggered entrance chunks, exits shorter than enters at 150ms against 300ms, hit areas of 44 by 44 pixels on touch and 40 by 40 on dense desktop. It tells the agent to work in the project's existing styling system rather than add a second one, and to skip any new dependency just for icon transitions. MIT licensed and readable in one sitting, it is a cheap way to raise the floor on agent-written interface code.

What's good

Rules come with their limits, not just their slogans. Concentric radius math is dropped once padding passes 24 pixels. Balanced text wrapping is flagged as working only on short blocks, six lines in Chromium and ten in Firefox. Staggered entrances are explicitly banned on routine, high-frequency interactions, and motion is never allowed to be the only feedback channel. The review mode forces the agent to show what it inspected, mark unchecked work as not verified, and list candidates it considered and rejected, which keeps findings honest.

Tradeoffs

Many values are fixed by decree: press scale must be 0.96, icon animation bounce must always be zero, image outlines must be pure black or white at 10 percent. Teams with their own motion or color language will fight these rules. The code samples lean on React, Tailwind and the Motion animation library, so plain CSS or other frameworks get less direct help. The repository is prose and code snippets only, with nothing runnable that checks whether an agent actually follows the rules.

How to use it well

Install it with the skills command line installer, then call it during frontend work or ask for a quick or full review. Quick mode reports only high and medium issues, capped at five; full mode covers all five categories, capped at fifteen. It fits teams shipping React and Tailwind interfaces who want agent output to stop looking generic. Override its hard-coded values where your design system already decides them. It does not cover layout, color palettes, accessibility audits or font choice beyond rendering details.

Observed

License

MIT

Format

Markdown agent skill: one main instruction file plus five topic reference files

Install surface

npx skills add jakubkrehel/make-interfaces-feel-better

Review modes

quick (up to 5 findings, high and medium only) and full (up to 15 findings, default)

Code examples

CSS, Tailwind, and React with the Motion or Framer Motion library

Tests

No test directory or runnable code in the files read