クロードスキルのドキュメントWeb Artifacts Builder - Claude の React アーティファクト用スキル
Web Artifacts Builder スキルが React と Tailwind を shadcn コンポーネント込みの単一 HTML アーティファクトへ束ねる流れを完全解説。
出典：anthropics/skills（MIT）より内容を翻案。最終同期：2026年7月8日（上流更新：2026年4月20日）。
概要
公式の説明："Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using React, Tailwind CSS, shadcn/ui. For complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file artifacts."
適用範囲に注意：単純な1ファイルのアーティファクトにこのスキルは不要です。プロジェクトが単一の JSX ブロックに収まらなくなった瞬間のためのスキルです。
このスキルの仕組み
SKILL.md はデザインガイドラインを伴う5ステップのパイプラインです：
- 初期化：
scripts/init-artifact.shで React + Tailwind + shadcn/ui の事前構成済みワークスペースを作成 - 開発：本物のコンポーネント、状態管理、ルーティングで作り込む
- バンドル：
scripts/bundle-artifact.shで単一の HTML ファイルへ - 共有：アーティファクトをユーザーへ
- テスト/可視化（任意の検証ステップ）
shadcn-components.tar.gz がスキルに同梱されており、ネットワークなしでもコンポーネントを導入できます。
スキルフォルダの中身
scripts/init-artifact.sh- プロジェクトの雛形生成scripts/bundle-artifact.sh- 単一ファイル HTML バンドラーscripts/shadcn-components.tar.gz- オフラインのコンポーネントライブラリSKILL.md、LICENSE.txt
自作スキルへのヒント
- 実行可能なスクリプトは説明文に勝る：セットアップを散文で説明する代わりに、Claude が実行できるシェルスクリプトを渡す。
- オフライン依存の同梱（shadcn アーカイブ）でサンドボックス環境でも動く——コミュニティスキルの多くが見落とす一点です。