What problem does it solve? Inconsistent layering, arbitrary animation timings, and uneven spacing make interfaces feel unpolished and hard to navigate. This Skill provides concrete scales and rules for visual hierarchy so UI decisions follow a repeatable system instead of guesswork. ## Core Features & Use Cases - Z-Index and Elevation Scales: Standardized stacking values (-1 to 100) and shadow levels (xs to xl) for dropdowns, modals, tooltips, and toasts. - Animation Timing System: Duration scale from 75ms to 500ms with easing function guidance for hover, modal, and page transition states. - Spacing and Readability Rules: Content density tiers (tight to spacious), optimal reading widths, focus-visible styling, and a three-phase workflow covering hierarchy, interaction feedback, and accessibility validation. - Use Case: When building a dashboard with modals and dropdown menus, use this Skill to assign correct z-index layers, pick 200ms ease-out transitions, and verify focus rings and 44px touch targets. ## Quick Start Review my dashboard layout and apply the correct z-index scale, shadow elevation, and animation durations for its modals, dropdowns, and buttons.
