make-interfaces-feel-better
Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
- Kind
- Skill
- Works with
- Claude Code, Codex
- Source
- affaan-m/ECC @ d3b8a3e90890
- Path
- skills/make-interfaces-feel-better/SKILL.md
- License
- MIT
- Jobs
- Review, UI/UX work
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# 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: ```text 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. ### Shadows And Borders Use borders for separation and focus rings. Use layered shadows when a card, …