Agent skill · Anthropic
Web Artifacts Builder
Officialname: web-artifacts-builder★ 184k (repo)pushed 2026-10-09Apache-2.0SKILL.md on GitHubchecked 2026-10-24
Install
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
More 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.
Other frontend & design skills
- shadcn/ui · shadcn
- React Composition Patterns · Vercel
- React Best Practices · Vercel
- React View Transitions · Vercel
- Web Design Guidelines · Vercel
- Web Performance Audit · Cloudflare
- Figma Code Connect · Figma
- Figma Design to Code · Figma
FAQ
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.
Which agents can use Web Artifacts Builder?+
Any agent that reads the Agent Skills format (SKILL.md): 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.
Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. All agent skills · MCP servers