Agent skill · software engineering · davila7
web-artifacts-builder
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.
Why this skill is useful
Adds 2 executable scripts for initializing and bundling complex React artifacts that aren't in public documentation.
What it needs
Requires node installed locally. About 2k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Web Artifacts Builder To build powerful frontend claude.ai artifacts, follow these steps: 1. Initialize the frontend repo using scripts/init-artifact.sh 2. Develop your artifact by editing the generated code 3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh 4. Display artifact to user 5. (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. Quick Start Step 1: Initialize Project Run the initialization script to create a new React project: This creates a fully configured project with: ✅ React + TypeScript (via Vite) ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system ✅ Path aliases (@/) configured ✅ 40+ shadcn/ui components pre-installed ✅ All Radix UI dependencies included ✅ Parcel configured for bundling (via .parcelrc) ✅ Node 18+ compatibility (auto-detects and pins Vite version) Step 2: Develop Your Artifact To build the artifact, edit the generated files. See Common Development Tasks below for guidance. Step 3: Bundle to Single HTML File To bundle the React app into a single HTML artifact: This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact. Requirements: Your project must have an index.html in the root directory. What the script does: Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline) Creates .parcelrc config with path alias support Builds with Parcel (no source maps) Inlines all assets into single HTML using html-inline Step 4: Share Artifact with User Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/web-artifacts-builder