Claude web-artifacts-builder skill: React and shadcn/ui apps
Anthropic’s skill for larger claude.ai artifacts built with React, Tailwind CSS and shadcn/ui.
- Type
- Skill
- Publisher
- Anthropic
- Category
- Coding
- Works in
- Claude apps, Claude Code
The Claude web-artifacts-builder skill’s SKILL.md describes it as a suite of tools for elaborate, multi-component claude.ai HTML artifacts that need state management, routing or shadcn/ui components. It is not meant for simple single-file HTML or JSX artifacts, which Claude builds without it.
Claude starts a project with the skill’s init script, which sets up React 18 with TypeScript through Vite, Tailwind CSS 3.4.1 and more than 40 preinstalled shadcn/ui components. After editing the code, Claude runs the bundle script, which builds the app with Parcel and inlines all JavaScript, CSS and dependencies into one bundle.html file that is shown to you as the artifact. Testing is optional: the skill tells Claude to present the artifact first and test later if you ask or something breaks. Its style notes ask Claude to avoid overly centered layouts, purple gradients, uniform rounded corners and the Inter font.
The skill is part of the example-skills plugin from Anthropic’s skills repository. In the Claude apps, example skills are turned on in Customize > Skills, with Code execution and file creation enabled (Use skills in Claude).
- What it does
- Builds complex claude.ai artifacts with React, Tailwind CSS and shadcn/ui, including state and routing.
- How to install
- Claude apps: turn it on under Customize > Skills (Code execution and file creation must be on).
Claude Code:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills - Source
- github.com
- Last checked
Questions
When does Claude use web-artifacts-builder instead of a normal artifact?
What does the skill hand back?
How do I install the web-artifacts-builder skill in Claude Code?
See also
Sources
Sources: names, descriptions and install commands come from Anthropic’s skills repository (github.com/anthropics/skills), its official plugin marketplace (github.com/anthropics/claude-plugins-official) and the Claude docs linked on each listing. Promptline is not affiliated with Anthropic.