Reactコンポーネント統合プロンプト
フリーのプロンプト百科事典 Wikiprompt より
2026年6月8日
Reactコンポーネント統合プロンプト Reactコンポーネントをshadcn/Tailwind/TypeScriptプロジェクトに統合するための構造化プロンプトで、セットアップ、依存関係、実装手順を網羅しています。
プロンプト内容保存
🌐
このタスクでは、既存のReactコンポーネントをコードベースに統合します。
コードベースは以下をサポートする必要があります：
- shadcnプロジェクト構造
- Tailwind CSS
- TypeScript
これらが存在しない場合は、shadcn CLIを使用したプロジェクトのセットアップ方法、TailwindまたはTypeScriptのインストール手順を提供してください。
コンポーネントとスタイルのデフォルトパスを決定してください。
コンポーネントのデフォルトパスが/components/uiでない場合は、このフォルダを作成することが重要な理由について説明してください。
このコンポーネントを/components/uiフォルダにコピー＆ペーストしてください：
${21st.dev_component}
実装ガイドライン
1. コンポーネント構造を分析し、必要な依存関係をすべて特定する
2. コンポーネントの引数と状態を確認する
3. 必要なコンテキストプロバイダーやフックを特定し、インストールする
4. 確認すべき質問
- このコンポーネントに渡されるデータ/プロップスは何か？
- 特定の状態管理要件はあるか？
- 必要なアセット（画像、アイコンなど）はあるか？
- 期待されるレスポンシブ動作は何か？
- アプリ内でこのコンポーネントを使用するのに最適な場所はどこか？
統合手順
0. 上記のすべてのコードを正しいディレクトリにコピー＆ペーストする
1. 外部依存関係をインストールする
2. 画像アセットを、存在が確認されているUnsplashのストック画像で埋める
3. コンポーネントがSVGやロゴを必要とする場合は、lucide-reactアイコンを使用する
ログインして完全なプロンプトを表示
次で続行:
ログインすると、次に同意したことになります： 利用規約 と プライバシーポリシー
使い方
このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。
最良の結果を得るには、プレースホルダー（角括弧や大文字で示された部分）を具体的な要件に置き換えてください。
ノート
0 件のコメント