web-artifacts-builder Claude Code スキル

このスキルは、claude.ai 向けに複数コンポーネントから成る本格的な HTML アーティファクトを作るためのものです。React と TypeScript を Vite で構成し、Tailwind CSS と shadcn/ui のコンポーネント群をあらかじめ組み込んだプロジェクトを初期化するところから作業が始まります。開発作業を終えたら、付属のスクリプトで JavaScript・CSS・依存関係を一つの HTML ファイルにまとめ、claude.ai 上でアーティファクトとして共有できる形にします。SKILL.md では、よくある画一的な AI 風デザイン（中央寄せのレイアウトや紫系グラデーション、均一な角丸など）を避けるよう注意書きがあり、必要であれば Playwright や Puppeteer を使った動作確認も任意のステップとして行えます。状態管理やルーティング、UI コンポーネント群が必要な複雑なアーティファクト向けであり、単純な単一ファイルの HTML や JSX 向けではないとされています。