Artifacts Builder

強力なフロントエンド claude.ai アーティファクトを構築するには、以下のステップに従ってください:

1. scripts/init-artifact.sh を使用してフロントエンドリポジトリを初期化します
2. 生成されたコードを編集してアーティファクトを開発します
3. scripts/bundle-artifact.sh を使用してすべてのコードを単一のHTMLファイルにバンドルします
4. アーティファクトをユーザーに表示します
5. (オプション) アーティファクトをテストします

スタック: React 18 + TypeScript + Vite + Parcel (バンドリング) + Tailwind CSS + shadcn/ui

デザイン・スタイルガイドライン

非常に重要: いわゆる「AI slop」を避けるために、過度に中央配置されたレイアウト、紫色のグラデーション、一様に丸みを帯びたコーナー、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: アーティファクトの開発

アーティファクトを構築するには、生成されたファイルを編集します。ガイダンスについては、以下の一般的な開発タスクを参照してください。 開発中に設計選択または機能をユーザーと確認する必要がある場合は、利用可能な場合 mcp-feedback-enhanced (例: ask_followup_question) を使用してください。

ステップ 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