Claude MarketplacesSubmit
magicuidesign avatar

Magic Ui

magicuidesign/magicuiOfficial

If you're building React or Next.js sites with Tailwind and want polished animated components without writing motion code from scratch, this walks you through the Magic UI component registry. It covers the full loop: picking the right component (marquees, animated buttons, hero effects), installing via shadcn, integrating without breaking the APIs, and checking accessibility and performance before you ship. The workflow is prescriptive, which is helpful when you just want a shiny button or text fade without decision paralysis. One thing to watch: it leans on you already having shadcn initialized, so if your project isn't set up that way, you'll need to backtrack.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
11
skills.sh installs
1.4K
GitHub stars
23.2K
last updated
Jul 14, 2026
View on GitHub

Install

$ npx -y skills add magicuidesign/magicui --skill magic-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

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.
  1. Confirm project prerequisites.
  • Project should be React/Next.js with Tailwind CSS.
  • shadcn must be initialized before adding registry components:
npx shadcn@latest init
  1. Install the selected component(s).
npx shadcn@latest add @magicui/<component-slug>

Example:

npx shadcn@latest add @magicui/magic-card
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/magicuidesign/magicui
First seen
Jun 3, 2026

Recommended

1juliusbrussee avatarcavemanjuliusbrussee/cavemanUltra-compressed communication mode. Cuts output tokens 65% (measured) by speaking like caveman while keeping full technical accuracy. Supports intensity levels618.3Kskills.sh installs
2mattpocock avatargrill-memattpocock/skillsA relentless interview to sharpen a plan or design.1.5Mskills.sh installs
3shadcn avatarimproveshadcn/improveSurvey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on s40Kskills.sh installs
4obra avatarsystematic-debuggingobra/superpowersUse when encountering any bug, test failure, or unexpected behavior, before proposing fixes326.7Kskills.sh installs
5forrestchang avatarkarpathy-guidelinesforrestchang/andrej-karpathy-skillsBehavioral guidelines to reduce common LLM coding mistakes through explicit assumptions, simplicity, and verifiable success criteria.17.9Kskills.sh installs
6vercel-labs avatarfind-skillsvercel-labs/skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express int4.3Mskills.sh installs