make-interfaces-feel-better

SKILL.md

Practical design engineering principles for polishing UI components and interactions.

Covers 16 core techniques including concentric border radius, optical alignment, layered shadows, interruptible animations, and staggered enter/exit transitions

Provides specific implementation details: scale-on-press uses exactly 0.96, icon animations use defined opacity/scale/blur ranges, tabular numbers prevent layout shift, and hit areas require minimum 40×40px

Includes a review checklist and common mistakes table to catch visual polish issues during code review

Organized by category (typography, surfaces, animations, performance) with guidance on when to apply each principle

Details that make interfaces feel better

Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code.

Quick Reference

Category
When to Use

Typography
Text wrapping, font smoothing, tabular numbers

Surfaces
Border radius, optical alignment, shadows, image outlines, hit areas

Animations
Interruptible animations, enter/exit transitions, icon animations, scale on press

Performance
Transition specificity, will-change usage

Core Principles

1. Concentric Border Radius

Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes interfaces feel off.