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.
npx skills add mturac/everything-openai-codex --skill make-interfaces-feel-better --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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, button, dropdown, or popover needs depth. Shadows should
- When to Use
- Core Principles
- Concentric Radius
- Optical Alignment
- Shadows And Borders
- Text Wrapping
- Font Smoothing
- Image Outlines
- Motion
- Transition Scope
- Hit Areas
- Review Output
- Checklist
What does the make-interfaces-feel-better skill do?
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.
How do I install it?
Run `npx skills add mturac/everything-openai-codex --skill make-interfaces-feel-better --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mturac/everything-openai-codex, a repository with 84 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.