What problem does it solve? Adding polished animated UI sections to a React or Next.js project often means writing custom animation code from scratch or debugging broken registry installs. This Skill guides component selection, shadcn registry installation, and integration of Magic UI components while enforcing accessibility and performance checks. ## Core Features & Use Cases - Component Selection Guidance: Heuristics map UI goals (hero visuals, social proof, CTA emphasis, ambient backgrounds) to specific Magic UI components like marquee, globe, blur-fade, and shiny-button. - Registry Installation Workflow: Step-by-step shadcn initialization and @magicui/* component installation with import path conventions. - Section Recipes: Ready-made patterns for hero sections, testimonial marquees, and feature grids with motion guardrails. - Use Case: A developer wants to add an animated hero with a warp background, blur-fade heading, and shiny CTA button to a landing page; the Skill provides the exact install commands, integration steps, and quality checklist. ## Quick Start Ask the assistant to add a Magic UI marquee component to your Next.js project and it will initialize shadcn, install the component, and integrate it into your section.
