Skip to content
HUIAHUB

anthropics/skills/skills/web-artifacts-builder

Web artifacts builder

Builds complex, multi-component claude.ai HTML artifacts with React, Tailwind CSS and shadcn/ui, for work needing state, routing or shadcn/ui components rather than single-file artifacts.

Agent skillAgent skills
View the skill on GitHub (opens in a new tab)

What Web artifacts builder does

This skill turns a React project into a single HTML file that can be shared as a claude.ai artifact. The agent starts by running scripts/init-artifact.sh <project-name>. That script checks for Node 18 or newer, installs pnpm globally with npm if it is missing, creates a Vite React TypeScript project and adds Tailwind CSS 3.4.1, Radix UI and a long list of other packages. It also writes config files for path aliases and theming, then extracts a bundled archive of shadcn/ui components into src/.

Next, the agent edits the generated code to build the artifact. Running scripts/bundle-artifact.sh installs Parcel and html-inline, builds the project without source maps and inlines every script, stylesheet and asset into bundle.html. The project needs an index.html at its root for this step. The agent then shares that file with the user.

Testing is optional. The SKILL.md tells the agent to skip it up front to keep latency down, and to test afterwards with tools such as Playwright or Puppeteer if the user asks or something breaks. It also sets a short design rule: go easy on centered layouts, purple gradients, uniform rounded corners and the Inter font.

Install

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

Read the security check below before you run it. The repository's own instructions win if they differ.

Security check

What the skill's files do, from reading them. A flag that nobody has checked yet says "Not checked", never "No".

Runs scripts
Yes
Uses the network
Yes
Installs hooks
No
Asks for secrets
No

The scan found two shell scripts and network use, and no hook definitions or secret variables. init-artifact.sh installs pnpm globally through npm when it is missing, creates a project with pnpm create vite, installs dozens of npm packages and extracts the bundled shadcn-components.tar.gz into src/. bundle-artifact.sh installs Parcel and html-inline, deletes any existing dist folder and bundle.html, then rebuilds them. Before installing, read both scripts, extract and inspect the archive, decide whether a global pnpm install is acceptable, and run the first build in a throwaway directory.

Scan details: Ships 2 script files: scripts/bundle-artifact.sh, scripts/init-artifact.sh. SKILL.md instructions include web requests or URLs to fetch. skills/web-artifacts-builder/scripts/init-artifact.sh makes network requests. Checked at commit 8a1541c4a3ff.

Use cases

  • Build a claude.ai artifact that needs state management or routing.
  • Package a Vite React app as one self-contained HTML file.
  • Prototype an interface from the bundled set of shadcn/ui components.

Limitations

  • Its own description rules it out for simple single-file HTML or JSX artifacts.
  • Needs bash, Node 18 or newer, and network access to install npm packages.
  • Installs pnpm globally through npm when pnpm is not already present.
  • Testing is skipped by default unless the user asks or problems appear.

Sources