web-artifacts-builder agent skill by anthropics
Builds elaborate multi-component claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui, for complex artifacts needing state management, routing, or shadcn/ui components.
At a glance
| Publisher | Anthropic Official |
|---|---|
| Repository | anthropics/skills (17 listed skills) |
| Category | Frontend and Design |
| License | Apache-2.0 |
| Last commit | October 9, 2026 (repository) |
| SKILL.md | 68 lines, 399 words |
| Bundled files | 5 files, including scripts |
| Quality score | 87/100 · B Passes all seven graded checks |
| Security scan | Not scanned |
| README badge | Get the badges for this listing |
Before you install
Read from the skill's files at the directory's October 19, 2026 snapshot: what ships with it, what its code reads, and the terms it is published under.
- Bundled scripts: 2 script files (2 Shell). Your agent may run them, so read them first.
- License: Apache-2.0, an open-source or open-content license.
Install web-artifacts-builder
The skills CLI works with Claude Code, Codex, Cursor and other agents; the other routes copy the folder by hand.
npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-buildertmp="$(mktemp -d)"
git clone --depth 1 https://github.com/anthropics/skills.git "$tmp/repo"
mkdir -p .claude/skills
cp -R "$tmp/repo/"skills/web-artifacts-builder .claude/skills/
rm -rf "$tmp"python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
--repo anthropics/skills \
--path skills/web-artifacts-builderanthropics/skills is third-party code. Read SKILL.md and any bundled scripts before you install it.
How the author describes it
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.
From the description field of SKILL.md. Agents read this line to decide when to load the skill.
Sections in SKILL.md
- 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
Files in the skill folder
LICENSE.txtSKILL.mdscripts/bundle-artifact.shscripts/init-artifact.shscripts/shadcn-components.tar.gz
Suede Skill Check: 87/100 · B
Report snapshot · · graded-v2
The rubric totals 100 points; published scores are capped at 99. Security scan: not scanned.
Source revision: dbd4588f9e10. Report version 32e99a0f9307. Badge URLs follow the latest listing; save the report to keep this version.
Download report · Request a fresh review
What to review next
- Example request: 0 of 3 points. 3 when the description quotes an example request (3–60 characters in quotation marks).
- Instruction depth: 4 of 7 points. 7 for a SKILL.md body of 500–3,000 words; 4 for 250–4,500; 1 for 100 or more.
- Reference files: 0 of 3 points. 3 when the skill folder ships a references/, reference/ or docs/ folder.
Add declarations and bundled files when they describe the skill’s actual needs. Update the source, then request a fresh review with the changed commit or PR.
web-artifacts-builder passes the required frontmatter check and all seven graded checks, which cover the SKILL.md format, a declared license and a commit in the last year. Those checks earn 56 of the score’s points; the rest come from description quality, instruction depth, bundled files, maintenance and curated-list citations. How the score works.
See the checks and points
| Check | Result |
|---|---|
| Frontmatter parses and declares a name and a description | Pass |
| Name uses lowercase letters, digits and hyphens, 64 characters or fewer | Pass |
| Name matches the skill's folder name | Pass |
| Description is between 50 and 1,024 characters | Pass |
| Description says when an agent should use the skill | Pass |
| SKILL.md body is 500 lines or fewer | Pass |
| A license is declared in the frontmatter or the repository | Pass |
| Repository has a commit in the last 12 months | Pass |
| Score component | Points |
|---|---|
| Structural checks | 56 of 56 |
| Description length | 5 of 5 |
| Boundary clause | 4 of 4 |
| Example request | 0 of 3 |
| Instruction depth | 4 of 7 |
| Reference files | 0 of 3 |
| Bundled scripts | 2 of 2 |
| Recent maintenance | 9 of 9 |
| Curated-list citations | 7 of 7 |
| Tool permissions declared | 0 of 2 |
| Compatibility declared | 0 of 2 |
Two badges for web-artifacts-builder
Choose the numeric badge, the letter badge, or both. Each links to this skill’s Suede listing; either valid linked badge can qualify for the feature offer.
[](https://skills.suedeai.ai/directory/anthropics/skills/web-artifacts-builder/)
[](https://skills.suedeai.ai/directory/anthropics/skills/web-artifacts-builder/)<a href="https://skills.suedeai.ai/directory/anthropics/skills/web-artifacts-builder/"><img src="https://skills.suedeai.ai/directory/anthropics/skills/web-artifacts-builder/score.svg" alt="Suede Skill Check: 87/100" width="160" height="175"></a>
<a href="https://skills.suedeai.ai/directory/anthropics/skills/web-artifacts-builder/"><img src="https://skills.suedeai.ai/directory/anthropics/skills/web-artifacts-builder/badge.svg" alt="Suede Skill Check: Grade B" width="160" height="175"></a>Suede Certified on the shield refers to this published structural quality check. Security scan: not scanned. Read the methodology.
Limited-time feature offer: display either the numeric or letter badge in your repository or skill README (both also qualify), then request badge verification. Eligible skills scoring 80–99 can receive a featured placement after Suede verifies at least one valid badge linked to the skill’s listing. Suede has not announced an end date.
Where this skill is cited
anthropics/skills appears in 7 curated lists: BehiSecc/awesome-claude-skills, ComposioHQ/awesome-claude-skills, heilcheng/awesome-agent-skills, hesreallyhim/awesome-claude-code, karanb192/awesome-claude-skills, skillmatic-ai/awesome-agent-skills, travisvn/awesome-claude-skills.