web-artifacts-builder Skill
Skill Claude Code Web & App DevelopmentClaude Code Customization & WorkflowThe explanation below is AI-generated. Please verify it against the sources.
web-artifacts-builder is a Claude skill (a suite of tools) for creating complex, multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui. According to the SKILL.md, it is intended for artifacts that require state management, routing, or shadcn/ui components, and not for simple single-file HTML/JSX artifacts. The workflow involves initializing a project with a script, developing the code, bundling everything into a single self-contained HTML file, and sharing that file as the artifact. The source also notes optional testing/visualization and provides design guidance to avoid so-called "AI slop" visual patterns.
What you can do with web-artifacts-builder
- Initialize a preconfigured React + TypeScript project (via Vite) using scripts/init-artifact.sh, which includes Tailwind CSS 3.4.1 with shadcn/ui theming, @/ path aliases, 40+ pre-installed shadcn/ui components, Radix UI dependencies, Parcel bundling config (.parcelrc), and Node 18+ compatibility
- Develop the artifact by editing the generated project files
- Bundle the project into a single self-contained bundle.html file using scripts/bundle-artifact.sh, which installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline), builds with Parcel (no source maps), and inlines all assets
- Share the resulting bundle.html file in a claude.ai conversation as the finished artifact
- Optionally test or visualize the artifact using tools such as Playwright or Puppeteer, generally after presenting it rather than upfront
- Follow design guidance to avoid excessive centered layouts, purple gradients, uniform rounded corners, and Inter font
- Reference the shadcn/ui components documentation (linked in the source) when building UI
Sources
Original description (English)
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.