skills.rest
virahitvin8
virahitvin8COMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

Builds React and shadcn/ui web apps and bundles them into single HTML artifacts.

2|Updated May 30, 2026
Search Tags:#frontend#react#shadcn/ui#tailwind css#vite#html artifact#bundling
One-click install
npx skills add https://github.com/virahitvin8/crafty-gis --skill web-artifacts-builder-virahitvin8
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/virahitvin8/crafty-gis/tree/main/GIT_STAR/assignment-generator/antigravity-skills-main/antigravity-skills-main/skills/web-artifacts-builder
Command: npx skills add https://github.com/virahitvin8/crafty-gis --skill web-artifacts-builder-virahitvin8

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating complex, multi-component claude.ai HTML artifacts with state management, routing, and modern UI components is difficult when limited to a single hand-written HTML file. This Skill scaffolds a full React project and bundles it into one self-contained HTML artifact. ## Core Features & Use Cases - Project Scaffolding: Initializes 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 via scripts/bundle-artifact.sh to inline all JavaScript and CSS into one shareable bundle.html artifact. - Environment Handling: Auto-detects Node.js version (18+) and pins a compatible Vite version, with pnpm auto-installation. - Use Case: Build an interactive dashboard artifact with dialogs, charts, and forms using shadcn/ui components, then deliver it as a single HTML file viewable directly in a Claude conversation. ## Quick Start Ask the assistant 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 create a React artifact for claude.ai with shadcn/ui?▼

Run scripts/init-artifact.sh with a project name to scaffold a React 18 + TypeScript + Vite project with Tailwind CSS and 40+ shadcn/ui components pre-installed. Develop your app, then run scripts/bundle-artifact.sh to produce a single bundle.html artifact.

How to bundle a React app into a single HTML file?▼

The bundle-artifact.sh script installs Parcel, parcel-resolver-tspaths, and html-inline, builds the project with Parcel without source maps, then inlines all JavaScript and CSS assets into one self-contained bundle.html file.

When should I use this instead of a single-file HTML artifact?▼

Use it for complex artifacts requiring state management, routing, or shadcn/ui components. Simple single-file HTML or JSX artifacts do not need this multi-step React build workflow.

Does the init script work with Node.js 18?▼

Yes, the script detects your Node version and pins Vite to 5.4.11 for Node 18 compatibility, while Node 20 and above use the latest Vite. Versions below 18 are rejected with an error.

Why does bundle-artifact.sh fail with an index.html error?▼

The script requires an index.html entry point in the project root and must be run from a directory containing package.json. Run it inside the project created by init-artifact.sh, not from the skill directory.

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
Sake-TeamSake-Team

browser-qa

Automate visual testing and UI interaction verification with browser automation tools.

Official
Advanced
J03Fr0stJ03Fr0st

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, JS, React, or Vue.

Community
Advanced
mccleod1290mccleod1290
1

web-artifacts-builder

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

Community
Intermediate