skills.rest
chongdashu
chongdashuCOMMUNITY
Explore all skills by this author →
Website𝕏@chongdashuGitHub

artifacts-builder

Builds and bundles multi-component React artifacts into single HTML files.

8|3|Updated Oct 20, 2025
Search Tags:#html#react#shadcn/ui#tailwind css#artifacts#vite#bundling
One-click install
npx skills add https://github.com/chongdashu/claude-code-skills-demo --skill artifacts-builder-chongdashu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/chongdashu/claude-code-skills-demo/tree/main/.claude/skills/artifacts-builder
Command: npx skills add https://github.com/chongdashu/claude-code-skills-demo --skill artifacts-builder-chongdashu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating complex claude.ai artifacts with state management, routing, or component libraries normally requires manually configuring a React project and then figuring out how to bundle everything into one shareable HTML file. This Skill automates project scaffolding and single-file bundling so complex artifacts work as self-contained HTML. ## Core Features & Use Cases - Project Initialization: The init-artifact.sh script scaffolds a React 18 + TypeScript + Vite project preconfigured with Tailwind CSS, path aliases, and 40+ shadcn/ui components with all Radix UI dependencies. - Single-File Bundling: The bundle-artifact.sh script uses Parcel and html-inline to compile the entire app into one self-contained bundle.html with all JavaScript and CSS inlined. - Node Compatibility Handling: Automatically 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 forms using shadcn/ui components, then bundle it into a single HTML file to share directly in a Claude conversation. ## Quick Start Initialize a new React artifact project and bundle it into a single HTML file I can view as a claude.ai artifact.

Frequently Asked Questions about 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 the init-artifact.sh script with a project name to scaffold a Vite React TypeScript project preconfigured with Tailwind CSS and 40+ shadcn/ui components. Develop your artifact, then run bundle-artifact.sh to produce a single shareable HTML file.

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 app without source maps, then inlines all JavaScript and CSS into one bundle.html file. Your project must have an index.html in the root directory.

When should I use artifacts-builder instead of a single HTML file?▼

Use it for complex artifacts requiring state management, routing, or shadcn/ui components. Simple single-file HTML or JSX artifacts do not need this build pipeline and can be written directly.

Does the init script work with Node 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. Node versions below 18 are rejected with an error.

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. Navigate into the project directory created by init-artifact.sh before running the bundling script.

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

browser-qa

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

Official
Advanced
Growth4U-systemsGrowth4U-systems

visual-identity

Generate logos and style guides from brand traits, colors, typography, and imagery style.

Official
Advanced
GGGODLINGGGODLIN

web-artifacts-builder

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

Community
Advanced