skills.rest
amirbiron
amirbironCOMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, vite, tailwindcss, parcel, html-inline, shadcn-ui, pnpm, and includes scripts (resource) components.

What problem does it solve? Creating complex claude.ai artifacts with state management, routing, or shadcn/ui components 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 Scaffolding: Generates a 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 to inline all JavaScript and CSS into one bundle.html artifact via scripts/bundle-artifact.sh. - Node Compatibility Handling: Auto-detects the Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: Build an interactive dashboard artifact with tabs, dialogs, and charts using shadcn/ui components, then bundle it into a single HTML file to share directly in a Claude conversation. ## Quick Start Ask the AI to create a complex React artifact with shadcn/ui components and bundle it into a single HTML file using the web-artifacts-builder skill.

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 the shadcn theming system, adds path aliases, and extracts 40+ shadcn/ui components from a bundled tarball.

Does the artifact builder work with Node 18?▼

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

When should I not use the web artifacts 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 lightweight artifacts.

Why does bundle-artifact.sh fail with a package.json error?▼

The script must run from the project root containing package.json and index.html. If either file is missing, it exits with an error, so navigate into the initialized project directory first.

Related Skills

Explore More Software Engineering Skills→
Blake-JohnBlake-John

web-artifacts-builder

Scaffold React and Vite projects with Tailwind and shadcn/ui into bundled HTML artifacts.

Community
Advanced
Ditto190Ditto190

artifacts-builder

Bundle React projects into single HTML files for claude.ai artifacts.

Community
Advanced
cncorpcncorp

playwright-tester

Drive browsers with Playwright to capture screenshots and execute end-to-end flows.

Official
Advanced
GGGODLINGGGODLIN

web-artifacts-builder

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

Community
Advanced