What problem does it solve? Frontend implementations often ship with generic aesthetics, accessibility gaps, janky animations, and inconsistent spacing. This Skill provides a single actionable reference covering the full implementation stack — typography, color systems, spatial design, motion, component craft, and accessibility — so interfaces meet WCAG AA standards and feel intentionally designed rather than templated. ## Core Features & Use Cases - Priority-Stacked Implementation Guidance: Enforces accessibility and performance as non-negotiable foundations before typography, layout, color, motion, and polish layers. - Component Patterns with shadcn/ui and Radix: Provides CVA-based variant patterns for buttons, forms, dialogs, selects, sheets, toasts, and tables with built-in accessibility behavior. - Motion and Animation Framework: Applies frequency-based animation budgets, custom easing curves, stagger patterns, and reduced-motion handling for 60fps interactions. - Use Case: When asked to build a landing page or dashboard, the Skill guides aesthetic direction selection, HSL semantic token setup, concentric border radius, keyboard navigation, and a 30-item pre-delivery review covering contrast, focus rings, and animation performance. ## Quick Start Use the interface-kit skill to build an accessible, polished pricing page component with dark mode support and staggered enter animations.
