Lierie Skills

Web Artifacts Builder

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

View on 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/

Run this in your terminal — the skill lands in ~/.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 分ほどでブラウザで触れる状態になります。

Supported agents

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

Tags

README

For detailed usage and configuration options, see the README on GitHub. Skills with a write-up link to it below.

View README on GitHub ↗

Skills in the same category

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