make-interfaces-feel-better

Topics in the source

• Make Interfaces Feel Better
• When to Use
• Core Principles
• Concentric Radius
• Optical Alignment
• Shadows And Borders
• Text Wrapping
• Font Smoothing

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. 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. For nearby nested rounded surfaces: If padding is large, treat layers as separate surfaces instead of forcing the math. The point is optical coherence, not formula worship. 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. Use borders for separation and focus rings. Use layered shadows when a card, button, dropdown, or popover needs depth. Shadows should be transparent and subtle enough to work across backgrounds. Use text-wrap: balance on headings and short titles. Use text-wrap: pretty on short-to-medium body text, captions, descriptions, an

This is an excerpt. Refer to the complete source and its current requirements.