make-interfaces-feel-better

Polish comes from small compounding details: concentric border radii on nested surfaces, optically centered icons, subtle layered shadows, balanced text wrapping, and interruptible CSS transitions. This Skill provides a checklist and before/after review format for applying these fixes.

Replace `transition: all` with explicit transition properties like transform, background-color, and box-shadow. Use CSS transitions instead of keyframes for interactive states so animations can retarget mid-motion, and keep exits shorter than entrances, around 150ms.

Nested rounded surfaces look off when parent and child share the same radius. The fix is concentric radius: outer radius equals inner radius plus padding, creating optical coherence between the layers.

Interactive controls should have at least a 40x40px hit area, ideally 44x44px where layout allows. Expand small icons with a pseudo-element to grow the hit area without changing the visual size, and avoid overlapping expanded areas.

Use `text-wrap: balance` on headings and short titles, and `text-wrap: pretty` on short-to-medium body text, captions, and list items. Avoid both on long prose, code, and preformatted content where they add no benefit.