web-artifacts-builder
by anthropics5 months ago177.9kSuite 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.
Install
Show step-by-stepHide step-by-step
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.
Where it lives
First 3 tasks to try
- 1✅ React + TypeScript (via Vite)
- 2✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
- 3✅ Path aliases (@/) configured
Related skills
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
finishing-a-development-branch
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work
test-driven-development
Use when implementing any feature or bugfix, before writing implementation code
requesting-code-review
Use when completing tasks, implementing major features, or before merging to verify work meets requirements