web-artifacts-builder作者 Anthropic

Web Artifacts Builder スキル。

Claude Code と Codex 用の UI デザインスキル：React、Tailwind、shadcn/ui を使用したマルチコンポーネントのインタラクティブな HTML 成果物。

Web & UI
HTML

anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md

--- name: web-artifacts-builder description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. --- ## Design & Style Guidelines ## Quick Start

上流ファイルから 2026-09-14 に読み取ったフロントマターとセクション見出し · 全 3,073 文字

01 できること

Claude CodeおよびCodexにおけるweb-artifacts-builder Skillの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

React 18、TypeScript、Vite、Parcel、Tailwind CSS、shadcn/uiというモダンなスタックを用いて、claude.ai向けの複雑なマルチコンポーネントReact成果物を構築するためのスキルです。このスキルは、40以上のshadcn/uiコンポーネントがプリインストールされたフル構成のプロジェクトをセットアップする初期化スクリプトと、すべてを単一の自己完結型HTMLファイルにコンパイルするバンドルスクリプトを提供します。

このスキルは、状態管理、ルーティング、shadcn/uiコンポーネントを必要とする成果物向けに設計されており、シンプルな単一ファイルのHTMLやJSXの成果物には適していません。ワークフローは5つのステップで構成されます：フロントエンドリポジトリを初期化する、生成されたコードを編集して成果物を開発する、単一のHTMLファイルにバンドルする、ユーザーに表示する、必要に応じてテストする、です。

HTML

プロンプト例を見る ↗

仕組み

01
構成済みのReactプロジェクトを初期化する
プロジェクト名を指定してinit-artifact.shスクリプトを実行すると、React、TypeScript、Tailwind CSS、パスエイリアス、40以上のshadcn/uiコンポーネント、Parcelバンドリング設定を備えたフル構成のプロジェクトが作成されます。
02
生成されたファイルを編集して開発する
初期化時に生成されたファイルを編集し、スキルで提供される一般的な開発タスクのガイダンスに従って成果物を構築します。
03
自己完結型HTMLへのバンドル
bundle-artifact.shを実行すると、ParcelとhtmlUR-inlineを使ってすべてのJavaScript、CSS、依存関係がインライン化された単一ファイルであるbundle.htmlにReactアプリがコンパイルされます。
04
成果物をユーザーに表示する
バンドルされたHTMLファイルをチャット内で共有し、ユーザーがclaude.aiのアーティファクトとして表示できるようにします。

02 適合性を確認

web-artifacts-builder Skill を使用するタイミング

この種の UI デザインの作業には、Claude Code または Codex で web-artifacts-builder スキルを使用します。適合性と制限は、スキル自体のファイルから取得しています。

適している場合

shadcn/uiコンポーネントライブラリを使用したマルチコンポーネントインターフェース

境界を知る

状態管理、ルーティング、または shadcn/ui コンポーネントを必要とする複雑なアーティファクトに使用します。シンプルな単一ファイルの HTML/JSX アーティファクトには使用しません。

提供すべきもの

初期化用のプロジェクト名init-artifact.shスクリプトを実行する際に、新しいReactプロジェクトディレクトリに付ける名前です。

03 スキルの内部

Claude CodeおよびCodexに対してweb-artifacts-builder Skillが与えるルール

SKILL.md がエージェントに設定する 5 つの具体的な指示、デフォルト、制限 — ファイルの中でも結果を左右する部分です。

複雑な成果物にのみ使用する
このスキルは、状態管理やルーティング、shadcn/ui コンポーネントを必要とする複雑な成果物専用です。単一ファイルのシンプルな HTML や JSX 成果物には使用しないでください。
AI Slop デザインパターンを避ける
AI slop と呼ばれるものを避けるため、過度に中央揃えのレイアウト、紫のグラデーション、均一な角丸、Inter フォントの使用は避けてください。
プロジェクトのルートに index.html が必要
バンドルスクリプトは、プロジェクトのルートディレクトリに index.html ファイルが存在することを前提としています。
必要な場合のみテストする
テストは完全にオプションであり、必要な場合やリクエストされた場合のみ実施してください。
5 ステップのワークフローに従う
成果物の構築プロセスは特定の順序に従います。フロントエンドリポジトリの初期化、生成されたコードの編集による開発、単一の HTML ファイルへの全コードのバンドル、ユーザーへの表示、そして任意でのテストです。

04 実際に使う

Claude Code または Codex に web-artifacts-builder をインストールする

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex またはあなたのエージェントに web-artifacts-builder を追加する

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal

npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

skills/web-artifacts-builder/SKILL.md 向けの一般的な skills CLI 形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初の UI デザインタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt

Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

リクエストされた場合や問題が発生した場合は、Playwright や Puppeteer などの利用可能なツールを使って成果物をテストまたは可視化してください
デザインが過度な中央揃えレイアウト、紫のグラデーション、均一な角丸、Inter フォントを避けていることを確認してください

OpenDesign では web-artifacts-builder が同梱されています：Plugins → Skills から、上部バーで選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author: Anthropic
Repository: github.com/anthropics/skills ブランチ main
スキルファイル: skills/web-artifacts-builder/SKILL.md 検証時にコンテンツチェックサムを記録；コミット 34040c9
License: Apache-2.0 skills/web-artifacts-builder/LICENSE.txt より。SKILL.md には「完全な条件は LICENSE.txt に記載」とあります。
リポジトリスター数: 176,183 2026-09-14 に取得した anthropics/skills リポジトリ全体の GitHub スナップショット。このリポジトリにはカタログ内の 7 つのスキルが含まれます。web-artifacts-builder の評価や使用数ではありません。
OpenDesign により検証済み: 2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱（2026-08-28 確認）。このページでは実際の実行記録はまだありません。

SKILL.md の中身

デザイン＆スタイルガイドライン過度な中央揃え、紫のグラデーション、均一な角丸、Inter フォントといった AI slop パターンを避けるための指示
クイックスタート初期化から開発、バンドル、共有、そして任意のテストまでの 5 ステップのワークフロー
ステップ 1：プロジェクトの初期化init-artifact.sh を実行して、TypeScript、Tailwind、shadcn/ui コンポーネント、Parcel を備えた React プロジェクトを設定・作成します
ステップ 2：成果物の開発共通の開発タスクガイダンスに従い、生成されたファイルを編集して成果物を構築します
ステップ 3：単一の HTML ファイルへのバンドルbundle-artifact.sh を実行し、JavaScript、CSS、依存関係をインライン化した自己完結型の bundle.html を作成します
ステップ 4：成果物をユーザーと共有バンドルされた HTML ファイルを会話内で共有し、成果物として表示できるようにします
ステップ 5：成果物のテスト／可視化（任意）レイテンシを抑えるため事前のテストは避け、必要に応じて Playwright や Puppeteer などのツールで任意にテストします
リファレンスshadcn/ui コンポーネントのドキュメントへのリンク

スキル自身による説明

「モダンなフロントエンド Web 技術（React、Tailwind CSS、shadcn/ui）を使用して、複雑でマルチコンポーネントな claude.ai HTML 成果物を作成するためのツール群。状態管理、ルーティング、または shadcn/ui コンポーネントを必要とする複雑な成果物に使用します。シンプルな単一ファイルの HTML/JSX 成果物には使用しません。」

SKILL.md の冒頭から抜粋した説明文です。完全なファイルは約 3,073 文字です。GitHub で完全なファイルを読む。

06 インストールする前に