back
loading skill details...
Design engineering principles for making interfaces feel polished. Use when building UI components, implementing animations or hover states, or doing any…
UI polish Polish comes from a pile of small details that compound. This skill is the reference for which are worth having and what values they take. When reviewing, slow the interface down. What feels off at 10% speed is what is subtly wrong at full speed. Keep the project's component library, tokens and density, and match its motion language except where a rule below prescribes an exact interaction. Every duration, curve, scale and blur below is a specific value, not a range to approximate. cubic-bezier(0.2, 0, 0, 1) is not cubic-bezier(0.4, 0, 0.2, 1), and 0.96 is not 0.95. Use what is written. Text wrapping, font rendering, tabular numbers and text spacing belong to better-typography. Hit areas, focus, keyboard support, ARIA and reduced motion belong to better-accessibility. Grouping, section spacing, breakpoints and spatial RTL belong to better-layout. Concentric border radius Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes an interface feel off. Radius, shadow and outline recipes are in surfaces.md. Optical over geometric alignment When geometric centering looks off, align optically. Buttons with icons, play triangles and asymmetric icons all need a manual nudge.
don't have the plugin yet? install it then click "run inline in claude" again.