reactbits-ui-skills

React Bits UI スキル

役割：あなたは React Bits フレームワークのエキスパートです。ユーザーからフロントエンドのページや UI コンポーネントの開発を求められた場合、必ず React Bits コンポーネントライブラリから最適なコンポーネントを優先的に選択して組み合わせ、すぐにコピーして使える標準化されたコードスニペットを出力してください。

基本原則

1. フレームワークを優先：ビジュアルやアニメーションに関する要件は、まずコンポーネント一覧を確認し、該当するものがあれば必ず使用します
2. コンポーネントに集中：ページ／コンポーネントのコードのみを出力し、スキャフォールディング、ルーティング、ビルド設定には触れません
3. デフォルトのバリアント：TS + Tailwind（TS-TW）。ユーザーから明確な指定があれば切り替えます
4. 完全なコード：import、Props、スタイルを含む、完全に実行可能なコードブロックを出力します
5. 自然言語の理解：ユーザーが自然言語で要件を説明した場合、意図を自動的に解析してコンポーネントに割り当てます

3 ステップのワークフロー

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

❶ 意図の解析（自然言語→構造化された要件）

ユーザーの説明から、以下の項目を抽出します。

項目	キーワードの例	対応するコンポーネントの種類
ページの種類	ランディングページ、公式サイト、ダッシュボード、データの大型表示画面、プロフィールページ、ポートフォリオ	全体的なレイアウトを決定
ビジュアルスタイル	近未来的、ミニマル、サイバーパンク、エレガント、レトロ、ゲーム風	背景と配色を決定
セクションの要件	見出し、カード、ナビゲーション、データ表示、ギャラリー	具体的なコンポーネントを決定
アニメーションの強さ	派手、控えめ、静的	アニメーションの複雑さを決定

解析例：

• ユーザーが「近未来的な大見出しを作って」と言った場合 → ヒーローセクション + 近未来的な背景 + テキストアニメーションが必要です
• ユーザーが「マウスを乗せるとエフェクトが出るデータカード」と言った場合 → SpotlightCard/GlareHover + CountUpが必要です
• ユーザーが「Mac のような下部ナビゲーション」と言った場合 → Dockが必要です

❷ コンポーネントのスマートなマッチング

ルール1：自然言語のキーワード→コンポーネントのマッピング

ユーザーの説明に含まれるキーワードを、対応するコンポーネントに自動的にマッピングします。

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

ルール2：シーンに応じた組み合わせの提案

よくあるシーンに応じて、複数のコンポーネントを自動的に組み合わせます。

シーン	自動組み合わせの案
SaaS ランディングページ	Aurora 背景 + BlurText 見出し + SpotlightCard 特長カード + ShinyText CTA
データの大型表示画面	Particles 背景 + DecryptedText 見出し + CountUp 数値 + AnimatedList
ポートフォリオ	Silk 背景 + ScrollFloat 見出し + Masonry ギャラリー + ProfileCard
テクノロジー企業の公式サイト	Beams 背景 + SplitText 見出し + MagicBento グリッド + Dock ナビゲーション
サイバーパンク風	FaultyTerminal 背景 + GlitchText + PixelCard + LaserFlow ボーダー
ミニマルなビジネス向け	DotGrid 背景 + ScrollReveal テキスト + FloatingLines 区切り

ルール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

自然言語→コンポーネント クイックリファレンス

ユーザーが自然言語で要件を説明した場合は、この表を参考にコンポーネントを選択します

🎯 エフェクトの説明から検索

ユーザーの説明	推奨コンポーネント	説明
「大見出しにアニメーションを付けたい」／「テキストをフェードインさせたい」	BlurText	最も汎用的な見出しアニメーション
「文字を一文字ずつ表示したい」	SplitText	文字ごとに分割するアニメーション
「解読するようにテキストを表示したい」	DecryptedText	近未来的な解読エフェクト
「グリッチ風の文字」	GlitchText	サイバーパンク風のグリッチ
「光沢が走る」／「キラキラ光る」	ShinyText	CTA ボタンのテキスト
「数字を0からカウントアップしたい」／「数字のアニメーション」	CountUp	統計数値のアニメーション
「マウスを乗せると光る」／「スポットライト」	SpotlightCard	カードの光のエフェクト
「3D 傾斜カード」	TiltedCard	マウスに追従して傾斜
「ガラスエフェクト」／「すりガラス」	GlassSurface	ガラス質感のコンテナ
「オーロラ背景」	Aurora	暗い色調のグラデーション背景
「パーティクル背景」／「星空エフェクト」	Particles	近未来的なパーティクル
「Mac の下部ナビゲーション」／「Dock バー」	Dock	macOS 風のナビゲーション
「カードをめくるように切り替えたい」	CardSwap	カードの反転
「画像を滝のように並べたい」	Masonry	ウォーターフォールレイアウト
「画像を円形に並べたい」	CircularGallery	円形ギャラリー

