magic-uilisted

# Magic UI Use this skill when the task involves Magic UI components, animated UI sections, or converting static sections into interactive UI using the Magic UI registry. ## When To Apply Apply this skill when users ask to: - Add a Magic UI component (for example: marquee, globe, blur-fade, shiny-button) - Build a section with Magic UI effects (hero, testimonials, CTA, feature grid) - Replace custom animation code with Magic UI components - Troubleshoot installation/import issues for `@magicui/*` ## Core Workflow 1. Define the UI outcome first. - Identify section type, tone, motion intensity, and responsive behavior. - Keep motion intentional; avoid stacking many high-motion effects in one viewport. 2. Confirm project prerequisites. - Project should be React/Next.js with Tailwind CSS. - shadcn must be initialized before adding registry components: ```bash npx shadcn@latest init ``` 3. Install the selected component(s). ```bash npx shadcn@latest add @magicui/<component-slug> ``` Example: ```bash npx shadcn@latest add @magicui/magic-card ``` 4. Integrate into the target section. - Import from the generated path (typically `@/components/ui/<component-slug>`). - Keep component APIs intact; prefer prop/className customization over rewriting internals. - If docs mention extra dependencies or CSS keyframes, add them during integration. 5. Validate quality before finishing. - Accessibility: semantic HTML, keyboard access, meaningful labels/text. - Responsi