アーティファクトビルダー

claude.ai向けの複雑なマルチコンポーネントReactアーティファクトを構築するための総合ツールキットです。React 18、TypeScript、Vite、Tailwind CSS、40以上のプリインストール済みshadcn/uiコンポーネントを含む完全な開発スタックを提供します。このスキルは状態管理、ルーティング、またはモダンUIコンポーネントを必要とする高度なフロントエンドアプリケーション向けに設計されており、単純な単一ファイルHTML/JSXアーティファクト用ではありません。

開発ワークフローは3つの主要ステップで構成されます：

1. プロジェクトの初期化 - bash scripts/init-artifact.sh <project-name>を実行して、Tailwind CSS、shadcn/uiテーマ、パスエイリアスを含むすべての依存関係がプリインストールされた完全に構成されたReact + TypeScriptプロジェクトを作成します。

2. アーティファクトの開発 - Reactコンポーネント、フック、shadcn/ui要素を使用して生成されたファイルを編集します。プロジェクトには使用可能な40以上のshadcn/uiコンポーネント（ボタン、フォーム、ダイアログ、テーブルなど）がプリインストールされています。

3. 単一HTMLへのバンドル - bash scripts/bundle-artifact.shを実行して、すべてのJavaScript、CSS、依存関係がインライン化された自己完結型の単一HTMLファイルにパッケージングします。これによりclaude.aiアーティファクトとして直接共有できるbundle.htmlが生成されます。

バンドルされたアーティファクトはセットアップなしでClaude会話で即座に動作します。