# Web Artifacts Builder (agent skill)

> Web Artifacts Builder is an agent skill (a SKILL.md file) from anthropics/skills. Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). It works with Claude Code and has 179,945 GitHub stars across a repository of 9 listed skills.

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. To build powerful frontend claude.ai artifacts, follow these steps: 1. Initialize the frontend repo using scripts/init-artifact.sh 2. Develop your artifact by editing the generated code 3.

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/anthropics/skills |
| Skill path | skills/web-artifacts-builder/SKILL.md |
| Skill name | web-artifacts-builder |
| GitHub stars | 179,945 |
| Installs on skills.sh | 106,219 |
| License | Apache-2.0 |
| Skills in repo | 9 |
| Plugin marketplace | anthropic-agent-skills |
| Official | yes |
| Works with | Claude Code |
| Category | Design & frontend |
| Last commit | Oct 5, 2026 |

## When it triggers

- Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

## Add this skill

### Claude Code

```sh
/plugin marketplace add anthropics/skills
/plugin   # browse anthropic-agent-skills and install the plugin that contains web-artifacts-builder
```

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/anthropics/skills.git
cp -r skills/skills/web-artifacts-builder .agents/skills/web-artifacts-builder   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/anthropics/skills.git
cp -r skills/skills/web-artifacts-builder .cursor/skills/web-artifacts-builder   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

skills.sh listing: https://www.skills.sh/anthropics/skills/web-artifacts-builder

---

Canonical page: https://appsgit.com/skills/anthropics-web-artifacts-builder
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.