Artifacts Builder
強力なフロントエンドのclaude.aiアーティファクトを構築するには、次の手順に従ってください：
scripts/init-artifact.shを使用してフロントエンドリポジトリを初期化する- 生成されたコードを編集してアーティファクトを開発する
scripts/bundle-artifact.shを使用してすべてのコードを単一のHTMLファイルにバンドルする- アーティファクトをユーザーに表示する
- （任意）アーティファクトをテストする
スタック: React 18 + TypeScript + Vite + Parcel（バンドリング）+ Tailwind CSS + shadcn/ui
デザインとスタイルのガイドライン
非常に重要：「AIスロップ」と呼ばれるものを避けるため、過度な中央揃えレイアウト、紫色のグラデーション、均一な角丸、Interフォントの使用を避けてください。
クイックスタート
ステップ1：プロジェクトの初期化
初期化スクリプトを実行して新しいReactプロジェクトを作成します：
bash scripts/init-artifact.sh <project-name>
cd <project-name>
これにより、完全に設定されたプロジェクトが作成されます：
- ✅ React + TypeScript（Vite経由）
- ✅ Tailwind CSS 3.4.1とshadcn/uiテーマシステム
- ✅ パスエイリアス（
@/）が設定済み - ✅ 40以上のshadcn/uiコンポーネントがプリインストール
- ✅ すべてのRadix UI依存関係が含まれています
- ✅ Parcelがバンドリング用に設定済み（.parcelrc経由）
- ✅ Node 18+互換性（Viteバージョンを自動検出して固定）
ステップ2：アーティファクトの開発
アーティファクトを構築するには、生成されたファイルを編集します。詳細なガイダンスについては、以下の「一般的な開発タスク」を参照してください。
ステップ3：単一HTMLファイルへのバンドル
Reactアプリを単一のHTMLアーティファクトにバンドルするには：
bash scripts/bundle-artifact.sh
これにより bundle.html が作成されます。これはすべてのJavaScript、CSS、依存関係がインライン化された自己完結型のアーティファクトであり、Claudeの会話でアーティファクトとして直接共有できます。
必要条件: プロジェクトのルートディレクトリに index.html が必要です。
スクリプトの動作:
- バンドリング依存関係（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）をインストール
- パスエイリアスサポート付きの
.parcelrc設定を作成 - Parcelでビルド（ソースマップなし）
- html-inlineを使用してすべてのアセットを単一HTMLにインライン化
ステップ4：ユーザーとのアーティファクト共有
最後に、バンドルされたHTMLファイルをユーザーとの会話で共有し、アーティファクトとして表示できるようにします。
ステップ5：アーティファクトのテスト/可視化（任意）
注：これは完全に任意のステップです。必要または要求された場合にのみ実行してください。
アーティファクトをテスト/可視化するには、利用可能なツール（他のスキルやPlaywright、Puppeteerなどの組み込みツールを含む）を使用します。一般的には、リクエストから完成したアーティファクトが表示されるまでのレイテンシが増加するため、事前にアーティファクトをテストすることは避けてください。問題が発生した場合や要求があった場合に、アーティファクトを提示した後にテストしてください。
リファレンス
- shadcn/ui コンポーネント: https://ui.shadcn.com/docs/components