skills.rest
surfingalien
surfingalienCOMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

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

1|Updated May 6, 2026
Search Tags:#react#shadcn/ui#tailwind css#vite#html artifact#bundling#frontend scaffolding
One-click install
npx skills add https://github.com/surfingalien/FinSurfing --skill artifacts-builder-surfingalien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/surfingalien/FinSurfing/tree/main/Downloads/FinSurfing/.agents/skills/artifacts-builder
Command: npx skills add https://github.com/surfingalien/FinSurfing --skill artifacts-builder-surfingalien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, tailwindcss, vite, pnpm, and includes scripts (resource) components.

What problem does it solve? Creating complex, multi-component claude.ai HTML artifacts with React state management, routing, and shadcn/ui components requires tedious project scaffolding and a way to bundle everything into one shareable HTML file. ## Core Features & Use Cases - Project Initialization: The init-artifact.sh script scaffolds a complete React 18 + TypeScript + Vite project with Tailwind CSS, path aliases, and 40+ pre-installed shadcn/ui components, with automatic Node version detection and Vite pinning. - 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. - Use Case: When a user asks for an interactive dashboard artifact with tabs, dialogs, and forms, initialize the project, develop the components, then bundle it into a single HTML file to share directly in the conversation. ## Quick Start Ask the assistant to build a complex React artifact with shadcn/ui components and bundle it into a single HTML file for sharing.

Frequently Asked Questions about 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 with Parcel 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 over 40 shadcn/ui components from a bundled tarball.

Does the init script work with Node 18?▼

Yes, the 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?▼

Skip it for simple single-file HTML or JSX artifacts that do not need state management, routing, or shadcn/ui components. The full React scaffolding and bundling pipeline adds unnecessary overhead for trivial artifacts.

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 the directory containing package.json. Verify both files exist before bundling.

Related Skills

Explore More Software Engineering Skills→
iButtersiButters
3

atomic-design

Organize React UI components into a five-tier Atomic Design folder structure.

Community
Advanced
ondrej-svecondrej-svec
18

share-html

Publish local HTML files or static site directories to a share server.

Community
Intermediate
ibytechaosibytechaos
1

browser-qa

Automates visual testing and UI interaction verification on deployed web pages via browser automation.

Community
Intermediate
mccleod1290mccleod1290
1

web-artifacts-builder

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

Community
Intermediate