インストール
scripts/init-artifact.sh誰向けか
複雑で複数コンポーネントの claude.ai HTML artifact を作り、状態管理、ルーティング、または shadcn/ui コンポーネントが必要なときに web-artifacts-builder を使う。技術スタックは React、Tailwind CSS、shadcn/ui。単純な単一ファイル HTML/JSX artifact には使わない。
より適切な前提は、React 18 + TypeScript + Vite + Parcel（梱包）+ Tailwind CSS + shadcn/ui を受け入れること。概要は Node 18+ 互換も述べる。資料はエージェント製品の一覧を出していない。公式ガイドページは
https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
3 分で最初の試行を終える
推奨する最初のコマンドは初期化スクリプトであり、別の読み込みパスを作らない：
scripts/init-artifact.sh
このコマンドはフロントエンドリポジトリを生成するのでディスク書き込みである。今のディレクトリを初期化してよいか確認してから実行する。成功の合図：編集できるフロントエンドコードが生成されること。ディレクトリ未確認で初期化しない。
初期化のあと、すぐ梱包しない。次は生成コードを編集し、複数コンポーネントの UI にする。スタイルでは資料が名指しする「AI slop」を避ける：過度な中央寄せ、紫のグラデーション、一律の角丸、Inter フォント。これは可逆のデザイン制約である。スタイルを変える前に既存の生成ファイルを見、今書いた構造を上書きしないことを確認する。
スタックが合うか先に見たいだけなら、この確認で止めてよい。状態、ルーティング、または shadcn/ui が必要なときだけ続ける。目標が単一ファイル HTML ならここで止め、init しない。
利用例
例 1：初期化し、状態付き UI を一版直す。先に scripts/init-artifact.sh を走り、生成コードを編集する。完了基準はリポジトリが生成され、変更したのが生成ファイルであることであり、指名されていない足場を別に立てないこと。第 4 歩は利用者に見せることだが、抜粋は表示コマンドを書いていないのでプレビューアを作らない。見せる前に生成ページをローカルで開いて確認する。
例 2：プロジェクトを共有できる単一ファイルにまとめる。コマンドは scripts/bundle-artifact.sh。bundle.html を生成し、JavaScript、CSS、依存をインラインにする。Claude 会話で artifact として直接共有できる。前提：プロジェクトルートに index.html が必須。ディスク書き込みである。上書きされる bundle.html パスを確認してから梱包する。完了基準はルートに自己完結の bundle.html が現れること。index.html が無いとき、スクリプトが代わりに作ると思わない。
利用上の境界
複雑で複数コンポーネント、状態/ルーティング/shadcn/ui が必要な artifact 向けであり、単純な単一ファイル HTML/JSX 向けではない。スタックは React 18、TypeScript、Vite、Parcel、Tailwind、shadcn/ui に固定。梱包成果物は bundle.html で、ルートに index.html が必須。過度な中央寄せ、紫グラデ、一律の角丸、Inter を避ける。
init と bundle 以外のインストールパスを作らない。資料はクライアント一覧も、単純単一ファイルがどのコマンドに切り替えるべきかも書いていない。bundle.html の上書きや空でないディレクトリへの初期化の前に副作用を確認する。ここに書いた 4 ステップとスタイル禁区を超える範囲は、この説明の対象外である。