Make Interfaces Feel Better

Salvaged from a stale community PR and polished up. This gives Claude concrete patterns for UI refinement: concentric radius math for nested rounded corners, optical centering for asymmetric icons, tabular numerals for counters, text-wrap balance and pretty for short content, transition property scoping instead of transition all, and hit area expansion with pseudo-elements. It outputs before/after tables when reviewing changes. Useful when something feels off but you can't articulate why, or when you're building controls and want to skip the flat prototype look. The checklist format makes it easy to audit existing work without overthinking every detail.

skills.sh installs: 1.7K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --skill make-interfaces-feel-better --agent claude-code

Installs into .claude/skills of the current project.

Files

Make Interfaces Feel Better

Use this skill for the small design-engineering details that compound into a more polished interface.

Source: salvaged from stale community PR #1659 by linus707.

When to Use

The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
You are building controls, cards, lists, dashboards, navigation, forms, or toolbars.
A component needs hover, active, focus, enter, exit, loading, or empty states.
A frontend review needs specific before/after recommendations.

Core Principles

Concentric Radius

For nearby nested rounded surfaces:

outer radius = inner radius + padding

If padding is large, treat layers as separate surfaces instead of forcing the math. The point is optical coherence, not formula worship.

Optical Alignment

Geometric centering is not always visual centering. Icon buttons, play triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the SVG when possible; otherwise adjust with a pixel-level margin or padding change.