Web Artifacts Builder

Reviewed 2026-10-21codingPrompt / Rule# react # tailwind # shadcn-ui # frontend # html

Anthropic skill that scaffolds a React, TypeScript, Tailwind and shadcn/ui project and bundles it into one self-contained HTML file.

Security Reviewed

Runs local bash scripts that install npm packages (and pnpm globally) and write project files; no API keys or non-npm network calls.

Install Web Artifacts Builder in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "Web Artifacts Builder" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/web-artifacts-builder.md (source: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Clone the source repository
```
git clone --depth 1 https://github.com/anthropics/skills /tmp/anthropic-skills
```
Download the repository that contains the skill to a temporary folder.
2. Copy the skill into your workspace
```
mkdir -p .agents/skills && cp -r /tmp/anthropic-skills/skills/web-artifacts-builder .agents/skills/
```
Run this from your project root. Antigravity reads workspace skills from <project>/.agents/skills/<folder>/, so you should end up with .agents/skills/web-artifacts-builder/SKILL.md.
3. Or install it globally
```
mkdir -p ~/.gemini/config/skills && cp -r /tmp/anthropic-skills/skills/web-artifacts-builder ~/.gemini/config/skills/
```
Use this instead of the workspace copy to have the skill in every project (Antigravity docs: ~/.gemini/config/skills/). For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
4. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. web-artifacts-builder is listed.

The anthropics/skills README does not mention Antigravity. Needs Node.js 18+, bash and network access to npm; the init script installs pnpm globally if it is missing. The scripts handle macOS and Linux shells (they check OSTYPE for sed), so on Windows use WSL or Git Bash. Keep scripts/shadcn-components.tar.gz next to the scripts.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Web Artifacts Builder?

Web Artifacts Builder is Anthropic's skill for building multi-component web UIs: a script scaffolds a React, TypeScript, Vite, Tailwind and shadcn/ui project, and a second script bundles it into one self-contained bundle.html. It is for developers who want a polished interactive page or mini app, not a simple single-file page.

How to use Web Artifacts Builder?

Ask for a complex interactive page or mini app. The agent runs bash scripts/init-artifact.sh <project-name>, edits the generated code, then runs bash scripts/bundle-artifact.sh in the project root to produce bundle.html.

Key features of Web Artifacts Builder

✓We counted at 683bc88: the folder has 5 files (SKILL.md 73 lines, init-artifact.sh 322 lines, bundle-artifact.sh 53 lines, a 19,967-byte component tarball, LICENSE.txt).
✓We counted: the tarball holds 43 shadcn/ui component files plus lib/utils.ts and hooks/use-toast.ts; init-artifact.sh installs 26 @radix-ui packages (SKILL.md says "40+ shadcn/ui components").
✓We counted: init-artifact.sh pins Tailwind 3.4.1 and needs Node 18+; Vite is pinned to 5.4.11 only on Node 18 and is @latest on Node 20+. SKILL.md lists React 18, but the script pins no React version (pnpm create vite --template react-ts), so React follows create-vite.
✓We counted: bundle-artifact.sh uses pnpm directly and does not install it (only init-artifact.sh does), needs an index.html in the project root, and adds parcel, @parcel/config-default, parcel-resolver-tspaths and html-inline as devDependencies on every run.
✓README says: the skill ships in the example-skills plugin; we counted 12 skills in that plugin (.claude-plugin/marketplace.json) out of 19 skill folders in skills/.
✓SKILL.md says: avoid centered layouts, purple gradients, uniform rounded corners and the Inter font; testing is optional and should be done after showing the result.

When to use Web Artifacts Builder

1Interactive dashboard or kanban board as one HTML file
2Prototype with shadcn/ui components and state
3Share a bundled mini app as a single file

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure Web Artifacts Builder in your development environment.

Step 1: Add the Anthropic skills marketplaceclaude

/plugin marketplace add anthropics/skills

Run inside Claude Code. Source: anthropics/skills README, Claude Code section.

Step 2: Install the example-skills pluginclaude

/plugin install example-skills@anthropic-agent-skills

web-artifacts-builder is part of example-skills (README; listed in .claude-plugin/marketplace.json).

Step 3: Cursorcursor

Not documented by the project.

Usage Example & Verification

Prompt / Request Example

1) Our example: "Use the web artifacts builder to make a kanban board with drag and drop columns, shadcn/ui cards and a dark mode toggle, bundled as one HTML file."
-> The agent runs bash scripts/init-artifact.sh kanban, edits src/, then bash scripts/bundle-artifact.sh in the project root and hands you bundle.html.

