Claudeのweb-artifacts-builderでReact・shadcn/ui入りartifactを作る
web-artifacts-builderは、React・Tailwind・shadcn/uiの雛形を作り、1枚のHTMLに固めるスキルです。2本のスクリプトの中身と前提、つまずく箇所をまとめます。
web-artifacts-builderは、React・Tailwind CSS・shadcn/uiを使った大きめのartifactを、1枚のHTMLファイルとして仕上げるスキルです。公式リポジトリ anthropics/skills のサンプルスキルの1つで、中身は SKILL.md と2本のシェルスクリプトです。
状態管理やルーティングが要る画面、shadcn/uiの部品を並べたい画面に向きます。単一ファイルで済む簡単なHTMLやJSXには向きません。
どんなときに使うスキルか
SKILL.md の説明文は、用途を「複数のコンポーネントを持つ凝ったclaude.ai向けHTML artifact」と書いています。使う条件も明記されています。状態管理、ルーティング、shadcn/uiのコンポーネントのどれかが必要なときです。
このスキルを使う場面と使わない場面
使う
複数画面のダッシュボード、タブやダイアログを多用するツール、フォーム検証つきの入力画面。
使わない
1枚で完結する計算機、静的な表、単一のJSXで足りる図。説明文が「単純な単一ファイルのartifactには使わない」と除外しています。
仕組みの核は、Reactプロジェクトをいったん普通に作り、最後にJavaScriptとCSSをすべてHTMLに埋め込む点です。artifactは1枚のHTMLとして渡す必要があるので、ビルド成果物を束ねる工程が要ります。
スキルの入れ方
Claude Codeでは、anthropics/skills をプラグインのマーケットプレイスとして登録します。READMEが示す手順は次のとおりです。
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsweb-artifacts-builderは example-skills の束に入っています。同じ束には frontend-design や webapp-testing、skill-creator なども含まれます。プラグインの導入手順そのものはmattpocock skillsの導入記事にも例があります。
READMEは、リポジトリのスキルを「デモと学習が目的」と位置づけています。Claudeが実際に返す挙動は、リポジトリの記述と違う場合があるとも断っています。業務で使うなら、自分の環境で試してから頼ってください。
特に実行環境は見ておく価値があります。init-artifact.sh はnpmレジストリから依存を取得し、場合によってはpnpmをグローバルに入れます。ネットワークに出られない環境や、グローバルインストールを禁じた環境では、初期化の途中で止まります。社内の開発機で使うときは、先にNodeとpnpmを整えておくと安全です。
入れたあとは、スキル名を挙げて頼むだけです。READMEは「スキルは言及するだけで使える」と説明しています。
claude.aiでは、READMEによるとこれらのサンプルスキルは有料プランですでに使えます。スキルの置き場所や読み込みの仕組みはSkillsのfrontmatter解説にまとめています。
5つの手順を1本の流れで見る
SKILL.md が定める流れは5段です。
web-artifacts-builderの作業順
- 1
プロジェクトを初期化する
bash scripts/init-artifact.sh <project-name>を実行し、できたディレクトリに入ります。 - 2
生成されたコードを編集する
画面の中身を書きます。部品は
@/components/ui/から読み込めます。 - 3
1枚のHTMLにまとめる
bash scripts/bundle-artifact.shでbundle.htmlを作ります。 - 4
ユーザーに見せる
bundle.htmlを会話に渡し、artifactとして表示します。 - 5
必要なら動作を確かめる
任意の工程です。PlaywrightやPuppeteerなどを使います。
5段目について SKILL.md は、事前にテストすると完成が見えるまでの待ち時間が延びるので、見せたあとか不具合が出たときに回すよう勧めています。
init-artifact.shが用意するもの
スクリプトを読むと、初期化で何が入るかが分かります。
| 項目 | 内容 |
|---|---|
| 雛形 | 内容pnpm create vite のReact + TypeScriptテンプレート |
| スタイル | 内容Tailwind CSS 3.4.1、PostCSS、tailwindcss-animate |
| テーマ | 内容shadcn/ui形式のCSS変数(ライト・ダーク)と components.json |
| 部品 | 内容Radix UIの依存一式と、40以上のshadcn/uiコンポーネント |
| エイリアス | 内容@/ が ./src を指す(tsconfig とViteの両方に設定) |
Node.jsのバージョンで挙動が分かれます。18未満はエラーで終了します。20以上ならViteは latest、18台なら 5.4.11 に固定されます。pnpmが入っていなければ npm install -g pnpm で入れる処理もあります。
shadcn/uiの部品は、shadcn CLIで1つずつ追加する方式ではありません。スクリプトと同じ場所にある shadcn-components.tar.gz を src/ に展開します。スキルのフォルダをまるごと置いていれば足ります。
bundle-artifact.shが1枚にする仕組み
bundle-artifact.sh は短いスクリプトで、次の順に動きます。
package.jsonとindex.htmlがカレントディレクトリにあるか確かめるparcel、@parcel/config-default、parcel-resolver-tspaths、html-inlineを開発依存に追加する.parcelrcがなければ、@/エイリアスを解決する設定で作るdistとbundle.htmlを消してから、parcel build index.htmlをソースマップなしで実行するhtml-inlineでdist/index.htmlの資産を埋め込み、bundle.htmlに書き出す
ViteでなくParcelで束ねる点が特徴です。開発用の雛形はVite、配布用のビルドだけParcelと、役割が分かれています。parcel-resolver-tspaths を足すのは、@/components/... のようなパスをParcelに読ませるためです。
出力の bundle.html は、JavaScriptもCSSも本体に埋まった自己完結の1ファイルです。スクリプトの最後のメッセージが、手元で確かめるにはブラウザで開くよう案内しています。
入っているshadcn/uiの部品
スクリプトが最後に表示する一覧は、次の分類で読めます。Claudeに画面を頼むとき、ここにある部品名で指定すると意図が通りやすくなります。
| 用途 | 部品 |
|---|---|
| 入力 | 部品button、input、textarea、checkbox、radio-group、select、slider、switch、toggle、toggle-group、form、calendar |
| 表示 | 部品card、table、badge、avatar、alert、progress、skeleton、carousel、aspect-ratio |
| 重なり・案内 | 部品dialog、drawer、sheet、popover、hover-card、tooltip、toast、sonner、dropdown-menu、context-menu、command |
| 構造・移動 | 部品tabs、accordion、collapsible、breadcrumb、menubar、navigation-menu、resizable、scroll-area、separator |
フォームは react-hook-form と zod が同時に入るため、検証つきの入力画面を頼みやすい構成です。日付の扱いには date-fns と react-day-picker が入ります。
束ねたあとの確認コマンド
bundle.html ができたら、Claude Codeに次の確認を続けて頼めます。どれもスキルの手順には含まれない、手元での追加確認です。
ls -lh bundle.html
grep -c 'src="http' bundle.html
grep -c 'href="http' bundle.html1行目は容量、2行目と3行目は外部URLを読み込む記述の数です。html-inline は資産を本体に埋め込む役割なので、0に近いほど自己完結に近づきます。0にならないときは、どの外部読み込みが残っているか、Claudeに該当箇所を探させます。数が多いまま共有すると、artifactを開く環境で読み込めない恐れがあります。
CLAUDE.mdに次の1行を足しておくと、毎回の頼み方が短くなります。
artifactを作るときは bundle.html の容量と外部URLの残りを報告するClaudeへの頼み方と確認のしかた
頼み方は、作りたい画面の中身と、スキルを使う指定をセットで書きます。次はあくまで例です。
web-artifacts-builderスキルで、経費精算の入力画面を作ってください。
- タブで「入力」「一覧」「集計」を切り替える
- 入力はshadcn/uiのフォーム部品と検証を使う
- 完成したらbundle.htmlまで作り、サイズを教えてください確認は bundle.html を開くところから始めます。画面が真っ白なら、ブラウザの開発者ツールでエラーを見るのが早道です。SKILL.md は本番前のテストを必須にしていないので、Claude任せにせず自分で開く習慣をつけると手戻りが減ります。
SKILL.md には、いわゆる「AIっぽい見た目」を避ける指示が太字で入っています。避けるのは、中央寄せの多用、紫のグラデーション、角丸の一律適用、Interフォントです。デザインの指示を足さなくても、この方針の下で組まれます。
つまずきやすい箇所
落とし穴
スクリプトだけをコピーすると初期化が止まる
init-artifact.sh は、同じフォルダに shadcn-components.tar.gz がないと「not found」で終了します。scripts/ ディレクトリごと取得してください。
落とし穴
bundleのたびにpackage.jsonが更新される
bundle-artifact.sh は実行のたびに pnpm add -D で依存を足します。バージョン管理しているプロジェクトでは、差分に package.json とロックファイルが出ます。
落とし穴
既存の.parcelrcは上書きされない
.parcelrc が既にあるプロジェクトでは、エイリアス用の設定は作られません。自分で用意した設定にresolverが入っていないと、@/ のimportでビルドが失敗します。
もう1つ、bundle.html が大きくなる点にも注意が要ります。40以上の部品を入れたプロジェクトでも、使った部品だけが成果物に残るかどうかは、SKILL.md に記載がありません。サイズが気になるときは、bundle.html の容量をスクリプトの出力で確かめてください。
Claude CodeのartifactとClaude.aiのartifactの関係
SKILL.mdが名指しするのは「claude.aiのartifact」です。会話に渡したHTMLを表示する、という前提で書かれています。Claude Codeから公開する場合の挙動は別の話で、公開時の編集表示についてはartifact公開の記事を参照してください。Artifactsの共有や編集の性質をChatGPTのCanvasと比べた整理は、ArtifactsとCanvasの比較にあります。
まとめ
web-artifacts-builderの価値は、Reactの開発環境を手早く整えて、最後を1枚のHTMLに固める手順をスキルとして持つ点です。初期化はNodeとpnpmとスクリプト同梱のtarballが前提で、束ねる工程は package.json を書き換えます。まず小さな画面を1つ作り、bundle.html を開いて挙動と容量を確かめてから、本格的な画面に広げるのが堅実です。ライセンスはApache License 2.0で、LICENSE.txt が同梱されています。