Web Artifacts Builder
React + TypeScript + Tailwind CSS で「単一HTMLに全部入った」自己完結 Web アプリ（ダッシュボード等）を構築する公式 skill。shadcn/ui 40種類プリインストール。
SaaSスタートアップFlowOpsのLP(Hero/機能/料金3/お客様の声/FAQ/CTA)を生成
HTML+TailwindのLP(Hero+課題+機能3+料金3段階+お客様の声3+FAQ+最終CTA+OGP+Schema.org構造化)を含む完成形LP
SaaS LP の王道構成(BANT・Above-the-fold で価値訴求・社会的証明 → 機能 → 料金 → 最終CTA)を自動で踏襲。マーケ知識ゼロでもコンバージョン最適化された構造になる
頼んでいないのに『OGP/Twitter Card meta タグ』『Schema.org構造化データ(SoftwareApplication)』『JS最小化のための static-only 設計』まで実装に含めてくれた
デフォルトの配色・タイポが汎用 SaaS LP に寄りがちで、ブランド独自性は別途指定が必要
SaaS創業者で『LP発注する予算/時間がない・とりあえず出したい』フェーズの人
ブランドエクスペリエンスにこだわる中堅以上の組織(独自感が必要な場合)
Webflow/Framer等のノーコードLPツールが『GUIで作る』に対し、これは『コード形式で出す』。コード保守ができればこちらが軽量で速い
どんな skill か
React + TypeScript + Tailwind CSS + shadcn/ui（40 種類以上プリインストール）を使い、Claude.ai 内で表示可能な複雑なインタラクティブアプリを構築する Anthropic 公式 skill。出力は単一の bundle.html ファイル（JS と CSS をすべてインライン化）。
どんな人に向くか
- 複雑な状態管理やルーティングが必要な UI を1ファイルで配布したい人
- shadcn/ui を活用して統一感ある対話型 Web ツールを作りたい人
- 自己完結型 Web アプリのプロトタイプを素早く作りたいエンジニア
どんな人に向かないか
- 非エンジニア（プログラミング経験必須）
- 静的ランディングページ程度で十分な人（→ frontend-design へ）
ライセンス
Apache-2.0。商用利用 OK。
⚠️ このスキルは運営による実機検証はまだ行っていません。掲載は実在確認のみ済み。
非商用。個人利用・社内利用は可能ですが、再配布・販売は禁止されています。
公式ライセンスを確認 →