web-artifacts-builder
✓最新のフロントエンド Web テクノロジー (React、Tailwind CSS、shadcn/ui) を使用して、精巧なマルチコンポーネント claude.ai HTML アーティファクトを作成するためのツール スイート。単純な単一ファイルの HTML/JSX アーティファクトではなく、状態管理、ルーティング、または shadcn/ui コンポーネントを必要とする複雑なアーティファクトに使用します。
SKILL.md
Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Run the initialization script to create a new React project:
最新のフロントエンド Web テクノロジー (React、Tailwind CSS、shadcn/ui) を使用して、精巧なマルチコンポーネント claude.ai HTML アーティファクトを作成するためのツール スイート。単純な単一ファイルの HTML/JSX アーティファクトではなく、状態管理、ルーティング、または shadcn/ui コンポーネントを必要とする複雑なアーティファクトに使用します。 ソース: bbeierle12/skill-mcp-claude。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill web-artifacts-builder- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
web-artifacts-builder とは？
最新のフロントエンド Web テクノロジー (React、Tailwind CSS、shadcn/ui) を使用して、精巧なマルチコンポーネント claude.ai HTML アーティファクトを作成するためのツール スイート。単純な単一ファイルの HTML/JSX アーティファクトではなく、状態管理、ルーティング、または shadcn/ui コンポーネントを必要とする複雑なアーティファクトに使用します。 ソース: bbeierle12/skill-mcp-claude。
web-artifacts-builder のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill web-artifacts-builder インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/bbeierle12/skill-mcp-claude
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01