Lierie Skills

Web Artifacts Builder

React + Tailwind + shadcn/uiで、ステート管理やルーティングを含む複雑なHTMLアーティファクトを構築する公式skill。

GitHub で見る ↗dev-workflow↓ 0

Install

$git clone https://github.com/anthropics/skills.git ~/anthropic-skills && cp -r ~/anthropic-skills/skills/web-artifacts-builder ~/.claude/skills/

ターミナルで実行すると ~/.claude/skills/ に配置されます。

詳しく

何ができるの？

React + Tailwind + shadcn/ui で、ステート管理やルーティングを含む本格的な HTML アーティファクト（claude.ai に貼れる動くプロトタイプ）を組み立てられる公式 skill です。

どう使うの？

  1. Claude Code に「web-artifacts-builder で〇〇のダッシュボードを作って」と依頼
  2. Claude が画面構成・shadcn コンポーネント選定・データ流れを順に整えてくれる
  3. 生成された HTML を claude.ai のアーティファクトに貼ると、そのまま動く

例えばこんな時

「タスク管理ツールのプロトタイプをサクッと作って動かしたい」というケース。web-artifacts-builder を使えば、フィルタリング付きのリスト UI が 15 分ほどでブラウザで触れる状態になります。

対応エージェント

  • Claude Code
  • Cursor
  • Cline
  • Codex
  • Roo
  • Other

タグ

README

詳細な使い方や設定オプションは GitHub の README を参照してください。記事化された skill には下に解説リンクが付いています。

GitHub の README を見る ↗

同じカテゴリの Skill

MCP Builder

外部APIをClaudeから呼べるようにするMCPサーバーを、ガイド付きで設計・実装できる公式skill。Python/Nodeどちらにも対応。

  • Claude Code
↓ 0dev-workflow

Webapp Testing

Playwrightを使ってWebアプリのUIを動かし、挙動・回帰を検証するための公式skill。スクショ取得やコンソールログ確認も可。

  • Claude Code
↓ 0dev-workflow

Frontend Design

React + Tailwindで「AI臭くない」プロダクション品質のフロントエンドUIを設計するための公式skill。デザイン指針も含む。

  • Claude Code
↓ 0dev-workflow