ReactBits Claude Code Skill · 135+ 动画组件集成

A Claude Code skill that brings 135+ animated React components from ReactBits.dev into your AI workflow.

整合 ReactBits.dev 全部 135+ 动画组件到 Claude Code，让 AI 帮你做网站。

核心能力

组件搜索与安装

• 搜索/浏览 7 大分类：Text Animations、Animations、Backgrounds、Components、Buttons、Forms、Loaders
• 一键获取源码 + demo，自动安装 npm 依赖
• Tailwind / CSS 双风格支持，TypeScript 优先

网站搭建模式

说"帮我做一个网站"即可触发——Claude 会主动询问：

1. 网站用途（个人作品集 / 产品落地页 / 公司官网 / 博客）
2. 风格偏好（极简 / 科技感 / 暗黑炫酷 / 商务专业 / 卡通可爱）
3. 色系偏好（紫色 / 蓝色 / 暖色 / 黑白 / AI 推荐）
4. 需要的效果（3D 背景 / 粒子 / 滚动动画 / 卡片交互 / 文字动效）

根据回答推荐 3-5 个匹配组件，自动创建文件并集成到项目。

示例

用户：帮我做一个个人作品集网站

Claude：→ 询问风格/色系/需求
Claude：→ 推荐：Dither(背景) + BlurText(标题) + ClickSpark(点击特效) + FadeContent(滚动淡入)
用户：可以，加吧
Claude：→ 自动安装依赖、创建组件文件、集成到首页

安装

一键安装

# Windows (PowerShell)
git clone https://github.com/hwj23016021425/reactbits-claude-skill.git
cd reactbits-claude-skill
.\install.ps1

# macOS / Linux / WSL
git clone https://github.com/hwj23016021425/reactbits-claude-skill.git
cd reactbits-claude-skill
bash install.sh

前置依赖

• reactbits-dev-mcp-server (npm)
• Node.js ≥ 18

项目结构

reactbits-claude-skill/
├── .mcp.json                          # MCP 全局配置
├── install.sh / install.ps1           # 一键安装脚本
├── README.md
└── .claude/
    └── skills/
        └── reactbits/
            └── SKILL.md                # Skill 主文件（含网站搭建模式）

技术栈

层级	技术
Skill 平台	Claude Code (Anthropic)
组件来源	ReactBits.dev (135+ animated components)
MCP 协议	reactbits-dev-mcp-server
前端框架	React / Next.js
样式方案	Tailwind CSS / CSS Modules

License

MIT — 自由使用、修改、分发。

---

Made with Claude Code · Submit to SkillStore