skills.rest
wolfmanstout
wolfmanstoutCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-artifacts-builder

Creates and bundles React, Tailwind, and shadcn/ui projects into single HTML artifacts.

Updated Feb 17, 2026
Search Tags:#frontend#react#shadcn/ui#tailwind css#vite#html artifact#bundling
One-click install
npx skills add https://github.com/wolfmanstout/agent-skills --skill web-artifacts-builder-wolfmanstout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/wolfmanstout/agent-skills/tree/main/subtrees/skills/skills/web-artifacts-builder
Command: npx skills add https://github.com/wolfmanstout/agent-skills --skill web-artifacts-builder-wolfmanstout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, vite, tailwindcss, parcel, html-inline, parcel-resolver-tspaths, shadcn-ui, lucide-react, next-themes, sonner, cmdk, vaul, embla-carousel-react, react-day-picker, react-resizable-panels, date-fns, react-hook-form, zod, and includes scripts (resource) components.

What problem does it solve? Building complex claude.ai HTML artifacts with state management, routing, or component libraries requires a full frontend toolchain, but artifacts must be delivered as a single self-contained HTML file. This Skill scaffolds a complete React project and bundles it into one shareable HTML artifact. ## Core Features & Use Cases - Project Initialization: Generates a fully configured React 18 + TypeScript + Vite project with Tailwind CSS, path aliases, and 40+ pre-installed shadcn/ui components via scripts/init-artifact.sh. - Single-File Bundling: Uses Parcel and html-inline via scripts/bundle-artifact.sh to inline all JavaScript and CSS into one bundle.html artifact. - Node Compatibility Handling: Auto-detects Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: Build an interactive dashboard artifact with tabs, charts, and dialogs using shadcn/ui components, then bundle it into a single HTML file to share directly in a Claude conversation. ## Quick Start Ask the assistant to initialize a new web artifact project with the init script, develop the React components, and then bundle everything into a single HTML artifact for sharing.

Frequently Asked Questions about web-artifacts-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bundle a React app into a single HTML file?▼

Run the bundle-artifact.sh script from your project root. It installs Parcel and html-inline, builds the app without source maps, and inlines all JavaScript and CSS into a single bundle.html file.

How to create a React project with shadcn/ui components pre-installed?▼

Run init-artifact.sh with a project name. It scaffolds a Vite React-TypeScript project, configures Tailwind CSS with shadcn theming, adds path aliases, and extracts 40+ shadcn/ui components from a bundled tarball.

Does this work with Node.js 18?▼

Yes, the init script detects your Node version automatically. For Node 18 it pins Vite to version 5.4.11 for compatibility, while Node 20 and above use the latest Vite release.

When should I not use this artifact builder?▼

Avoid it for simple single-file HTML or JSX artifacts that do not need state management, routing, or shadcn/ui components. The full React toolchain adds unnecessary build steps for trivial artifacts.

Why does the bundle script fail with no index.html found?▼

The bundling script requires an index.html entry point in the project root and must be run from the directory containing package.json. Verify you are in the project root created by the init script before bundling.

Related Skills

Explore More Software Engineering Skills→
guanyangguanyang
960

web-artifacts-builder

Builds and bundles React, Tailwind, and shadcn/ui projects into single-file HTML artifacts.

Community
Intermediate
akornmeierakornmeier
4

cloudflare-browser-rendering

Control headless browsers via Cloudflare's Browser Rendering API for automation.

Community
Advanced
giang6283623giang6283623
4

visual-design-loop

Automate iterative render-review-fix loops for UI polish.

Community
Advanced
GGGODLINGGGODLIN

web-artifacts-builder

Builds React/TypeScript/Vite/Tailwind/shadcn-ui projects into a single HTML file.

Community
Advanced