用途
Magic UI 技能用于在 React 项目中添加、定制或排查 Magic UI 的动画组件。它适合处理“让这个 hero 区块活起来”这类以动效为目标的请求，而不是“画出这个界面”的静态布局需求。它从 UI 结果出发，根据区块类型、动效强度和响应式行为，从 Magic UI 注册表中挑选并安装合适的动画组件，而不是手写动效。
主要能力
- 从 Magic UI 注册表按名称安装动画组件，例如 marquee、globe、blur-fade、shiny-button、magic-card 等。
- 安装前确认项目为 React/Next.js 且使用 Tailwind，并且 shadcn 已初始化。
- 集成时保持组件 API 不变，优先通过 prop 和 className 进行定制，而不是重写组件内部实现。
- 补充组件所需的额外依赖或 CSS 关键帧。
- 完成质量检查：语义化 HTML 与键盘可访问性、标签与文本替代、移动端溢出，以及检查是否混入了客户端专用包装和高动效叠加。
- 附带 references/components.md（组件目录）和 references/recipes.md（区块级组合）。
使用方式
安装前先判断技能是否已安装。
全局检查：
f=~/.agents/skills/magic-ui/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
项目检查：
f=.agents/skills/magic-ui/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
若结果为 installed，说明技能已以 magic-ui 名称安装，直接调用并继续。若结果为 pointer，则进入下一步检测范围并安装。
检测范围：
[ -e ~/.agents/skills/magic-ui ] && echo "global" || echo "project"
全局安装：
npx skills add magicuidesign/magicui --skill magic-ui -g -y
项目安装：
npx skills add magicuidesign/magicui --skill magic-ui -y
在 Claude Code 中，可以发送以 ! 开头的聊天消息来运行命令，无需离开对话。
安装后调用：技能名称为 magic-ui，触发短语包括 "magic ui"、"animated component"、"animated hero section"。
安装组件示例：
npx shadcn@latest add @magicui/magic-card
适用场景
- 需要为 React/Next.js 项目添加动画组件，例如动画 hero 区块、跑马灯、地球、模糊淡入、闪光按钮、魔法卡片等。
- 希望从 UI 目标出发选择现成动画组件，而不是手写动效。
- 需要在保持组件 API 不变的前提下，通过 prop 和 className 定制动画组件。
- 需要排查动画组件的集成问题，并补充依赖或 CSS 关键帧。
限制
- 需要 Node.js 和网络访问；组件通过 shadcn CLI 从 Magic UI 注册表安装，且 shadcn 必须已在项目中初始化。
- 许可证为 MIT，下载体积约 82 MB。
- 不适用于构建或主题化组件原语本身：shadcn-ui 负责注册表、CLI 和变体机制，building-components 负责 API 设计。
- 不适用于与动效无关的静态布局、排版或颜色决策（可使用 ui-ux-pro-max、baseline-ui 或 color-expert）。
- 不适用于非 React 技术栈：所有组件都是 React/Tailwind 注册表条目，Vue 或 Svelte 项目需要自己的库。
- 不适用于需要按时间线或影片方式进行艺术指导的动效（属于 gsap-skills、scroll-world 或 design-motion-principles）。