2) Our example: "Build a pricing calculator with tabs and a slider, then bundle it."
-> Uses the pre-installed tabs and slider components; the bundle is one file you can open in a browser.

3) Our example: "Rebundle the project after my edits and tell me the file size."
-> Re-runs bundle-artifact.sh, which deletes dist/ and bundle.html first, then prints the size of the new bundle.html.

(The anthropics/skills README has no example for this skill.)

Security Review

Static review

Reviewed Date

2026-10-21

Audited Ref / Commit

683bc88e56f3e09ba94f7055977f3d3aa499f202

Reviewer

antigravityskills.org (static code review)

Runs local bash scripts that install npm packages (and pnpm globally) and write project files; no API keys or non-npm network calls.

Full review: scope, findings, risks

Audit Scope:anthropics/skills at 683bc88 (2026-10-05), re-checked on 2026-10-21 against HEAD dbd4588 (2026-10-09): skills/web-artifacts-builder is unchanged (last commit b9e19e6, 2026-04-20). Read SKILL.md, scripts/init-artifact.sh, scripts/bundle-artifact.sh and LICENSE.txt in full, listed the contents of scripts/shadcn-components.tar.gz (without extracting it into a project), read README.md and .claude-plugin/marketplace.json. Static review only.

Key Findings:Two bash scripts that scaffold and bundle a frontend project via pnpm; a tarball of shadcn/ui component sources, a lib/utils.ts and a use-toast hook.

Identified Operational Risks & Permissions:Global npm install of pnpm, many third-party npm dependencies installed at "latest" or caret versions, and rm -rf of dist/ and bundle.html in the working project.

At commit 683bc88 scripts/init-artifact.sh checks the Node version, runs npm install -g pnpm if pnpm is missing, runs pnpm create vite, installs Tailwind, Radix UI and other packages, writes config files (postcss.config.js, tailwind.config.js, vite.config.ts, components.json, src/index.css), edits tsconfig files with node -e and extracts scripts/shadcn-components.tar.gz into src/. scripts/bundle-artifact.sh installs parcel, @parcel/config-default, parcel-resolver-tspaths and html-inline, runs rm -rf dist bundle.html, then builds and inlines into bundle.html. Neither script uses curl, wget or environment secrets; network use is limited to the npm registry through pnpm. The tarball holds TypeScript component sources only. Main risks are supply-chain exposure from unpinned npm dependencies and the global pnpm install. This is a static review; we did not run the scripts.

Operational Notes & Known Limitations

Known Limitations

•Needs Node.js 18+, bash and network access to npm; the scripts target macOS and Linux shells.
•init-artifact.sh runs npm install -g pnpm if pnpm is missing.
•bundle-artifact.sh deletes dist/ and bundle.html in the project before rebuilding.
•Not meant for simple single-file HTML or JSX pages.

Frequently Asked Questions

Is the Web Artifacts Builder skill safe?

In our static review of commit 683bc88 it runs two bash scripts that install npm packages (and pnpm globally if missing) and write project files. We found no curl, wget, API keys or non-npm network calls; the risk is unpinned npm dependencies.

How do I install Web Artifacts Builder in Antigravity?

The anthropics/skills README does not mention Antigravity. Copy skills/web-artifacts-builder into .agents/skills/ (or ~/.gemini/config/skills/), keep scripts/shadcn-components.tar.gz next to the scripts, then ask "What skills do you have?" (CLI: /skills).

What does the output look like?

A single bundle.html with JavaScript, CSS and assets inlined, built from a React, Tailwind and shadcn/ui project.

Does it work in Claude Code or Cursor?

Claude Code: README documents /plugin marketplace add anthropics/skills, then /plugin install example-skills@anthropic-agent-skills. Cursor: not documented by the project.

Supported Platforms

antigravityclaude

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More coding skills #react #tailwind #shadcn-ui #frontend Use cases

Related Skills

💻

shadcn/ui

@shadcn-ui

Official shadcn/ui skill: project-aware rules for adding, searching, composing and styling shadcn components via the shadcn CLI.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

shadcn-uireact

🎨

UI/UX Pro Max

@nextlevelbuilder

Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

mediaui

💻