Home / All Skills / Design & Motion / web-artifacts-builder
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · anthropics/skills

web-artifacts-builder

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.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author anthropicsGitHub anthropics/skills ↗Stars 175386License Apache-2.0（自带 LICENSE.txt；Copyright 2026 Anthropic, PBC.）Commit 41bbe19d1a
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The mechanism follows a two-stage 'scaffolding + bundling' pipeline: init-artifact.sh uses pnpm create vite on the fly to generate a React-TS project, installs Tailwind and shadcn dependencies, and unpacks 43 pre-packaged shadcn/ui components; bundle-artifact.sh builds the project using Parcel and inlines it into a single bundle.html via html-inline.

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`
Actual script execution: in the init script, 'pnpm create vite "$PROJECT_NAME" --template react-ts' → 'tar -xzf "$COMPONENTS_TARBALL" -C src/'; in the bundle script, 'pnpm exec parcel build index.html --dist-dir dist --no-source-maps' → 'pnpm exec html-inline dist/index.html > bundle.html'.

Components are shipped directly with the package rather than fetched on demand: shadcn-components.tar.gz bundles 40+ components/ui/*.tsx files, ready to use via offline extraction, avoiding component-by-component CLI downloads.

skills/web-artifacts-builder/SKILL.md
✅ 40+ shadcn/ui components pre-installed
Verified 43 components/ui/*.tsx files in the tarball (accordion/alert/badge/…/sonner/drawer/resizable, etc.), matching the '40+' claim; dependencies (full @radix-ui/react-* suite, sonner/cmdk/vaul/zod, etc.) are installed by the init script via pnpm install.

Output philosophy = a single self-contained HTML file: bundle.html inlines all JS, CSS, and dependencies, ready to be shared directly as a claude.ai artifact or opened in a browser.

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.
Path aliases are resolved during build time via .parcelrc (parcel-resolver-tspaths); 'Builds with Parcel (no source maps)' + html-inline handles inlining.

Scope discipline: Exclusively serves 'multi-component / stateful / routed / complex interactive' artifacts; simple single-file HTML/JSX is explicitly out of scope (complexity must be evaluated before triggering).

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.
This is the negative boundary defined in the description—preventing over-engineering, and marking the primary separation between this skill and basic 'HTML generation'.

Testing/visualization is explicitly downgraded to an optional post-generation step: Avoids adding latency before the user can see the finished artifact; issues are tested only if they arise.

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…'—deliberate interaction pacing design.

Built-in anti-'AI slop' styling rules: Explicitly bans overly centered layouts, purple gradients, uniform border-radii, and the Inter font.

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.
Belongs to the same family of anti-AI-artifact checklists as the pptx skill—reflecting Anthropic-style skills' consistent approach to avoiding 'generated patterns'.

2Core Capabilities

01One-click initialization of React 18+TS+Vite+Tailwind 3.4.1+shadcn/ui projects (including path aliases and Tailwind theme variables)
0240+ bundled shadcn/ui components (43 included in tarball with full Radix dependencies)
03Parcel bundling + html-inline single-file generation (no source maps, path alias resolution)
04Node version adaptation: detects ≥18 and automatically pins Vite version (uses legacy versions for <20)
05Complex frontend artifact (state management/routing/component libraries) development workflow + presentation/deferred-testing cadence
06Built-in anti-AI-slop design specifications (bans excessive centering/purple gradients/uniform border-radii/Inter font)

3External Dependencies

KindDependency / Endpoint
networknpm registry（registry.npmjs.org）
packagecreate-vite / vite / tailwindcss@3.4.1 / 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
packageparcel / @parcel/config-default / parcel-resolver-tspaths / html-inline（打包期，bundle 脚本安装）
clinode ≥18 / pnpm（宿主环境）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Executes local scripts or commands: init-artifact.sh / bundle-artifact.sh (bash) → internally runs pnpm (create/install/add/e
  • 网络端点: Declares external network access: During each initialization: registry.npmjs.org (pnpm create vite, multiple rounds of pnpm install dependencies, pnpm add parcel
  • 本地工作目录: File read/write and artifact output: Complete project directory (package.json/tsconfig/vite.config/src components, etc.)
Audit Notes: Each run pulls and executes numerous third-party packages from the official npm registry via pnpm (latest create-vite, tailwind, @radix-ui/react-*, parcel, etc.; most versions are not pinned except tailwindcss@3.4.1), exposing a supply-chain execution surface dependent on remote third-party packages (typical Orange tier); pnpm also reads user npm configs (which may contain registry tokens). The skill itself does not read credentials and has no dedicated endpoints; scripts write project directories and execute builds locally. Usage recommendation: Use within auditable dependency environments (lockfiles/proxies/offline mirrors) or isolated sandboxes, and inspect versions of fetched packages.

5Second-Pass Verification

  • [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：tailwindcss@3.4.1 固定，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。

6Verdict & Scenarios

  • Brings the React engineering toolchain directly into agent workflows: a trifecta of scaffolding, pre-packaged components, and single-file bundling, producing artifacts ready for claude.ai.
  • Offline component distribution bundled as tar.gz (43 components), offering higher installation determinism than fetching components one-by-one via CLI.
  • Clear scope discipline: strictly for complex interactive artifacts, excluding simple HTML.
  • Interaction-friendly testing cadence (present first, test later) optimized for artifact review.
  • Built-in visual rules against AI slop.
    • Best for: Ideal for building frontend artifacts in Claude/managed environments requiring state management, routing, and multi-component interactions (dashboards, documentation sites, utility pages), provided internet access for package installation is permitted; teams can use it to unify React+Tailwind+shadcn baselines against inconsistent handcrafted styles.
    Not for: Not suitable for offline or restricted network environments (unable to install packages); not suitable for simple static pages or single-file components (too heavy, explicitly noted in SKILL); not suitable for sensitive build chains with zero tolerance for external supply chain risks requiring lockfile audits (unless routed through proxies/mirrors); not suitable for scenarios requiring frequent, fine-grained scaffolding customizations (scripts use fixed templates).
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload web-artifacts-builder.tar.gz
    sha256: c56ef465edf880ee…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 41bbe19d1a.