skills.rest
NT-boop-star
NT-boop-starCOMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

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

Updated Apr 7, 2026
Search Tags:#frontend#react#shadcn/ui#tailwind css#vite#html artifact#bundling
One-click install
npx skills add https://github.com/NT-boop-star/BRMV-tract --skill web-artifacts-builder-nt-boop-star
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/NT-boop-star/BRMV-tract/tree/main/antigravity/skills/web-artifacts-builder
Command: npx skills add https://github.com/NT-boop-star/BRMV-tract --skill web-artifacts-builder-nt-boop-star

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, or shadcn/ui components requires a full frontend toolchain, and manually scaffolding and bundling such projects into a single shareable HTML file is tedious and error-prone. ## Core Features & Use Cases - Project Scaffolding: Initializes a complete 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 self-contained bundle.html artifact. - Environment Compatibility: Auto-detects Node.js version (18+) and pins the appropriate Vite version for compatibility. - Use Case: Build an interactive dashboard artifact with charts, dialogs, and forms using shadcn/ui components, then bundle it into one HTML file to share 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 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 create a React artifact with shadcn/ui components?▼

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

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

Run scripts/bundle-artifact.sh from the project root containing index.html. It installs Parcel, parcel-resolver-tspaths, and html-inline, builds the app without source maps, and inlines all JavaScript and CSS into one bundle.html file.

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

Use this toolchain only for complex artifacts requiring state management, routing, or shadcn/ui components. For simple single-file HTML or JSX artifacts, the full React + Vite + Parcel setup adds unnecessary build steps.

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

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

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

The bundling script requires an index.html entry point in the project root and must be run from the 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→
maximoseomaximoseo

artifacts-builder

Scaffold React and Tailwind projects and bundle them into single-file HTML artifacts.

Community
Advanced
Sake-TeamSake-Team

browser-qa

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

Official
Advanced
SwimmingLiuSwimmingLiu
1

frontend-design

Generate distinctive frontend interfaces with detailed design guidelines.

Community
Advanced
SnoopiamSnoopiam

artifacts-builder

Bundle React and TypeScript projects into single HTML artifacts.

Community
Advanced