Claude / Cursor に貼る React コンポーネントの渡し方
公開日: 2026年9月12日 · 読了目安 8 分
コーディングエージェントにモーション付き React セクションを渡す型。統合指示、配置パス、依存、ブランド差し替え。無料枠の使い方。
先に結論：コードだけ貼らない
TSX だけをチャットに貼ると、エージェントは配置先と依存を推測します。統合指示（どこに置く、何を差し替える、どの npm が要るか）が先にあると、差分が小さくなります。
Cursor の Composer / Agent でも、Claude のチャットでも、型は同じです。
カタログ側の包みがあるなら、それをそのまま貼り、短い指示だけ足します。
渡す4点
1. 配置パス。app/(marketing)/page.tsx と components/sections/Hero.tsx など。
2. 依存。framer-motion や lucide-react。
3. 差し替え。見出し、CTA、リンク、画像。
4. 制約。既存トークンに合わせる、page 全体をクライアントにしない。
指示文の型
「この React セクションを既存の Next.js アプリに追加する。Tailwind のクラスはそのまま。足りない npm 依存を package.json に入れて。見出し・CTA・リンクをプロダクト名に差し替える。配置は components/sections/ にして、page から読み込む。」
よくある失敗
失敗1：エラー文を貼らずに「直して」とだけ言う。失敗2：画像 URL を空にする。デモ URL を残し、壊れているときだけ差し替えます。失敗3：同じ日に何本も試し、無料枠を溶かす。
DesignLayer の Copy for Cursor
統合指示 + TSX + デモノート + npm 依存が1セットです。無料は日本時間で1日3回です。MCP なら get_component が同じ包みです。
手順の全体は https://design-layer.com/articles/cursor-react-motion-components-guide です。閲覧はカード不要です。