Magic UI skill
Magic UI skill: an agent adds animated components to React and Next.js through the shadcn registry and checks accessibility
- 23,086 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent runs `npx shadcn@latest` commands and adds third-party component code to the project
- Installation pulls dependencies from npm and may change global styles
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/magic-uiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent runs `npx shadcn@latest` commands and adds third-party component code to the project
- Installation pulls dependencies from npm and may change global styles
This is third-party code. Review the repository files before installing.
What it does
The `magic-ui` skill sits in the Magic UI library repository and teaches an agent to pick animated components and add them to a React or Next.js project with Tailwind CSS. The workflow is short: decide what the interface needs, make sure the project has shadcn, add a component with `npx shadcn@latest add @magicui/<name>`, fit it into the section and check accessibility, responsiveness and performance. The skill includes a selection cheat sheet: `marquee` and `avatar-circles` for logo rails, `globe` and `warp-background` for the hero, `blur-fade` and `text-animate` for text, `shiny-button` for calls to action. The author's rule is to start with one core component and one supporting effect. Details live in `references/components.md` and `references/recipes.md`.
Who it is for. Design engineers and Next.js landing page developers who bring a page to life with animation using Claude Code, Cursor or Codex.
Good fit when
- The landing hero should come alive with a globe or an animated grid instead of a heavy video
- A client logo strip should scroll smoothly and the agent takes a ready `marquee`
- A project has plenty of hand-written animation and you want components from the registry instead
- After installing a component an import or style is missing and the cause is found through the list of common problems
Not a fit when
- The project is not React or has no Tailwind CSS: the skill targets that stack
- A strict, calm dashboard is needed: animated effects only get in the way there
- The agent needs direct registry access from the editor: Magic UI has a separate MCP server for that
Example request
Liven up the landing hero: add Magic UI blur-fade for the headline and a marquee with client logosLimitations
The skill installs components through `shadcn`, so `npx shadcn@latest init` must have been run in the project. Some components add dependencies and CSS keyframes, which the agent adds from the component docs. If the `@/` alias is not configured, imports must be replaced with relative ones. The repository README says nothing about the skill, and `npx skills add magicuidesign/magicui --skill magic-ui` is the generic skills CLI route, not one the project documents. The Magic UI MCP server needs separate setup, which the skill does not do.
How to disable. Delete the `magic-ui` folder from the project's skills directory. Components already added stay in `components/ui` and are removed by hand.
FAQ
How do I install the Magic UI skill in Claude Code?
Copy the `skills/magic-ui` folder from the repository into the project's `.claude/skills/` or run `npx skills add magicuidesign/magicui --skill magic-ui`. The project does not document a dedicated command.
Which components does the skill suggest for the hero?
For visual impact it names `globe`, `warp-background` and `animated-grid-pattern`, with `grid-pattern` and `particles` for backgrounds. It advises one core component and one supporting effect.
What if the add-component command fails?
First run `npx shadcn@latest init` in the project root, since the registry will not connect without `components.json`. Then check the `@/` alias and the dependencies from the component's manual install steps.
How does the skill differ from the Magic UI MCP server?
The skill sets the working order and rules for choosing components, while the MCP server gives the editor direct access to the library contents. The server installs with `npx @magicuidesign/cli@latest install claude` or the equivalent for your client.
What does the skill check in the result?
Accessibility with semantic markup and keyboard use, responsiveness without overflow on mobile screens, performance without piled-up animation, and consistent code style.
Discussion
No questions or reviews yet.
Related
SkillsA skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
Three skills for Bklit UI charts in React: installing from the shadcn registry, styling to the app theme and moving off Recharts.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Magic UI (this card) | yes | 23,086 | ||
| shadcn/ui | no | 127,393 | a skill about base shadcn/ui components without animated effects | |
| 21st MCP (Magic MCP) | yes | API key | 6,392 | an MCP server that generates UI on request, without its own animation registry |
README in short
The repository README is short: a documentation link, an invitation to contribute and community links. Agent workflows are covered by the docs and the repository itself: the `skills/magic-ui` folder holds a `SKILL.md` with the process and two reference pages, and the MCP page describes the server install.
README badge
Original SKILL.md
--- name: magic-ui description: Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability. metadata: short-description: Build and customize UIs with Magic UI components --- # 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.