skills.rest
johsquaree
johsquareeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

artifacts-builder

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, 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 shadcn/ui components requires a full frontend toolchain, but artifacts must be delivered as a single self-contained HTML file. This Skill scaffolds a complete React project and bundles it into one shareable HTML artifact. ## Core Features & Use Cases - Project Initialization: Generates a React 18 + TypeScript + Vite project preconfigured with Tailwind CSS, path aliases, and 40+ 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 bundle.html artifact. - Node Compatibility Handling: Auto-detects Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: Build an interactive dashboard artifact with tabs, charts, and dialogs using shadcn/ui components, then bundle it into a single HTML file to share directly in a Claude conversation. ## Quick Start Ask the AI to initialize a new artifact project with the init script, develop the React components, then run the bundle script to produce a single HTML 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 with shadcn/ui components?▼

Run the init-artifact.sh script with a project name to scaffold a Vite React TypeScript project with Tailwind CSS and 40+ pre-installed shadcn/ui components. Then edit the generated code and run bundle-artifact.sh to produce a single HTML file.

How do I 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 a self-contained bundle.html file.

When should I use artifacts-builder instead of a simple 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 is unnecessary and adds overhead.

Does the init script work with Node 18?▼

Yes, the script detects the Node.js version and pins Vite to 5.4.11 for Node 18 compatibility. Node 20 or higher uses the latest Vite version, and versions below 18 are rejected.

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. Verify you are inside the project created by init-artifact.sh before bundling.

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
raybargasraybargas

Frontend Responsive

Implement responsive frontend layouts using HTML, CSS, and JavaScript across breakpoints.

Community
Basic
Jst-Well-DanJst-Well-Dan
8

artifacts-builder

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

Community
Advanced