make-interfaces-feel-better Skill for Claude: Polish UI Details

Makes Claude build and review interfaces with small polish details: border radius, shadows, motion, typography and icons.

Installs: 74.7K; on skills.sh
Stars: 3.9K; on GitHub
Files: 6; besides SKILL.md
Updated: Aug 2026; last repo commit

make-interfaces-feel-better makes Claude apply 19 design-engineering principles when it writes or reviews UI. It covers concentric border radius, optical alignment, shadows, interruptible animations, tabular numbers, icon stroke weight and minimum hit areas.

It triggers on UI work, animation, hover states and phrases like "make it feel better". It first identifies your project's styling system and expresses fixes in it. It can review in a quick or full mode and bundles reference guides but no scripts.

Good for

Front-end developers who want Claude to review UI code for polish
Designers who say a screen "feels off" and want concrete fixes
Teams that want a consistent rule set for animation and hit areas

Install make-interfaces-feel-better

Claude Code

Copy this prompt.

Install the make-interfaces-feel-better skill in Claude Code. Run this command:

npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows, icons, icon stroke weight, icon states, motion restraint.

Sections in SKILL.md

Quick Reference
Core Principles
1. Concentric Border Radius
2. Optical Over Geometric Alignment
3. Shadows for Elevation, Borders for Structure
4. Interruptible Animations
5. Split and Stagger Enter Animations
6. Subtle Exit Animations
7. Contextual Icon Animations
8. Font Smoothing
9. Tabular Numbers
10. Text Wrapping
11. Image Outlines
12. Scale on Press
13. Skip Animation on Page Load
14. Never Use transition: all

Key facts

Author: jakubkrehel
Repo: jakubkrehel/make-interfaces-feel-better
License: MIT
Installs on skills.sh: 74,724 (Nov 2, 2026)
GitHub stars (whole repo): 3,892 (Nov 2, 2026)
Last commit to the repo: Aug 29, 2026
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass
Skill folder: 7 files: SKILL.md, agents/openai.yaml and 5 guides (typography, surfaces, animations, icons, performance) (counted from the GitHub folder)
Site: interfaces.dev, linked from the repo README

What it includes

Checks the main user path, HIGH and MEDIUM issues only, up to 5 findings
Use when you want a fast pass on the highest-traffic states.
Read · Quick review
Checks the whole scope across five categories, up to 15 findings
The default when no mode is given. Covers typography, surfaces, animations, icons and performance.
Read · Full review
Concentric radius, optical alignment, shadows, image outlines, hit areas
Outer radius equals inner radius plus padding. Hit areas should be 44x44px on touch, at least 40x40px on dense desktop UI.
Surfaces guide
Interruptible, staggered, subtle and restrained motion
Prefers CSS transitions for state changes, a scale of 0.96 on press, and no custom animation on high-frequency interactions.
Animations guide
Wrapping, font smoothing, tabular numbers
text-wrap: balance on headings, text-wrap: pretty on body text, and tabular-nums for changing numbers.
Typography guide
Stroke weight, states, outline versus fill, sizing
Match stroke to text weight, use currentColor, and take states from CSS rather than separate assets.
Icons guide
Transition specificity and will-change
Never use transition: all, and use will-change only for transform, opacity or filter.
Performance guide
A fixed layout for review results
Scope and coverage table, findings table (Severity, Location, Before, After, Why), considered but rejected, then verification and a verdict of Block, Needs changes or Approve.
Review report format
Display name and short description
Sets the display name "Make Interfaces Feel Better" and a one-line description.
agents/openai.yaml

From the official docs

Permissions

Low risk

The skill makes Claude edit your UI code and report what commands it ran. Review the diff before you merge.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your UI code
Fixes are written into your styles and components. Review the diff before you merge.

Technical details

Talks to	None named in the SKILL.md

Questions

How do I install make-interfaces-feel-better?

Use the install box above. The README documents one route, the skills CLI, with the repo name.

Does it work in the Claude app or Codex?

The README documents only the skills CLI install and does not name clients. The folder includes an agents/openai.yaml with a display name and description. The Claude app route is not documented.

What is the difference between quick and full review?

Quick looks at the main user path and reports only HIGH and MEDIUM issues, capped at 5. Full covers the whole scope in five categories, caps at 15 findings and also reports LOW issues. Full is the default.

Does it only work with React or Tailwind?

No. The skill says to identify your project's own styling system first and write fixes in it. Its examples include plain CSS, Tailwind classes and AnimatePresence from a motion library.

Will it add animation everywhere?

No. One of its 19 principles is motion restraint: no custom animation on high-frequency interactions, and every animated change needs a static cue such as color, icon or label.

Does it need an API key or scripts?

The SKILL.md names no API keys, and the folder bundles guides and a small YAML file, not scripts.

Is it safe?

It is plain text guidance, but it makes Claude edit UI code and its report format asks it to list the commands it ran. Review the diff and those commands.

Information

updated Nov 2, 2026

Repository: jakubkrehel/make-interfaces-feel-better
Folder: skills/make-interfaces-feel-better

jakubkrehel/make-interfaces-feel-better skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

make-interfaces-feel-better SKILL.md · github.com
make-interfaces-feel-better README · github.com
make-interfaces-feel-better on skills.sh · skills.sh
jakubkrehel/make-interfaces-feel-better · github.com
agents/openai.yaml · github.com