Anthropic / web-artifacts-builder
Build complex claude.ai HTML artifacts with React and Tailwind
This skill ships only metadata — no inline instructions. See the source repo for details.
Install this skill
One command (all agents)
Runs the npx skills CLI which auto-detects every AI coding agent you have installed (Claude Code, Cursor, Codex, OpenCode, Windsurf, Copilot, and 51 more).
npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builderAlternative: shorthand form
npx skills add anthropics/skills --skill web-artifacts-builderInstall to a specific agent
Pick the agent you use. The CLI writes the skill to that agent's standard skill directory.
npx skills add anthropics/skills --skill web-artifacts-builder --agent claude-codenpx skills add anthropics/skills --skill web-artifacts-builder --agent cursornpx skills add anthropics/skills --skill web-artifacts-builder --agent codexnpx skills add anthropics/skills --skill web-artifacts-builder --agent opencodenpx skills add anthropics/skills --skill web-artifacts-builder --agent github-copilotnpx skills add anthropics/skills --skill web-artifacts-builder --agent windsurfManual install (no CLI)
Prefer to skip the CLI? Clone the repo and drop the skill folder into your agent's skills directory.
git clone https://github.com/anthropics/skills.gitcp -r skills/skills/web-artifacts-builder ~/.claude/skills/ For other agents, replace ~/.claude/skills/ with their skill directory — see the full list.
Use it
Once installed, ask your agent to "use the web-artifacts-builder skill" or describe what you want (e.g. "Build complex claude.ai HTML artifacts with React and Tailwind"). Most agents auto-discover the skill from its SKILL.md description — no slash command needed.
npx skills. Skill files are MIT-style permissive by default — check the source repo for the actual license.
SKILL.md source
--- name: web-artifacts-builder description: Build complex claude.ai HTML artifacts with React and Tailwind ---
Want the ready-to-ship business bundle?
500+ agent skills, $15 one-time, lifetime access. 20 categories spanning content, marketing, sales, finance, legal, ops, SEO & more — finished deliverables, not drafts. Works with Claude Code, Codex, Cursor & every agent runtime.
Related skills 6
animate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
optimize
Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
colorize
Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.
bolder
Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
delight
Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
distill
Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.