Web Artifacts Builder

This is your go-to when you need to build complex Claude artifacts with React, TypeScript, and shadcn/ui components. It handles the full workflow: spins up a preconfigured Vite project with 40+ shadcn components already installed, lets you develop with proper state management and routing, then bundles everything into a single HTML file that works as a Claude artifact. The bundling step uses Parcel with inline assets so you get one shareable file. Worth noting the explicit anti-slop guidance about avoiding purple gradients and centered layouts. Skip this for simple single-file HTML stuff, but when you need actual component architecture or shadcn's design system, it beats manual setup every time.

Install to Claude Code

npx -y skills add davila7/claude-code-templates --skill web-artifacts-builder --agent claude-code