Copy for Cursorの使い方

最終更新日: 2026年8月25日

Copy for Cursor で取得した TSX を Cursor Composer や Claude に貼り、Next.js / Tailwind プロジェクトへ組み込む手順。依存の入れ方とプロンプト例。

コピーに含まれるもの

Copy for Cursor は、セクション本体の TSX と、エージェントが読みやすい包みをまとめたテキストです。ファイル分割や import パスは、貼り付け先の App Router / Pages Router に合わせてエージェントが直します。

無料枠はコンポーネント 1 日 1 回（日本時間）。Templates の完成 1 ページをコピーする場合は Pro です。

Composer または Agent にコピー全文を貼り、次のように指示します。「この React セクションを既存の Next.js アプリに追加する。Tailwind のクラスはそのまま。足りない npm 依存を入れて。見出し・CTA・リンクをうちのプロダクト名に差し替える。」

パスの例として app/(marketing)/page.tsx や components/sections/ を指定すると、置き場所が安定します。

Projects にリポジトリを載せている場合は、同じ TSX をチャットに貼り、対象ファイルを指定します。ローカル CLI を使っている場合も、コンテキストにコンポーネントを載せたうえで「既存の layout のトークン（色・余白）に合わせて」と書くと、ブランドから外れにくくなります。

セクションによっては framer-motion や lucide-react が必要です。インストールエラーが出たら、コピー内の import をエージェントに読ませて package.json を更新させます。

動きのイージングや delay は、プレビューで確認した値を起点に、ページ全体のテンポに合わせて調整してください。