mcpField
R
react-bits

react-bits

github.com/philotheephilixデザイン・UI7319 回インストール5 週間前に更新
リポジトリ

react-bits について

react-bitsは、React Bitsのコンポーネントを追加する開発者やコーディングエージェント向けのスキルです。公開レジストリから最新のソースと依存関係を取得し、古い記憶に頼らない手順を示します。

主な機能

  1. 01最新のコンポーネントソース取得
  2. 02JSとTSのバリアント対応
  3. 03CSSと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 による）は、Text Animations、Animations、Components、Backgrounds の165種類のアニメーションコンポーネントを公開しており、それぞれに4つのバリエーション（JS/TS × CSS/Tailwind）があります。

絶対に守るルール

React Bits のコンポーネントコードを記憶から書いてはいけません。必ずその場で取得してください。

確認済みの失敗例（スキルなしのベースラインテスト）：Aurora + BlurText を依頼されたエージェントが、もっともらしいコードを捏造し、依存関係として 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 を grep します（オフラインで使用でき、カテゴリ、説明、依存関係を含む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 プロジェクト：取得したファイルの中には、値と型を1つの import {...} 文でインポートするものがあります（例：import { motion, Transition } from 'motion/react'）。プロジェクトの tsconfig で verbatimModuleSyntax: true が設定されている場合は、別の import type {...} に分けてください。これは機械的な修正であり、コンポーネントを書き直す理由にはなりません。

カテゴリ（合計165件）

Text Animations（32） · Animations（36） · Components（44） · Backgrounds（53）。1行の説明と依存関係を含む全一覧：references/catalog.md — GitHub Action がライブレジストリから毎日再生成するため、スキルを更新しなくても最新の状態に保たれます。手動で更新するには node scripts/gen-catalog.mjs を実行してください。

インストール後

接続したモーションのクラフトバー・レビュー（イージング、継続時間、頻度の適切さ、モーション低減）には、上流リポジトリの個別スキル DavidHDev/react-bits/AGENTS/SKILLS/（review-animations、improve-animations、find-animation-opportunities、apple-design）を利用してください。これらはここには同梱されておらず、別の関心事（クラフトのレビューと、正確な取得・インストール）を扱います。

コメント

Markdown 対応