Agent skill · Anthropic

Web Artifacts Builder skill for Claude Code, Codex and Cursor

Builds multi-component HTML artifacts with React, Tailwind and shadcn/ui, bundled into one file.

Officialname: web-artifacts-builder★ 184k (repo)pushed 2026-10-09See repoSKILL.md on GitHubchecked 2026-11-07

What it does, in the publisher's words

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.

The description field of the SKILL.md. The agent reads only this at startup and decides from it when to load the full skill.

Install Web Artifacts Builder

The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs

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

This repo is a plugin marketplace. Inside Claude Code, add it and install the plugin that holds the skill (document-skills, example-skills, claude-api, academy-guide...), or copy only this skill into ~/.claude/skills. docs

/plugin marketplace add anthropics/skills
/plugin install <plugin>@anthropic-agent-skills

# or only this skill:
npx skills add anthropics/skills --skill web-artifacts-builder -a claude-code

Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs

git clone --depth 1 https://github.com/anthropics/skills.git /tmp/web-artifacts-builder-src
cp -r /tmp/web-artifacts-builder-src/skills/web-artifacts-builder ./web-artifacts-builder
zip -r web-artifacts-builder.zip web-artifacts-builder

Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs

npx skills add anthropics/skills --skill web-artifacts-builder -a codex

gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs

gh skill install anthropics/skills web-artifacts-builder

Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs

npx skills add anthropics/skills --skill web-artifacts-builder -a cursor

Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs

gemini skills install https://github.com/anthropics/skills.git --path skills/web-artifacts-builder

OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs

npx skills add anthropics/skills --skill web-artifacts-builder -a opencode

Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs

npx skills add anthropics/skills --skill web-artifacts-builder -a windsurf

Works with

Claude Code, Claude.ai and Claude Desktop, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and other agents that read the open Agent Skills format.

Bundles 2 shell scripts the agent can run, so it needs shell on the machine. In the Claude apps, code execution must be on.

What's in the SKILL.md

8 sections

Design & Style Guidelines
Quick Start
Step 1: Initialize Project
Step 2: Develop Your Artifact
Step 3: Bundle to Single HTML File
Step 4: Share Artifact with User
Step 5: Testing/Visualizing the Artifact (Optional)
Reference

Bundled files

LICENSE.txt
scripts/bundle-artifact.sh
scripts/init-artifact.sh
scripts/shadcn-components.tar.gz

Loaded only when the instructions point to them.

Facts

Skill name: web-artifacts-builder
Publisher: Anthropic (official)
Repo: anthropics/skills
License: Complete terms in LICENSE.txt
SKILL.md size: 388 words, 68 lines
Bundled files: 4, 2 scripts (shell)
Repo stars: 184k (as of 2026-10-24)
SKILL.md checked: 2026-11-07

More skills from anthropics/skills

Canvas Design: Produces posters and static artwork as PNG or PDF files, guided by a written design philosophy.
Claude API: Reference for building on the Claude API and Anthropic SDKs: models, tool use, streaming, caching, pricing.
Doc Co-authoring: Walks you through drafting specs, proposals and design docs step by step with Claude.
Word Documents (DOCX): Creates, reads and edits Word .docx files, including templates, tracked changes and formatting.
Frontend Design: Steers UI work toward deliberate visual direction and typography instead of generic template looks.
MCP Server Builder: Guide for designing and building Model Context Protocol servers that wrap external APIs as tools.
PDF: Extracts text and tables, merges, splits, fills forms and creates PDF files.
PowerPoint (PPTX): Builds, reads and edits PowerPoint decks and templates, including layouts and speaker notes.
Skill Creator: Helps write new skills, refine existing ones and test how well they trigger and perform.
Slack GIF Creator: Makes small animated GIFs sized and validated for Slack's emoji and message limits.
Web App Testing: Uses Playwright to drive a local web app, check behavior, read console logs and take screenshots.
Excel Spreadsheets (XLSX): Opens, cleans, edits and creates spreadsheets (.xlsx, .csv), including formulas and charts.

Related frontend & design skills

FAQ

What does the web-artifacts-builder skill do?+

Builds multi-component HTML artifacts with React, Tailwind and shadcn/ui, bundled into one file. In its own SKILL.md, Anthropic describes it as: "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."

How do I install the web-artifacts-builder skill?+

Run npx skills add anthropics/skills --skill web-artifacts-builder and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/web-artifacts-builder/SKILL.md; in Codex and Cursor in .agents/skills/web-artifacts-builder/.

Does Web Artifacts Builder work in Codex, Cursor and Copilot, or only Claude?+

It's a standard SKILL.md, so any agent that reads the Agent Skills format can use it: Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more.

Who maintains Web Artifacts Builder?+

Anthropic, the company or project behind it, in the anthropics/skills repo on GitHub, last pushed 2026-10-09. License: Complete terms in LICENSE.txt.

Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. Claude skills marketplace · How to install skills · MCP servers