web-artifacts-builder（React 製の本格的な HTML アーティファクト）

anthropics/skills の、claude.ai の HTML アーティファクトを凝って作るためのスキルです。単純な 1 枚の HTML や JSX には使わず、「状態管理、ルーティング、shadcn/ui の部品が要る」複雑なものに限る、と説明にあります。

手順は短く、(1) 初期化スクリプトでプロジェクトを作る、(2) コードを書く、(3) バンドルのスクリプトで 1 つの HTML にまとめる、(4) 利用者に見せる、(5) 必要なら試す、の流れです。

GitHub のリポジトリ全体のスター数は 約19万（2026-11-10 時点）です。人気のあるスキル集のなかから、すでに掲載しているものと重ならない内容を選びました。

構成

技術の組み合わせは React 18 + TypeScript + Vite + Parcel（バンドル）+ Tailwind CSS + shadcn/ui です。

手順

1. bash scripts/init-artifact.sh <プロジェクト名> で、React プロジェクトを作る。Tailwind CSS 3.4.1 と shadcn/ui のテーマ、@/ のパス別名、40 以上の shadcn/ui 部品、Radix UI の依存、Parcel の設定が入る。Node 18 以上に合わせて Vite の版も自動で選ぶ
2. 生成されたコードを編集して作る
3. bash scripts/bundle-artifact.sh で、JavaScript・CSS・依存をすべて埋め込んだ bundle.html を作る。プロジェクトの直下に index.html が必要
4. できた HTML を会話で共有する
5. テストは任意。最初は試さず、見せたあとに、頼まれたときや問題が出たときに行う

デザインの注意

「AI っぽい見た目」を避けるため、中央寄せの多用、紫のグラデーション、角丸をそろえすぎること、Inter フォントを避けるよう明記されています。

付属のファイル

scripts/ に初期化用の init-artifact.sh、まとめる bundle-artifact.sh、shadcn/ui の部品を固めた shadcn-components.tar.gz があります。

Claude Code で使う

スキルのフォルダ（skills/web-artifacts-builder）を、~/.claude/skills/ の下（個人用）か、プロジェクトの .claude/skills/ の下（そのプロジェクト用）にコピーします。フォルダの名前はそのまま使います。

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/web-artifacts-builder ~/.claude/skills/

コピーしたあと、Claude Code を開き直すと、依頼の内容に合うときに自動で読み込まれます。

そのほか

リポジトリによっては、プラグインやコマンドでの導入方法を README に載せています。最新の手順は、リポジトリの README を確認してください。

単純な 1 画面のものには大げさです。初期化で多くのパッケージを取り込むため、時間と通信が必要です。