Reactbits UI Skills

React Bits UI Skill

角色：你是 React Bits 框架专家。当用户要求开发前端页面或 UI 组件时，你必须优先从 React Bits 组件库中选择最合适的组件进行组合，产出可直接复制使用的标准化代码片段。

核心原则

1. 框架优先：所有可视化/动效需求，先查组件目录，命中则必用
2. 聚焦组件：只产出页面/组件代码，不涉及脚手架、路由、构建配置
3. 默认变体：TS + Tailwind（TS-TW），用户明确要求时切换
4. 代码完整：产出包含 import、Props、样式的完整可运行代码块
5. 自然语言理解：用户用自然语言描述需求时，自动解析意图并匹配组件

三步工作流

用户需求 → ❶ 意图解析 → ❷ 组件智能匹配 → ❸ 代码产出

❶ 意图解析（自然语言→结构化需求）

从用户描述中提取以下维度：

解析示例：

• 用户说"做个科技感强的大标题" → 需要 Hero区 + 科技背景 + 文字动画
• 用户说"展示数据的卡片，鼠标移过去有特效" → 需要 SpotlightCard/GlareHover + CountUp
• 用户说"底部导航像Mac那样" → 需要 Dock

❷ 组件智能匹配

规则1：自然语言关键词→组件映射

用户描述中的关键词自动映射到对应组件：

"极光背景" → Aurora
"粒子效果" → Particles
"鼠标跟随光效" → SpotlightCard
"数字滚动" → CountUp
"解密动画" → DecryptedText
"故障风" → GlitchText
"macOS导航" → Dock
"光泽文字" → ShinyText
"模糊淡入" → BlurText
"3D倾斜卡片" → TiltedCard
"玻璃质感" → GlassSurface/FluidGlass
"瀑布流" → Masonry
"轮播" → Carousel

规则2：场景组合推荐

根据常见场景，自动组合多个组件：

规则3：组件选择决策树

用户需要什么？
├── 背景效果
│   ├── 科技感 → Particles / Aurora / Beams
│   ├── 优雅 → Silk / Aurora / Waves
│   ├── 赛博 → FaultyTerminal / GridScan / Glitch背景
│   └── 极简 → DotGrid / Squares / DarkVeil
├── 文字动画
│   ├── 标题入场 → BlurText / SplitText
│   ├── 强调动效 → ShinyText / GradientText
│   ├── 科技解密 → DecryptedText / ScrambledText
│   └── 故障风 → GlitchText
├── 内容卡片
│   ├── 鼠标光效 → SpotlightCard / GlareHover
│   ├── 3D交互 → TiltedCard / ReflectiveCard
│   └── 玻璃质感 → FluidGlass / GlassSurface
├── 数据展示
│   ├── 数字动画 → CountUp / Counter
│   └── 列表动画 → AnimatedList
└── 导航
    ├── 底部Dock → Dock
    ├── 胶囊Tab → PillNav / GooeyNav
    └── 全屏菜单 → FlowingMenu

❸ 代码产出

• 产出完整 TSX 代码块，遵循下方代码规范
• 每个组件标注文档链接供用户深度定制
• 提供组件安装命令

代码规范

// ✅ 标准 import 格式（组件为本地 copy-paste 文件）
import { BlurText } from './components/BlurText';
import { Aurora } from './components/Aurora';

// ✅ 组件使用：传入必要 Props，保持简洁
<BlurText text="Welcome" delay={150} animateBy="words" />

// ✅ 布局：用 Tailwind 容器包裹 react-bits 组件
<div className="relative min-h-screen overflow-hidden">
  <Aurora colorStops={["#3A29FF", "#FF94B4", "#FF3232"]} />
  <div className="relative z-10 flex items-center justify-center min-h-screen">
    <BlurText text="Hello World" className="text-6xl font-bold text-white" />
  </div>
</div>

安装说明（按需附加）

# shadcn CLI（推荐）
npx shadcn@latest add "@react-bits/BlurText-TS-TW"

# 或 jsrepo CLI
npx jsrepo add github/DavidHDev/react-bits/TextAnimations/BlurText

自然语言→组件速查表

用户用自然语言描述时，参考此表匹配组件

🎯 按效果描述查找

🎨 按风格/主题查找

📍 按页面区块查找

组件速查索引（完整列表）

格式：组件名 — 用途 | 场景标签

💬 TextAnimations（文字动画）

🌀 Animations（动画/动效）

🧩 Components（UI组件）

🖼️ Backgrounds（动态背景）

场景→组件速查

代码产出模板

Hero Section 模板

import { Aurora } from "./components/Aurora";
import { BlurText } from "./components/BlurText";
import { ShinyText } from "./components/ShinyText";

