What problem does it solve? Interfaces often feel subtly off due to small compounding details like mismatched border radii, jarring animations, or misaligned icons. This Skill provides concrete, opinionated rules and code recipes for reviewing and fixing those visual and motion details in frontend code. ## Core Features & Use Cases - Surface Polish: Enforces concentric border radius, optical alignment, layered box-shadows instead of decorative borders, and pure black/white image outlines for light and dark modes. - Motion Recipes: Provides exact patterns for interruptible CSS transitions, scale-on-press feedback, staggered enter animations, subtle exits, theme-switch transition suppression, and contextual icon cross-fades with or without Motion/Framer Motion. - Icon Consistency: Matches icon stroke weight to text weight, uses one currentColor SVG recolored per state, outline-by-default with fill for active states, and RTL flipping rules. - Structured Review Output: Defines a severity-scaled findings table, verification steps, and a Block/Needs changes/Approve verdict for standalone UI-polish reviews. - Use Case: When a user says a settings page "feels off", apply the principles to find nested cards sharing the same radius, a theme toggle smearing transitions across the page, and icons with hairline strokes beside semibold labels, then report fixes with before/after code. ## Quick Start Review this component for UI polish issues and report findings using the better-ui principles.
