skills.rest
MWest2020
MWest2020COMMUNITY
Explore all skills by this author →
𝕏@MarkWesterweelGitHub

web-artifacts-builder

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

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

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? Building complex claude.ai artifacts with state management, routing, or component libraries requires a full frontend toolchain, but artifacts must ship as a single self-contained HTML file. This Skill scaffolds a complete React + TypeScript + Tailwind + shadcn/ui project and bundles it into one shareable HTML file. ## Core Features & Use Cases - Project Scaffolding: The init script generates a Vite-based React + TypeScript project with Tailwind CSS, path aliases, and 40+ pre-installed shadcn/ui components. - Single-File Bundling: The bundle script uses Parcel and html-inline to inline all JavaScript and CSS into one self-contained HTML artifact. - Environment Handling: Automatically detects Node.js version and pins a compatible Vite version for Node 18. - Use Case: When a user asks for an interactive dashboard artifact with tabs, dialogs, and charts, scaffold the project, build the UI with shadcn/ui components, then bundle it into a single HTML file to share 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 using the init and bundle scripts.

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

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

Run bundle-artifact.sh from the project root. It installs Parcel and html-inline, builds the app without source maps, and inlines all JavaScript and CSS into one self-contained bundle.html file.

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

Use it for complex artifacts requiring state management, routing, or shadcn/ui components. For simple single-file HTML or JSX artifacts, the full React toolchain adds unnecessary build steps and latency.

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

Yes, the script detects your Node version automatically. On Node 18 it pins Vite to version 5.4.11 for compatibility, while Node 20 and above use the latest Vite release.

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. Run it inside the project created by init-artifact.sh, not from the skill directory.

Related Skills

Explore More Software Engineering Skills→
ohmyhotelcoohmyhotelco
1

pp-prototype

Generates a clickable React prototype from UI DSL definitions for stakeholder review.

Official
Intermediate
BrmboboBrmbobo

artifacts-builder

Creates bundled HTML artifacts from React, Tailwind, and shadcn/ui scaffolds using Parcel and html-inline.

Community
Intermediate
dev-giosdev-gios
1

qa-visual

Capture screenshots and analyze rendered elements for design system compliance.

Community
Advanced
Jst-Well-DanJst-Well-Dan
8

artifacts-builder

Bundle React and TypeScript frontend code into a single self-contained HTML artifact.

Community
Advanced