web-artifacts-builder スキル
スキル Claude Code Web・アプリ開発Claude Code 拡張・ワークフロー以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
web-artifacts-builderは、React・Tailwind CSS・shadcn/uiを使ってclaude.ai向けの複雑で複数コンポーネント構成のHTMLアーティファクトを作成するためのClaudeスキル（ツール群）です。SKILL.mdによると、状態管理やルーティング、shadcn/uiコンポーネントが必要なアーティファクト向けであり、単一ファイルの簡単なHTML/JSXアーティファクトには使用しません。手順は、スクリプトでプロジェクトを初期化し、コードを開発し、単一の自己完結型HTMLファイルにバンドルし、そのファイルをアーティファクトとして共有する流れです。ソースには任意のテスト・可視化手順、および「AI slop」と呼ばれる視覚パターンを避けるためのデザイン指針も記載されています。
web-artifacts-builder でできること
- scripts/init-artifact.shでReact + TypeScript構成のプロジェクト（Vite経由）を初期化する。Tailwind CSS 3.4.1とshadcn/uiテーマシステム、@/パスエイリアス、40以上のshadcn/ui事前インストール済みコンポーネント、Radix UI依存関係、Parcelバンドル設定（.parcelrc）、Node 18+対応が含まれる
- 生成されたプロジェクトファイルを編集してアーティファクトを開発する
- scripts/bundle-artifact.shでプロジェクトを単一の自己完結型bundle.htmlファイルにバンドルする。この際、parcel・@parcel/config-default・parcel-resolver-tspaths・html-inlineなどのバンドル用依存関係をインストールし、Parcelでビルド（ソースマップなし）し、全アセットをインライン化する
- 完成したbundle.htmlをclaude.aiの会話内でアーティファクトとして共有する
- 必要に応じてPlaywrightやPuppeteerなどのツールでアーティファクトをテスト・可視化する。ソースによれば、これは基本的にアーティファクトを提示した後に行う任意の手順である
- 過度に中央揃えのレイアウト、紫のグラデーション、均一な角丸、Interフォントを避けるというデザイン指針に従う
- UI構築時にはソース内で示されているshadcn/uiコンポーネントのドキュメントを参照する
出典
原文の説明（英語）
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.