Agent skill · design visual · affaan-m
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.
Why this skill is useful
Provides specific design patterns and CSS implementations that enhance UI polish and usability, which the AI may not generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
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: 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 be transparent and subtle enough to work across backgrounds. Text Wrapping Use text-wrap: balance on headings and short titles. Use text-wrap: pretty on short-to-medium body text, captions, descriptions, and list items. Avoid both on long prose, code, and preformatted content. Use font-variant-numeric: tabular-nums for counters, timers, prices, tables, and other updating numbers. Font Smoothing On macOS, apply antialiased font smoothing at the root layout when the project does not already do so: Image Outlines Images often need a subtle inset outline so their edges do not blur into the surface. Use neutral black or white alpha outlines. Do not tint image outlines with the brand palette. Motion Use CSS transitions for interactive state changes because they can retarget when the user changes intent mid-motion. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/make-interfaces-feel-better--6e594d