make-interfaces-feel-better
Installation
Summary
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
SKILL.md
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.