Magic UI Skill: Add Animated Components With shadcn

What is the magic-ui skill?

Magic UI is a library of animated components and effects you copy into your own app. The skill sits in that library's repository and tells an agent how to add, customize and troubleshoot those components in React and Next.js projects.

Its folder holds SKILL.md and a references folder with components.md and recipes.md. The agent loads them only when it needs component choice details or section level patterns.

When the skill applies

• Adding one Magic UI component, such as marquee, globe, blur-fade or shiny-button.
• Building a section with effects, such as a hero, testimonials, a call to action or a feature grid.
• Replacing hand written animation code with a Magic UI component.
• Fixing install or import problems with the @magicui registry.

The five part workflow

• Define the outcome: section type, tone, motion intensity and responsive behavior.
• Confirm prerequisites: React or Next.js with Tailwind CSS, and shadcn initialized.
• Install the chosen components from the registry.
• Integrate by importing from the generated path and customizing through props and className.
• Validate accessibility, responsiveness, performance and maintainability.

Picking components

• Social proof rails: marquee and avatar-circles.
• Hero impact: globe, warp-background and animated-grid-pattern.
• Text animation: blur-fade, text-animate, word-rotate and sparkles-text.
• Calls to action: shiny-button, shimmer-button and rainbow-button.
• Ambient backgrounds: grid-pattern, dot-pattern, particles and flickering-grid.

Who the magic-ui skill is for

Best for

• Landing pages and marketing sections in React or Next.js that need motion without custom animation code.
• Projects that already use shadcn, since the install path runs through its registry. See the shadcn skill for the base layer.
• Agents that also connect to the docs through the Magic UI MCP server.

Not for

• Stacks without React and Tailwind, since the skill lists both as prerequisites.
• Hand tuned timelines. For custom motion in React, see motion-framer-motion.

Use it with UiChemy

Magic UI output is React code, so it will not paste into an Elementor page. To reach WordPress, prototype the section, capture the look in Figma or Composer, then convert with UiChemy. Click Get Started on uichemy.com. For styling help, see ui-styling.

How to install Magic UI Skill: Add Animated Components With shadcn

git clone https://github.com/magicuidesign/magicui.git

1. Clone the repository

   Run git clone https://github.com/magicuidesign/magicui.git. The skill is the skills/magic-ui folder, with SKILL.md and a references folder.

2. Copy the skill folder

   Copy skills/magic-ui, references included, into the place your agent loads skills from. The README gives no skill install command and names no agent folder.

3. Prepare the project

   The skill expects React or Next.js with Tailwind CSS. Run npx shadcn@latest init if components.json is missing.

4. Ask for a component

   Ask for a hero, testimonial strip or button effect. The skill installs each choice with npx shadcn@latest add @magicui/magic-card, swapping in the slug you need. Docs live at magicui.design/docs.

Check that it loaded

Ask the agent to add a marquee to a section. It should confirm shadcn is initialized, run the add command with the marquee slug, import from the generated path and then check mobile layout.

Read the official instructions on GitHub

Key features

• Clear trigger listApply the skill to add a component, build an effects section, replace custom animation code or troubleshoot @magicui installs.
• Outcome firstThe agent defines section type, tone, motion intensity and responsive behavior before touching code, and keeps motion intentional.
• Prerequisite checkRequires a React or Next.js project with Tailwind CSS, and shadcn initialized before registry components are added.
• Registry installComponents install with the shadcn add command and an @magicui component slug, with magic-card given as the example.
• Integration rulesImport from the generated path, keep component APIs intact, prefer prop and className changes, and add any extra dependencies or CSS keyframes the docs mention.
• Four point quality checkBefore finishing, check accessibility, responsive overflow, performance and maintainability against the project's existing conventions.
• Selection heuristicsMaps use cases to components: logo rails, hero visuals, text animation, call to action emphasis and ambient backgrounds.
• Start smallBegin with one core component and one supporting effect, and add more only if needed, to avoid stacking high motion effects.
• Troubleshooting guideHandles a components.json or init error, a missing @ alias, visual mismatch from missing keyframes and missing dependency errors.
• On demand referencescomponents.md covers component choice, install shape and dependencies, and recipes.md covers section level patterns.

Frequently asked questions