What problem does it solve?
AI-generated interfaces often miss the small visual details — wrong easing curves, mismatched border radii, solid borders used for depth, undersized hit areas — that separate polished interfaces from generic ones. This Skill encodes those interface-taste rules so agents apply them consistently during UI implementation and review.
Core Features & Use Cases
- Motion and Animation Rules: Enforces correct easing (ease-out on enter, ease-in on exit), compositor-friendly properties (transform/opacity over layout properties), stagger budgets, and mandatory prefers-reduced-motion branches.
- Geometry, Typography, and Icon Standards: Covers concentric border radius, optical alignment, tabular-nums for dynamic numbers, text-wrap rules, and icon stroke weights matched to text weight.
- Design Audit Suite: The references/design-audit.md file provides grep-based mechanical detection patterns for motion gaps, accessibility violations, and consistency inventories across an entire codebase, with HIGH/MEDIUM/LOW severity and Block/Needs-changes/Approve verdicts.
- Use Case: While building a React component with enter/exit animations, the agent applies ease-out deceleration, skips first-render animation with initial={false}, and verifies a reduced-motion fallback before shipping.
Quick Start
Review this UI component's animations, spacing, and icon states against the interface polish rules and list any HIGH or MEDIUM findings.
