web-artifacts-builder

Web Artifacts Builder Skill

強力なフロントエンドの 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 スロップ」と呼ばれることが多いものを避けるため、中央寄せのレイアウト、紫のグラデーション、均一な角丸、Inter フォントの多用は避けてください。

クイックスタート

ステップ 1：プロジェクトを初期化する

初期化スクリプトを実行して、新しい React プロジェクトを作成します：

bash scripts/init-artifact.sh <project-name>
cd <project-name>

これにより、次の機能を備えた、完全に設定済みのプロジェクトが作成されます：

• ✅ React + TypeScript（Vite 経由）
• ✅ shadcn/ui のテーマシステムを備えた Tailwind CSS 3.4.1
• ✅ パスエイリアス（@/）の設定
• ✅ shadcn/ui スタイルのコンポーネント用スターター構成
• ✅ Parcel によるバンドル設定（.parcelrc 経由）
• ✅ Node 18 以降との互換性（Vite のバージョンを自動検出して固定）

ステップ 2：アーティファクトを開発する

アーティファクトを作成するには、生成されたファイルを編集します。詳しくは、以下の一般的な開発タスクを参照してください。

ステップ 3：単一の HTML ファイルにバンドルする

React アプリを単一の HTML アーティファクトにバンドルするには：

bash scripts/bundle-artifact.sh

これにより、すべての JavaScript、CSS、依存関係がインライン化された自己完結型アーティファクト bundle.html が作成されます。このファイルは、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