AutomationNewFreeWorks in Claude Code · Claude app · Codex
Web Artifacts Builder
Build rich, interactive web apps and artifacts in Claude — React & Tailwind.
Part of Anthropic skills ↗Web Artifacts Builder is an official Anthropic skill for creating elaborate, multi-component claude.ai artifacts with modern web tech — React, Tailwind CSS, and shadcn/ui. It's for interactive builds that need state, routing, or real components — a step up from simple one-file snippets.
What it does
- Builds multi-component interactive artifacts in Claude.
- Uses React, Tailwind CSS, and shadcn/ui components.
- Handles state and routing for richer apps.
What's in the download
- SKILL.md plus an artifact scaffolding toolkit.
How to install (2 minutes)
Same download for Claude Code, Claude app, Codex — follow the step for the tool you use.
- 1Download the .zip and unzip it — you’ll get a folder called web-artifacts-builder.
- 2In the Claude app: open Settings → Capabilities → Skills, choose Add / Upload, and select the folder (or the .zip).
- 3In Claude Code: drop the folder into your project’s .claude/skills/ directory, then type /skills to confirm it loaded.
- 4In Codex: drop the folder into ~/.agents/skills/ (or your project’s .agents/skills/), then type /skills — or call it directly with $web-artifacts-builder.
- 5That’s it — the skill activates on its own when it fits what you’re doing.
Want to get the most out of your new skill?
Inside Hands-On AI Club we show you exactly how to use skills like this in real work — with step-by-step courses and a community to help you.