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.