web-artifacts-builder

Use this Skill to scaffold a React project with Tailwind CSS and shadcn/ui, then bundle it into a single self-contained HTML file. Run the init script to set up your project, develop your components, and use the bundle script to create a shareable artifact for Claude.

This Skill automates scaffolding of React artifacts with built-in routing and state management capability. Initialize a project with the provided bash script, edit your components, and bundle into a single HTML file without manual configuration.

Yes. This Skill is built around that exact stack—React for logic, Tailwind CSS for styling, and shadcn/ui for pre-built components. The initialization and bundling scripts handle all setup so you can focus on building your interface.

Yes. You need Node.js installed and pnpm as your package manager. The Skill uses Vite for development and Parcel for bundling, which are installed as dependencies when you initialize your project.

After running the bundle script, you get a single bundle.html file containing your entire React application. Share this HTML file directly in Claude conversations—it runs standalone without external dependencies.

Single-file bundling works best for self-contained interfaces and demos. Complex artifacts with very large asset libraries or real-time server dependencies may face size constraints or require architectural adjustments for Claude's artifact delivery.