用途:在 React 项目中接入 React Bits(reactbits.dev)的动画 UI 组件时,从官方公共注册表实时获取真实、当前的组件源码,而不是依赖训练数据回忆。React Bits 由 David Haz 发布,共 165 个组件,分四类:Text Animations(32)、Animations(36)、Components(44)、Backgrounds(53),每个组件有 4 种变体(JS/TS × CSS/Tailwind)。
主要能力:rb-add.mjs 脚本按组件名抓取源码,写入 --dest(默认 src/components),打印该组件依赖的准确 npm install 行,--install 可直接执行安装;--list 列出全部 165 个名称;references/catalog.md 提供离线目录(含类别、描述、依赖),由 GitHub Action 每日从实时注册表重新生成。
必要用法:node scripts/rb-add.mjs <Component> [<Component>...] --variant <JS|TS>-<CSS|TW> --dest <path> [--install];无脚本时可直接抓取 https://reactbits.dev/r/<Name>-<JS|TS>-<CSS|TW>.json(files[].content 为源码)或 https://reactbits.dev/r/registry.json(索引,660 条,无源码)。
限制:硬性规则是绝不凭记忆写 React Bits 组件代码,必须实时抓取;无法访问注册表时应说明,不得退回回忆的代码。reactbits.dev 是 SPA,未知路径也返回 HTTP 200 的 HTML 外壳,状态码不能作为可信依据,须按 JSON 解析正文。CSS 变体为多文件(组件文件加同名 .css,两者都要写入);TW 变体为单文件。10 个组件依赖作用域包(如 PixelTrail → @react-three/fiber@^9.3.0),不应自行按 @ 拆分依赖字符串。registry.json 无 category 字段,类别仅见于 catalog.md。verbatimModuleSyntax 为 true 的 TS 项目需把类型导入拆成单独的 import type。抓取后应先读文件自身的 prop 类型,不要猜 prop 名或默认值。上游仓库在 DavidHDev/react-bits/AGENTS/SKILLS/ 另提供动画评审类技能,本技能未包含。费用、平台等信息暂未提供。