web-artifacts-builder Claude Code スキル
Claude Code スキルClaude CodeWeb・アプリ開発Claude Code 拡張・ワークフローデザイン・メディア制作以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
本スキルは、React・TypeScript・Vite・Tailwind CSS・shadcn/uiを用いて、claude.ai向けの複雑で複数コンポーネントから成るHTMLアーティファクトを構築するためのワークフローとスクリプト一式です。SKILL.mdによれば、状態管理やルーティング、shadcn/uiコンポーネントを必要とする構成に向けたもので、単純な単一ファイルのHTMLやJSXアーティファクトは対象外とされています。手順としては、スクリプトで設定済みのフロントエンドプロジェクトを初期化し、生成されたコードを編集してアーティファクトを開発したのち、すべてを1つの自己完結型HTMLファイルにまとめて共有します。最後に任意の工程として、PlaywrightやPuppeteerなどのツールを使ったテストや確認も行えます。SKILL.mdには、中央寄せレイアウトの多用や紫系グラデーション、均一な角丸、Interフォントなど、AI生成特有の画一的な見た目を避けるための設計上の指針も記載されています。
web-artifacts-builder でできること
- Tailwind CSSと40種以上のshadcn/uiコンポーネントを備えたReact + TypeScript + Viteプロジェクトを初期化する
- 状態管理やルーティング、shadcn/uiのUI要素を必要とする複数コンポーネント構成のアーティファクトを開発する
- 付属のバンドル用スクリプトで完成したプロジェクトを1つの自己完結型HTMLファイルにまとめる
- バンドルしたHTMLファイルをclaude.aiのアーティファクトとしてそのまま共有する
- 必要に応じてPlaywrightやPuppeteerなどのツールでアーティファクトを後からテスト・確認する
- 画一的なAI生成風の見た目を避けるための設計上の指針に沿って仕上げる