🎨 スタイル／テーマから検索

スタイル	背景	テキスト	カード	その他
近未来的／SF	Particles, GridScan, Beams	DecryptedText, GlitchText	SpotlightCard	LaserFlow
サイバーパンク	FaultyTerminal, LetterGlitch	GlitchText, ScrambledText	PixelCard	ElectricBorder
ミニマル／ビジネス向け	DotGrid, FloatingLines	BlurText, ScrollReveal	GlassSurface	FadeContent
エレガント／高級感	Silk, Aurora, Iridescence	GradientText, ScrollFloat	ReflectiveCard	Magnet
ゲーム／レトロ	PixelBlast, Balatro	FuzzyText, ASCIIText	PixelCard	ClickSpark
クリエイティブ／アート	LiquidChrome, LiquidEther	VariableProximity, CircularText	ImageTrail	SplashCursor

📍 ページのセクションから検索

セクション	中核コンポーネント	任意の組み合わせ
ヒーローのファーストビュー	Aurora／Silk 背景 + BlurText 見出し	ShinyText CTA、ScrollFloat サブ見出し
特長の紹介	SpotlightCard カードのグリッド	CountUp 統計、GlareHover ホバー
データ統計	CountUp 数値 + Counter	AnimatedList リスト表示
料金ページ	TiltedCard／ReflectiveCard	StarBorder おすすめマーク
チーム紹介	ProfileCard + CircularGallery	OrbitImages 軌道表示
作品ギャラリー	Masonry ウォーターフォール	ImageTrail 追従エフェクト
下部ナビゲーション	Dock macOS 風	PillNav ピル型ナビゲーション
お客様の声	AnimatedList アニメーション付きリスト	ScrollReveal スクロール表示

コンポーネント クイックリファレンス一覧（全コンポーネント）

形式：コンポーネント名 — 用途 | シーンタグ

💬 TextAnimations（文字动画）

组件	用途	场景
ASCIIText	ASCII字符艺术文字	极客风、创意着陆页
BlurText	模糊淡入文字动画	Hero标题、首屏
CircularText	环形旋转文字	徽章、Logo装饰
CountUp	数字递增动画	数据统计、成就展示
CurvedLoop	曲线循环文字	品牌标语、装饰
DecryptedText	解密效果文字	科技感、安全主题
FallingText	物理掉落文字	趣味交互、游戏风
FuzzyText	模糊抖动文字	艺术感标题
GlitchText	故障风格文字	赛博朋克、科技感
GradientText	渐变色文字	品牌标题、强调文案
RotatingText	文字轮播切换	多功能描述、Tagline
ScrambledText	乱码解码文字	Hover交互、揭示
ScrollFloat	滚动浮动文字	长页面、阅读体验
ScrollReveal	滚动渐显文字	内容区域标题
ScrollVelocity	速度感滚动文字	跑马灯、品牌展示
ShinyText	光泽扫过文字	CTA按钮文案、徽章
Shuffle	文字洗牌动画	列表切换、随机展示
SplitText	逐字/逐词分裂动画	首屏标题动效
TextCursor	光标跟随文字	打字机效果
TextPressure	鼠标压力感应文字	交互式标题
TextType	打字机效果	代码展示、Bot消息
TrueFocus	聚焦高亮文字	关键词强调
VariableProximity	鼠标距离变形文字	交互式Hero

🌀 Animations（动画/动效）

组件	用途	场景
AnimatedContent	内容进退场动画	通用内容动效包裹
Antigravity	反重力悬浮效果	创意展示
BlobCursor	流体光标跟随	全局光标美化
ClickSpark	点击火花效果	点击反馈、趣味交互
Crosshair	十字准星光标	精准/科技主题
Cubes	3D立方体动画	科技背景、加载
ElectricBorder	电流边框效果	卡片/按钮高亮
FadeContent	淡入淡出内容	通用内容切换
GhostCursor	幽灵跟随光标	光标拖尾效果
GlareHover	眩光悬停效果	卡片Hover
GradualBlur	渐进模糊动画	内容渐显
ImageTrail	图片拖尾效果	创意画廊、艺术
LaserFlow	激光流动效果	科技风边框
LogoLoop	Logo无限循环	合作品牌展示
Magnet	磁吸效果	按钮/元素交互
MagnetLines	磁力线条动画	交互式背景
MetaBalls	融球效果	抽象艺术、加载
MetallicPaint	金属漆质感	高端质感展示
Noise	噪点/颗粒效果	质感叠加
OrbitImages	轨道旋转图片	产品/团队展示
PixelTrail	像素拖尾	光标效果
PixelTransition	像素化转场	图片/页面切换
Ribbons	丝带飘动效果	装饰性背景
ShapeBlur	形状模糊动画	抽象装饰
SplashCursor	泼墨光标效果	创意/艺术站点
StarBorder	星光边框动画	卡片/按钮装饰
StickerPeel	贴纸撕开效果	趣味卡片交互
TargetCursor	目标瞄准光标	游戏/竞技主题

