web-artifacts-builder
Installation
Summary
Multi-component React artifacts for Claude with bundling, state management, and shadcn/ui component library.
- Scaffolds React 18 + TypeScript projects with Vite, Tailwind CSS, and 40+ pre-installed shadcn/ui components via automated initialization script
- Bundles complete artifacts into single self-contained HTML files with inlined assets, ready for Claude artifact display
- Includes design guidance to avoid common "AI slop" patterns like excessive centering, purple gradients, and uniform rounded corners
- Supports complex workflows requiring routing, state management, and Radix UI dependencies out of the box
SKILL.md
Web Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
- Initialize the frontend repo using
scripts/init-artifact.sh - Develop your artifact by editing the generated code
- Bundle all code into a single HTML file using
scripts/bundle-artifact.sh - Display artifact to user
- (Optional) Test the artifact
Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
Design & Style Guidelines
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.