Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Web Artifacts Builder

Official

Official skill that scaffolds a React + Tailwind + shadcn/ui app and bundles it into a single self-contained HTML artifact.

Dev & CodingIntermediate★ 167,132⑂ 19,920AI score 9/10Last updated: Aug 7, 2026

What it does

Lets Claude build real frontend applications that can be shown as claude.ai artifacts.

  • scripts/init-artifact.sh scaffolds a React 18 + TypeScript + Vite project with Tailwind 3.4.1, 40+ preinstalled shadcn/ui components, Radix UI deps, and @/ path aliases
  • After you edit the code, scripts/bundle-artifact.sh runs Parcel + html-inline to inline every script, style, and asset into one bundle.html
  • That single file is shared straight into the conversation as an artifact
  • Optional post-hoc testing with Playwright or Puppeteer

It also ships opinionated design guidance to avoid "AI slop" — no excessive centered layouts, purple gradients, uniform rounded corners, or Inter everywhere.

Who it's for

  • Builders who need complex artifacts with state management, routing, or multiple views
  • Developers and designers who want polished shadcn/ui demos fast
  • Anyone who must hand off a working UI as one portable HTML file
  • Not for you if a simple single-file HTML/JSX artifact would do — this is deliberate overhead.

Examples

  1. Admin dashboard: "Build a revenue dashboard with KPI cards, charts, and a sidebar" → multi-component React app bundled to bundle.html.
  2. Interactive learning tool: A quiz app with tabs, modals, and form validation built from shadcn/ui primitives, delivered as one HTML file.
  3. Client-facing microsite: A landing page with routing and a dark-mode toggle, emailed as a single attachment.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/web-artifacts-builder folder from the GitHub repo anthropics/skills into my ~/.claude/skills/web-artifacts-builder/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills && mkdir -p ~/.claude/skills && cp -r /tmp/anthropic-skills/skills/web-artifacts-builder ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and confirm Node.js 18 or newer is installed: node -v
  2. Clone the official skills repo: git clone https://github.com/anthropics/skills.git
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy just this skill: cp -r skills/skills/web-artifacts-builder ~/.claude/skills/
  5. Make the helper scripts executable: chmod +x ~/.claude/skills/web-artifacts-builder/scripts/*.sh
  6. Restart Claude Code and ask something like "Use the web-artifacts-builder skill to create a dashboard artifact."
  7. The first run installs many npm packages, so keep your network connection active — it can take a few minutes.
View source on GitHub ↗