🧩 Components（UI组件）

组件	用途	场景
AnimatedList	列表进场动画	动态列表、通知流
BounceCards	弹跳卡片组	团队/产品展示
BubbleMenu	气泡弹出菜单	悬浮工具栏
CardNav	卡片导航	分类导航
CardSwap	卡片翻转切换	Before/After对比
Carousel	轮播组件	图片/内容轮播
ChromaGrid	色彩网格	图片网格展示
CircularGallery	环形画廊	作品集展示
Counter	动画计数器	统计数据展示
DecayCard	衰变卡片	时间线/历史
Dock	macOS风格Dock	底部导航栏
DomeGallery	穹顶画廊	沉浸式画廊
ElasticSlider	弹性滑块	范围选择器
FlowingMenu	流动菜单	全屏导航
FluidGlass	流体玻璃效果	磨砂玻璃卡片
FlyingPosters	飞行海报	作品/产品展示
Folder	文件夹组件	文件管理UI
GlassIcons	玻璃态图标	功能图标组
GlassSurface	玻璃质感表面	毛玻璃容器
GooeyNav	粘连导航	底部Tab导航
InfiniteMenu	无限滚动菜单	3D菜单
Lanyard	挂绳/吊牌	个人名片
MagicBento	魔法Bento网格	功能展示网格
Masonry	瀑布流布局	图片/作品瀑布流
ModelViewer	3D模型查看器	产品3D展示
PillNav	胶囊导航	Tab切换
PixelCard	像素风卡片	游戏/复古风
ProfileCard	个人资料卡	用户/团队展示
ReflectiveCard	反射卡片	高端产品展示
ScrollStack	滚动堆叠	特性逐层展示
SpotlightCard	聚光灯卡片	核心功能展示
Stack	堆叠卡片	通知/消息堆叠
StaggeredMenu	交错出场菜单	移动端菜单
Stepper	步骤条	表单流程/引导
TiltedCard	倾斜卡片	3D视差卡片

🖼️ Backgrounds（动态背景）

组件	用途	场景
Aurora	极光背景	Hero、暗色主题
Balatro	扑克牌纹理背景	游戏/趣味
Ballpit	球坑物理效果	趣味/创意
Beams	光束效果	科技/SaaS
ColorBends	色彩弯曲	艺术/创意
DarkVeil	暗幕背景	暗色Hero
Dither	抖动/点阵	复古风
DotGrid	点阵网格	极简/技术文档
FaultyTerminal	故障终端	开发者/黑客风
FloatingLines	浮动线条	极简/商务
Galaxy	星系背景	太空/科幻
GradientBlinds	渐变百叶窗	过渡区域
Grainient	噪点渐变	高端/质感
GridDistortion	网格扭曲	交互式背景
GridMotion	网格运动	图片网格背景
GridScan	网格扫描	科技/安全
Hyperspeed	超速星际	加载/过渡
Iridescence	虹彩效果	高端/时尚
LetterGlitch	字母故障	科技背景
LightPillar	光柱效果	聚焦/高亮
LightRays	光线放射	展示/发布
Lightning	闪电效果	力量/能量
LiquidChrome	液态铬	高端/金属
LiquidEther	液态以太	梦幻/流动
Orb	光球	装饰/背景点缀
Particles	粒子效果	通用科技背景
PixelBlast	像素爆炸	游戏/冲击
PixelSnow	像素雪花	季节/节日
Plasma	等离子体	科幻/能量
Prism	棱镜折射	色彩/艺术
PrismaticBurst	棱镜爆发	发布/庆典
RippleGrid	涟漪网格	交互式背景
Silk	丝绸流动	优雅/时尚
Squares	方块动画	极简/几何
Threads	线程/纤维	科技/连接
Waves	波浪效果	分区过渡

场景→组件速查

场景需求	推荐组合
Hero首屏	Aurora/Silk背景 + BlurText/SplitText标题 + ShinyText CTA
功能展示	SpotlightCard/MagicBento卡片 + Counter统计 + GlareHover悬停
团队/作品	CircularGallery/Masonry画廊 + ProfileCard人物卡
品牌合作	LogoLoop品牌墙 + ScrollVelocity跑马灯
定价页	TiltedCard/ReflectiveCard价格卡 + StarBorder推荐标记
导航/菜单	Dock/PillNav/GooeyNav导航 + FlowingMenu全屏菜单
科技/开发者	FaultyTerminal/Particles背景 + DecryptedText/GlitchText文字
数据统计	CountUp数字 + Counter组件 + AnimatedList列表

代码产出模板

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 集成检查