mcpField
R
react-bits

react-bits

github.com/philotheephilix设计与 UI7319 次安装5 周前更新
代码仓库

关于 react-bits

react-bits 是面向开发者和编码 Agent 的技能，用于添加 React Bits 组件。它从公开注册表获取当前源码和依赖，避免依赖可能过时的记忆内容。

主要功能

  1. 01获取实时组件源码
  2. 02支持 JS 和 TS 变体
  3. 03支持 CSS 和 Tailwind 变体
  4. 04列出组件及其依赖
  5. 05将源码写入指定目录

适用场景

  1. 01添加当前版本的 React Bits 组件
  2. 02集成前核对组件实际属性
  3. 03安装组件对应的依赖

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/philotheephilix/reactbits.dev-skill --skill react-bits

安装后在 Claude Code 中输入/react-bits确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
catalog.md
scripts/
gen-catalog.mjs
rb-add.mjs

详细介绍

React Bits

从 React Bits 公共注册表获取真实、最新的组件源码，而不是从训练数据中回忆。React Bits（reactbits.dev，MIT + Commons Clause，由 David Haz 创建）发布了 165 个动画组件，涵盖 Text Animations、Animations、Components、Backgrounds，每个组件都有 4 种变体（JS/TS × CSS/Tailwind）。

核心规则

绝不要凭记忆编写 React Bits 组件代码。始终实时获取。

已验证的失败模式（基线测试，未使用技能）：要求生成 Aurora + BlurText 时，Agent 幻觉出了看似合理的代码，将依赖猜成 framer-motion（实际使用的是 motion），还编造了默认属性值；只有在明确追问后才承认是在猜。代码看起来完整且可以交付，实际上并非最新版本。

训练数据会过时；此库会同步更新各个变体。如果无法访问注册表，请如实说明，不要退而使用回忆中的代码。

获取

node scripts/rb-add.mjs <Component> [<Component>...] --variant <JS|TS>-<CSS|TW> --dest <path> [--install]
node scripts/rb-add.mjs --list                      # print all 165 names

将真实源码文件写入 --dest（默认为 src/components），并打印该组件依赖项对应的准确 npm install 命令行（默认变体：TS-TW）。--install 会代为运行安装命令。

无法访问脚本？直接获取——使用相同的注册表和规则：

curl -s https://reactbits.dev/r/<Name>-<JS|TS>-<CSS|TW>.json   # one component, files[].content = source
curl -s https://reactbits.dev/r/registry.json                  # index, 660 entries, no source, no category field

reactbits.dev 是一个 SPA——未知路径仍会返回带有 HTML 外壳的 HTTP 200 响应。200 状态码并不能证明任何内容；请将响应正文解析为 JSON 并检查，然后再信任它。

工作流

  1. 确认变体——JS 还是 TS，CSS 还是 Tailwind。默认与项目现有文件保持一致；确实无法确定时再询问。
  2. 查找组件——搜索 references/catalog.md（离线目录，包含 165 个条目及其类别、描述和依赖项），或使用 --list。
  3. 使用上面的 rb-add.mjs 获取组件。绝不要手动编写文件。
  4. 接线前，先阅读获取到的文件自身的属性类型/接口定义。 即使组件是刚获取的，也不要猜测属性名称或默认值——查看文件中的实际定义。
  5. 安装打印出的依赖项（或传入 --install）。

注意事项

  • 作用域包依赖会导致简单解析出错。 10 个组件依赖作用域包，例如 PixelTrail → @react-three/fiber@^9.3.0。按 @ 拆分依赖字符串以提取包名，会得到 ""。rb-add.mjs 能正确解析（/^(@[^/]+\/[^@]+|[^@]+)@?(.*)$/）；不要手动重新实现这段逻辑。
  • CSS 变体由多个文件组成。 JS-CSS/TS-CSS 会提供一个组件文件和一个同级 .css 文件（两者都必须写入）。JS-TW/TS-TW 是单文件，使用 Tailwind 实用类。
  • 注册表中没有类别字段。 registry.json 只有 name/title/deps/files。类别（Text Animations / Animations / Components / Backgrounds）仅存在于 references/catalog.md（来源为 reactbits.dev/llms.txt）。
  • verbatimModuleSyntax TS 项目：部分获取到的文件会在同一个 import {...} 语句中导入类型和值（例如 import { motion, Transition } from 'motion/react'）——如果项目的 tsconfig 中 verbatimModuleSyntax: true，请拆分为单独的 import type {...}。这是机械性的修正，并不意味着需要重写组件。

类别（共 165 个）

Text Animations（32 个）· Animations（36 个）· Components（44 个）· Backgrounds（53 个）。带单行描述和依赖项的完整列表见：references/catalog.md——GitHub Action 每天都会从实时注册表重新生成该文件，因此无需更新技能也能保持最新。手动刷新：node scripts/gen-catalog.mjs。

安装后

如需对刚接入的动画进行 craft-bar 审查（缓动、时长、频率适切性、减少动态效果），上游仓库在 DavidHDev/react-bits/AGENTS/SKILLS/ 中提供了独立技能（review-animations、improve-animations、find-animation-opportunities、apple-design）——此处不包含这些技能，它们关注的是不同事项（craft 审查，而非正确获取/安装）。

评论

支持 Markdown