react-bits

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Bits

Fetches real, current component source from the React Bits public registry instead of recalling it from training data. React Bits (reactbits.dev, MIT + Commons Clause, by David Haz) publishes 165 animated components — Text Animations, Animations, Components, Backgrounds — each in 4 variants (JS/TS × CSS/Tailwind).

本skill从React Bits公共注册表获取真实、最新的组件源码，而非从训练数据中回忆。React Bits（reactbits.dev，采用MIT + Commons Clause许可证，作者David Haz）发布了165个动画组件——涵盖文字动画、动效、组件、背景四类——每个组件都有4种变体（JS/TS × CSS/Tailwind）。

The hard rule

硬性规则

Never write React Bits component code from memory. Always fetch it live.

Verified failure mode (baseline test, no skill): asked for Aurora + BlurText, an agent hallucinated plausible-looking code, guessed

framer-motion

as a dependency (the live package is

motion

), invented prop defaults, and only disclosed the guessing when explicitly asked. The code looked complete and shippable. It wasn't current.

Training data goes stale; this library updates variants in sync. If you can't reach the registry, say so — don't fall back to recalled code.

绝对不要凭记忆编写React Bits组件代码，必须实时拉取。

已验证的失败模式（未使用本skill的基线测试）：当被要求提供Aurora + BlurText组件时，Agent会生成看似合理的幻觉代码，猜测依赖为

framer-motion

（实际官方包是

motion

），凭空编造props默认值，且只有在被明确询问时才会承认是猜测的。这些代码看起来完整可上线，但并不是最新版本。

训练数据会过时，而该组件库的变体会同步更新。如果你无法访问注册表，请明确说明——不要退而求其次使用记忆中的代码。

Fetch

拉取方法

bash

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

Writes real source files to

--dest

(default

src/components

) and prints the exact

npm install

line for that component's dependencies (default variant:

TS-TW

--install

runs it for you.

No script access? Fetch directly — same registry, same rules:

bash

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 is an SPA — an unknown path still returns HTTP 200 with an HTML shell. A 200 status proves nothing; parse the body as JSON and check it before trusting it.

bash

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

参数会自动执行安装。

无法使用脚本？可以直接拉取——使用同一个注册表，规则不变：

bash

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——即使访问未知路径也会返回HTTP 200状态码和HTML外壳。200状态码不代表请求成功，请将响应体解析为JSON并校验后再使用。

Workflow

工作流程

Confirm the variant — JS or TS, CSS or Tailwind. Default to matching the project's existing files; ask if genuinely ambiguous.
Find the component — grep references/catalog.md (offline, 165 entries with category + description + deps) or
```
--list
```
.
Fetch it with
```
rb-add.mjs
```
(above). Never hand-write the file.
Read the fetched file's own prop type/interface before wiring it up. Don't guess prop names or defaults even for a component you fetched — read what's actually in the file.
Install the printed dependencies (or pass
```
--install
```
).

确认变体类型 —— 选择JS或TS，CSS或Tailwind。默认与项目现有文件保持一致；如果确实不明确，询问用户。
查找组件 —— 可以grep搜索references/catalog.md（离线文件，包含165个条目的分类、描述和依赖），或者使用
```
--list
```
参数。
拉取组件 —— 使用上述的
```
rb-add.mjs
```
脚本，绝对不要手动编写组件文件。
在接入组件前，先阅读拉取到的文件中自带的props类型/接口定义。 即使是你刚拉取的组件，也不要猜测props名称或默认值——请直接读取文件中的实际内容。
安装输出的依赖（或者加上
```
--install
```
参数自动安装）。

Gotchas

注意事项

