Agent skill · design visual · aiskillstore
make-interfaces-feel-better
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows, icons, icon stroke weight, icon states, motion restraint.
Why this skill is useful
Provides specific design principles and CSS techniques for enhancing UI polish that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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. Before suggesting or writing a fix, identify the project's existing styling system and express the change in that system: Tailwind in a Tailwind project, plain CSS in a CSS project, or the established CSS-in-JS approach. Never introduce a second styling system just to apply a polish fix. When reviewing, slow the interface down: replay motion at 10% speed in the browser's Animations panel and walk every state: hover, focus, active, loading, empty. What feels off at 10% speed is what's subtly wrong at full speed. 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, motion restraint Icons Icon stroke weight, states via currentColor, outline vs fill, sizing, RTL flipping 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. 2. Optical Over Geometric Alignment When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment. 3. Shadows for Elevation, Borders for Structure For buttons, cards, and containers whose border exists only to create depth, prefer layered transparent box-shadow values. Keep borders that communicate structure or state: dividers, layout separators, and selected or focus states. 4. Interruptible Animations Use CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once. 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/make-interfaces-feel-better