1仕組みと動作原理
仕組みは「スキャフォールディング＋バンドル」の2段階構成：init-artifact.sh が pnpm create vite をオンデマンド実行して React-TS プロジェクトを生成し、Tailwind/shadcn 依存関係をインストールして同梱の shadcn/ui コンポーネント 43 点を展開；bundle-artifact.sh が Parcel でビルドし、html-inline で単一の bundle.html にインライン化。
skills/web-artifacts-builder/SKILL.md
1. Initialize the frontend repo using `scripts/init-artifact.sh` 2. Develop your artifact by editing the generated code 3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
2つのスクリプトによる実際の実行：init スクリプト内で 'pnpm create vite "$PROJECT_NAME" --template react-ts' → 'tar -xzf "$COMPONENTS_TARBALL" -C src/'；bundle スクリプトで 'pnpm exec parcel build index.html --dist-dir dist --no-source-maps' → 'pnpm exec html-inline dist/index.html > bundle.html'。
コンポーネントはオンデマンド取得ではなくパッケージ同梱配布：shadcn-components.tar.gz に 40 以上の components/ui/*.tsx が内包されており、オフライン解凍ですぐに使用可能で、CLI による個別取得を回避。
skills/web-artifacts-builder/SKILL.md
✅ 40+ shadcn/ui components pre-installed
実機確認で tar 内に 43 個の components/ui/*.tsx（accordion/alert/badge/…/sonner/drawer/resizable など）が含まれ、「40+」の記載と一致；依存関係（@radix-ui/react-* 一式、sonner/cmdk/vaul/zod など）は init スクリプトの pnpm install によりインストール。
成果物の思想＝単一の自己完結型 HTML：bundle.html がすべての JS/CSS/依存関係をインライン化し、claude.ai アーティファクトとしてそのまま共有またはブラウザ表示が可能。
skills/web-artifacts-builder/SKILL.md
This creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
パスエイリアスはビルド時に .parcelrc（parcel-resolver-tspaths）で解決；'Builds with Parcel (no source maps)' ＋ html-inline がインライン化を担当。
スコープの規律：「複数コンポーネント／状態管理／ルーティング／複雑なインタラクション」を伴う成果物のみを対象とし、シンプルな単一ファイル HTML/JSX は明確に対象外（トリガー前に複雑度を判定）。
skills/web-artifacts-builder/SKILL.md
Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
description における負の境界設定であり、過剰なエンジニアリングを防ぐとともに、通常の「HTML作成」スキルとの主要な役割分担点。
テスト／可視化は意図的に任意の事後ステップへ格下げ：「ユーザーが完成品を確認する前」のレイテンシ増加を防ぎ、問題発生時にのみテストを実施。
skills/web-artifacts-builder/SKILL.md
Note: This is a completely optional step. Only perform if necessary or requested.
SKILL.md Step 5: 'In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later…' ——インタラクションテンポの設計。
「AI slop（AI特有の安っぽさ）」を防ぐスタイリングルールを内蔵：過度な中央揃えレイアウト、紫のグラデーション、画一的な角丸、Inter フォントを明示的に禁止。
skills/web-artifacts-builder/SKILL.md
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.
pptx スキルの「AI痕跡防止リスト」と同系統であり、Anthropic系スキルにおける「生成痕跡」への一貫した方針。
2コア機能
01React 18+TS+Vite+Tailwind 3.4.1+shadcn/ui プロジェクトのワンクリック初期化（path alias、Tailwind テーマ変数を含む）
0240以上の shadcn/ui コンポーネントを同梱（Radix 依存関係一式を含む 43 点の tarball 内蔵）
03Parcel バンドル ＋ html-inline による単一ファイル化（source map なし、エイリアス解決）
04Node バージョンの自動判別：≥18 を検出して Vite バージョンを自動ピン留め（<20 では旧バージョンを使用）
05複雑なフロントエンド成果物（状態管理／ルーティング／コンポーネントライブラリ）の開発ワークフロー ＋ 表示優先・テスト後回しのテンポ設計
06AI slop を防ぐデザイン規約（過度な中央揃え／紫グラデーション／画一的角丸／Inter の禁止）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | npm registry（registry.npmjs.org） |
| package | create-vite / vite / [email protected] / postcss / autoprefixer / tailwindcss-animate / class-variance-authority / clsx / tailwind-merge / lucide-react / next-themes / @radix-ui/react-*（20+）/ sonner / cmdk / vaul / embla-carousel-react / react-day-picker / react-resizable-panels / date-fns / react-hook-form / zod |
| package | parcel / @parcel/config-default / parcel-resolver-tspaths / html-inline（打包期，bundle 脚本安装） |
| cli | node ≥18 / pnpm（宿主环境） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: init-artifact.sh / bundle-artifact.sh（bash）→ 内部で pnpm（create/install/add/e を実行
- 网络端点: 外部ネットワークアクセスの宣言: 各初期化時: registry.npmjs.org（pnpm create vite、複数回の pnpm install による依存取得、pnpm add parcel
- 本地工作目录: ファイルの読み書きと成果物出力: プロジェクトディレクトリ全体（package.json/tsconfig/vite.config/src コンポーネント等）
監査ノート： 実行ごとに pnpm を介して npm 公式レジストリから大量のサードパーティパッケージ（最新の create-vite、tailwind、@radix-ui/react-*、parcel など。[email protected] を除き大半はバージョン未固定）を取得・実行するため、「サードパーティリモートパッケージへの依存」というサプライチェーン実行面（6段階評価における典型的なオレンジ）に該当します。また、pnpm はレジストリトークンを含む可能性があるユーザーの npm 設定を読み込みます。スキル自体は認証情報を読み取らず、独自のエンドポイントも持ちません。スクリプトはローカルにプロジェクトディレクトリを書き込みビルドを実行します。利用推奨事項：監査可能な依存環境（lockfile、プロキシ、オフラインミラー）または隔離環境で利用し、取得されるパッケージのバージョンを確認してください。
5二重目の独立検証
- [ok] 40+ 组件声称 vs tarball — tar -tzf 实测 43 个 components/ui/*.tsx（含 sonner/drawer/resizable），声称成立。
- [ok] init 脚本步骤与 SKILL 流程一致 — create vite（react-ts）→ 清理模板 → 装 tailwind/依赖 → 写 postcss/tailwind/vite/tsconfig → tar 解包，SKILL 描述可逐句对应。
- [ok] bundle 单文件化 — parcel build --no-source-maps + html-inline 输出 bundle.html；.parcelrc tspaths 配置存在。
- [ok] 网络外发对象 — 无自有端点/回调；全部为 pnpm→registry.npmjs.org（create-vite/tailwind/radix/parcel）。版本 pin：[email protected] 固定，create-vite 与多数依赖取 latest——版本漂移与供应链留意点已在 reason 说明。
- [ok] 凭证读取 — skill 脚本零凭证读取；pnpm 读 ~/.npmrc 属包管理器宿主行为（已在 credential_reads 注明，非脚本显式读取）。
- [ok] PROJECT_NAME 注入点 — pnpm create vite "$PROJECT_NAME" 引号安全；sed 标题替换串未转义（& / \ 字符可破坏表达式）——本地低危输入面，已在 injection_surface 记录。
- [ok] Node 版本门禁 — 脚本有 NODE_VERSION < 18 拒绝与 Vite 版本 pin 逻辑，与 SKILL 'Node 18+ compatibility' 声称一致。
- [ok] 元数据 — 本地 HEAD==pin 41bbe19；Apache-2.0 LICENSE.txt。
6結論
最適な用途： Claude または管理環境内で「状態管理、ルーティング、複数コンポーネント間の連携を要する」フロントエンド成果物（ダッシュボード、ドキュメントサイト、ツール型ページなど）を構築し、パッケージインストールのための外部ネットワークアクセスが許可されている場合に最適。チーム内で React+Tailwind+shadcn のベースラインを統一し、統一感のない手作業実装を防ぐ用途にも適しています。
不向きな用途： オフラインまたは制限されたネットワーク環境（パッケージ取得不可）；シンプルな静的ページや単一コンポーネント（過度に重いため SKILL 自体で対象外と規定）；依存関係のサプライチェーン監査が必須で lockfile 管理が厳格に求められるセキュリティ機密環境（プロキシ／ミラー経由を除く）；スキャフォールディングの細かなカスタマイズが頻繁に必要なシナリオ（スクリプトが固定テンプレートのため）。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload web-artifacts-builder.tar.gz
sha256:
Option B · Copy Guide for Agentc56ef465edf880ee…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 41bbe19d1a.