web-artifacts-builder Claude Code スキル

web-artifacts-builderは、React・Tailwind CSS・shadcn/uiといったモダンなフロントエンド技術を用いて、claude.ai向けに複数コンポーネントから成るHTMLアーティファクトを構築するためのスキルです。SKILL.mdによると、初期化用スクリプトでReact+TypeScript+Vite構成のプロジェクトを生成し、コードを編集した後、バンドル用スクリプトで単一のHTMLファイルにまとめる手順が示されています。生成されるプロジェクトにはTailwind CSSによるテーマ設定と40種類以上のshadcn/uiコンポーネントがあらかじめ組み込まれています。状態管理やルーティング、shadcn/uiコンポーネントを必要とする複雑なアーティファクト向けであり、単純な単一ファイルのHTMLやJSXアーティファクトには使わないよう案内されています。仕上がったアーティファクトはPlaywrightやPuppeteerなどのツールを使って任意で検証することもできます。