What problem does it solve? Interfaces often feel subtly off because of small compounding details: mismatched nested border radii, geometrically centered icons that look unbalanced, borders used where shadows belong, and animations that stutter or smear. This Skill gives an AI agent a concrete rulebook of exact values and recipes to audit and fix those UI polish issues in your project. ## Core Features & Use Cases - Surface and radius rules: Enforces concentric border radius (outer = inner + padding), layered box-shadow recipes for light and dark mode, and pure black/white image outlines instead of tinted ones. - Animation recipes: Provides exact values for interruptible CSS transitions, scale-on-press feedback (0.96), staggered enter animations, subtle exits, contextual icon cross-fades, and suppressing transitions during theme switches. - Icon consistency: Matches icon stroke width to adjacent text weight, uses one SVG recolored per state via currentColor, pairs outline/fill variants with state, and handles RTL flipping. - Use Case: Ask the agent to review a card component, and it reports findings in a severity-ranked table (HIGH/MEDIUM/LOW) with file locations, before/after values, and a final Block or Approve verdict. ## Quick Start Ask the agent to review the UI polish of a component or page in your project, covering border radius, shadows, icons, and animations, and report findings by severity.