Scoped-package deps break naive parsing. 10 components depend on scoped packages, e.g.
```
PixelTrail
```
→
```
@react-three/fiber@^9.3.0
```
. Splitting a dep string on
```
@
```
to get the name yields
```
""
```
for these.
```
rb-add.mjs
```
parses correctly (
```
/^(@[^/]+\/[^@]+|[^@]+)@?(.*)$/
```
); don't reimplement this by hand.
CSS variants are multi-file.
```
JS-CSS
```
/
```
TS-CSS
```
ship a component file and a sibling
```
.css
```
file (both must be written).
```
JS-TW
```
/
```
TS-TW
```
are single-file with Tailwind utility classes.
No category field in the registry.
```
registry.json
```
has name/title/deps/files only. Category (Text Animations / Animations / Components / Backgrounds) lives only in
```
references/catalog.md
```
(sourced from
```
reactbits.dev/llms.txt
```
).
verbatimModuleSyntax
TS projects: some fetched files import types alongside values in one
```
import {...}
```
statement (e.g.
```
import { motion, Transition } from 'motion/react'
```
) — split into a separate
```
import type {...}
```
if the project's tsconfig has
```
verbatimModuleSyntax: true
```
. This is a mechanical fix, not a reason to rewrite the component.

作用域包依赖会导致简单解析失效。 有10个组件依赖作用域包，例如
```
PixelTrail
```
→
```
@react-three/fiber@^9.3.0
```
。如果简单地用
```
@
```
分割依赖字符串来获取包名，这类依赖的包名会变成空字符串。
```
rb-add.mjs
```
中已有正确的解析逻辑（正则为
```
/^(@[^/]+\/[^@]+|[^@]+)@?(.*)$/
```
），不要手动重新实现。
CSS变体是多文件结构。
```
JS-CSS
```
/
```
TS-CSS
```
变体包含一个组件文件和一个同级的
```
.css
```
文件（两者都必须写入）。
```
JS-TW
```
/
```
TS-TW
```
变体是单文件结构，使用Tailwind工具类。
注册表中没有分类字段。
```
registry.json
```
仅包含名称/标题/依赖/文件信息。分类（文字动画/动效/组件/背景）仅存在于
```
references/catalog.md
```
中（数据来源为
```
reactbits.dev/llms.txt
```
）。
开启
verbatimModuleSyntax
的TS项目：部分拉取的文件会在同一个
```
import {...}
```
语句中同时导入类型和值（例如
```
import { motion, Transition } from 'motion/react'
```
）——如果项目的tsconfig中设置了
```
verbatimModuleSyntax: true
```
，请将类型导入拆分到单独的
```
import type {...}
```
语句中。这是机械性的修复，不需要重写组件。

Categories (165 total)

分类（共165个）

Text Animations (32) · Animations (36) · Components (44) · Backgrounds (53). Full list with one-line descriptions and dependencies: references/catalog.md — a GitHub Action regenerates it daily from the live registry, so it stays current without a skill update. Manual refresh:

node scripts/gen-catalog.mjs

文字动画（32个）· 动效（36个）· 组件（44个）· 背景（53个）。包含单行描述和依赖的完整列表见：references/catalog.md——有一个GitHub Action每天会从实时注册表重新生成该文件，因此无需更新skill就能保持内容最新。手动刷新命令：

node scripts/gen-catalog.mjs

。

After installing

安装完成后

For a craft-bar review of the motion you just wired up (easing, duration, frequency-appropriateness, reduced-motion), the upstream repo ships separate skills at

DavidHDev/react-bits/AGENTS/SKILLS/

(

review-animations

improve-animations

find-animation-opportunities

apple-design

) — not bundled here, distinct concern (craft review vs. correct fetch/install).

如果你想对刚接入的动效做工艺级评审（缓动、时长、频率合理性、减少动效适配），上游仓库在

DavidHDev/react-bits/AGENTS/SKILLS/

路径下提供了独立的skill（

review-animations

、

improve-animations

、

find-animation-opportunities

、

apple-design

）——这些skill未包含在本skill中，属于不同的关注点（工艺评审 vs. 正确拉取/安装）。