CookiesForAI

web-artifacts-builder

Web Artifacts Builder

Web Artifacts Builder is Anthropic's agent skill for complex Claude.ai artifacts: the agent sets up a React, Tailwind and shadcn/ui project, then bundles it into one HTML file.

Agent skill by Anthropic Official · Updated

Install Web Artifacts Builder

In Claude Code, add Anthropic's skills marketplace

Terminal
/plugin marketplace add anthropics/skills

Then install the example-skills plugin, which holds this skill and Anthropic's other example skills

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

Or install only this skill, for any agent, with the skills CLI

Terminal
npx skills add anthropics/skills --skill web-artifacts-builder

In Claude.ai, Anthropic says its example skills are already available on paid plans: switch them on under Customize > Skills.

Or paste this into your coding agent: Install the agent skill web-artifacts-builder from github.com/anthropics/skills. A skill can include scripts that run on your computer, so read its source first.

What Web Artifacts Builder does

Web Artifacts Builder is an Anthropic skill for Claude.ai HTML artifacts that need state management, routing or shadcn/ui components. It is meant for complex, multi-component artifacts, not simple single-file HTML or JSX ones. The stack is React 18 with TypeScript, Vite, Tailwind CSS, shadcn/ui and Parcel for bundling. Its design rule steers away from heavily centered layouts, purple gradients, uniform rounded corners and the Inter font.

With Web Artifacts Builder, Claude runs a bundled setup script that creates a configured project with path aliases, more than 40 shadcn/ui components and their Radix UI dependencies. It needs Node 18 or later and picks a Vite version to match. Claude edits the code, then runs a second script that builds with Parcel and inlines all JavaScript, CSS and assets into a single bundle.html to share as an artifact. Testing is optional and comes after you see the result, when you ask or when issues arise.

When to use Web Artifacts Builder

  • You want a multi-view tool or dashboard in Claude.ai that needs state and routing.
  • You want shadcn/ui components in an artifact.
  • You need a React app delivered as one self-contained HTML file.

When to pick something else

  • You want a simple single-file HTML or JSX artifact: the skill says it is not for those.

Which agents Web Artifacts Builder works in

Anthropic documents Web Artifacts Builder for Claude Code, Claude.ai, Claude API. The open skills CLI also installs it into 78 agents, including Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode (we listed it with the CLI on October 1, 2026). See where each agent looks for skills.

Web Artifacts Builder is written for Claude.ai artifacts. Its scripts only need Node 18 or later and a shell, so another agent can produce the same single HTML file, but there is no artifact view outside Claude.

Web Artifacts Builder license

Web Artifacts Builder is published under Apache-2.0. Apache-2.0 comes from the LICENSE.txt in the skill's own folder (read 2026-10-01); the anthropics/skills repository has no root license file. In practice you may use, change and share the skill in any agent, commercially too, as long as you keep the license text and notices and mark your changes.

  • Design taste frontend: design-taste-frontend, the main skill in Leon Lin's Taste Skill repository, makes an AI agent read the brief, pick a design direction and build landing pages, portfolios and redesigns that avoid templated defaults. (91,799 repository stars on October 2, 2026)
  • Impeccable: Impeccable is Paul Bakaus's agent skill for frontend design: one skill with 24 commands such as audit, critique and polish, plus a launcher that runs deterministic checks for common AI design mistakes. (73,679 repository stars on October 2, 2026)
  • shadcn: shadcn is the shadcn/ui project's own agent skill: it reads your components.json, then guides the agent to find, install, compose and style shadcn/ui components with the shadcn CLI and the project's rules. (124,973 repository stars on October 2, 2026)
  • UI UX Pro Max: ui-ux-pro-max is an agent skill from Next Level Builder that gives an agent a searchable local library of UI styles, color palettes, font pairings and UX rules, and generates a design system per project. (132,343 repository stars on October 2, 2026)

More from Anthropic

  • Academy Guide: Academy Guide is Anthropic's agent skill that ends Claude's answers about using Claude with one or two matching Claude Academy courses or tutorials, and only when the match is strong. (179,326 repository stars on October 2, 2026)
  • Algorithmic Art: Algorithmic Art is Anthropic's open-source agent skill for generative art: the agent writes a short art philosophy, then builds an interactive p5.js piece with seeds and parameter sliders. (179,326 repository stars on October 2, 2026)
  • Brand Guidelines: Brand Guidelines is Anthropic's open-source agent skill that holds Anthropic's own brand colors and fonts, so an agent can give a document, slide deck or web artifact the Anthropic look. (179,326 repository stars on October 2, 2026)
  • Canvas Design: Canvas Design is Anthropic's open-source agent skill for static visual work: the agent writes a design philosophy, then makes a poster or art piece as a finished PNG or PDF file. (179,326 repository stars on October 2, 2026)

Lists that include web-artifacts-builder