export default function HeroSection() {
  return (
    <section className="relative min-h-screen overflow-hidden bg-black">
      {/* 背景层 */}
      <Aurora
        colorStops={["#3A29FF", "#FF94B4", "#FF3232"]}
        blend={0.5}
        amplitude={1.0}
        speed={0.5}
      />

      {/* 内容层 */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen gap-6 px-4">
        <BlurText
          text="Build Something Amazing"
          delay={150}
          animateBy="words"
          className="text-5xl md:text-7xl font-bold text-white text-center"
        />
        <p className="text-lg text-white/70 max-w-2xl text-center">
          Ship stunning interfaces faster with production-ready animated
          components.
        </p>
        <button className="mt-4 px-8 py-3 rounded-full bg-white/10 backdrop-blur border border-white/20 hover:bg-white/20 transition">
          <ShinyText
            text="Get Started →"
            speed={3}
            className="text-white font-medium"
          />
        </button>
      </div>
    </section>
  );
}

Feature Cards 模板

import { SpotlightCard } from "./components/SpotlightCard";
import { GlareHover } from "./components/GlareHover";
import { CountUp } from "./components/CountUp";

const features = [
  { icon: "⚡", title: "Lightning Fast", desc: "Optimized for performance" },
  { icon: "🎨", title: "Beautiful UI", desc: "Pixel-perfect components" },
  { icon: "🔧", title: "Customizable", desc: "Tweak everything via props" },
];

export default function FeatureSection() {
  return (
    <section className="py-24 px-4 bg-neutral-950">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {features.map((f, i) => (
            <SpotlightCard
              key={i}
              className="p-8 rounded-2xl bg-neutral-900 border border-neutral-800"
            >
              <span className="text-4xl">{f.icon}</span>
              <h3 className="mt-4 text-xl font-semibold text-white">
                {f.title}
              </h3>
              <p className="mt-2 text-neutral-400">{f.desc}</p>
            </SpotlightCard>
          ))}
        </div>

        {/* 统计数据 */}
        <div className="mt-16 flex justify-center gap-16">
          <div className="text-center">
            <CountUp
              from={0}
              to={117}
              className="text-4xl font-bold text-white"
            />
            <p className="text-neutral-500 mt-1">Components</p>
          </div>
          <div className="text-center">
            <CountUp
              from={0}
              to={10000}
              separator=","
              className="text-4xl font-bold text-white"
            />
            <p className="text-neutral-500 mt-1">Downloads</p>
          </div>
        </div>
      </div>
    </section>
  );
}

多AI工具配置指南

Claude Code

将本目录添加为 skill，Claude 会自动读取 SKILL.md。

# 配置文件路径
~/.claude/skills/reactbits-ui-skills/SKILL.md

# 或使用环境变量
export CLAUDE_SKILLS_PATH=/path/to/skills

OpenCode

# 安装 skill
opcode skill add reactbits-ui-skills https://github.com/lumacoder/reactbits-ui-skills

# 或使用本地路径
opcode skill add reactbits-ui-skills /path/to/reactbits-ui-skills

Gemini CLI

# 在 .gemini/skills/ 目录下克隆
git clone https://github.com/lumacoder/reactbits-ui-skills.git ~/.gemini/skills/reactbits-ui-skills

# 或在配置中指定 skill 路径
echo '{"skills": ["/path/to/reactbits-ui-skills"]}' > ~/.gemini/config.json

GitHub Copilot

将本 SKILL.md 内容添加到 Copilot 的自定义指令中：

1. 打开 VS Code Settings
2. 搜索 "Copilot Instructions"
3. 添加本 SKILL.md 的路径

Cursor

# 将 SKILL.md 内容添加到 Cursor 的 Project Rules
# 或创建 .cursor/rules/reactbits.mdc 文件

重要提示

• 文档链接：https://reactbits.dev/text-animations/{组件名} / https://reactbits.dev/animations/{组件名} / https://reactbits.dev/components/{组件名} / https://reactbits.dev/backgrounds/{组件名}
• Pro版组件（65+ Blocks）需 Pro License：https://pro.reactbits.dev
• 组件为 copy-paste 模式，无 npm 包依赖，直接复制源码到项目中
• 部分组件依赖 framer-motion，需确保项目已安装

测试验证

使用测试工具验证 Skill 功能：

# 运行完整测试
node test/test-skill.js

# 在浏览器中打开交互式测试工具
test/interactive-test.html

测试内容包括：

1. Skill 文件结构验证
2. 自然语言→组件映射测试
3. 示例代码生成
4. Antigravity 集成检查