skills.rest
Cramer-69
Cramer-69COMMUNITY
Explore all skills by this author →
Website𝕏@cramerconsultGitHub

web-artifacts-builder

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

1|Updated Feb 18, 2026
Search Tags:#frontend#react#shadcn/ui#tailwind css#vite#html artifact#bundling
One-click install
npx skills add https://github.com/Cramer-69/skills-repository-3af2d1c7 --skill web-artifacts-builder-cramer-69
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/Cramer-69/skills-repository-3af2d1c7/tree/main/packages/claude/skills/web-artifacts-builder
Command: npx skills add https://github.com/Cramer-69/skills-repository-3af2d1c7 --skill web-artifacts-builder-cramer-69

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building complex, multi-component claude.ai HTML artifacts by hand is error-prone and limited when you need state management, routing, or a full component library. This Skill scaffolds a complete modern frontend project and bundles it into one self-contained HTML file ready to share as an artifact. ## Core Features & Use Cases - Project Scaffolding: Generates a fully configured React 18 + TypeScript + Vite project with Tailwind CSS, path aliases, and 40+ pre-installed shadcn/ui components. - Single-File Bundling: Uses Parcel and html-inline to compile the entire app (JavaScript, CSS, dependencies) into one portable bundle.html artifact. - Environment Handling: Auto-detects Node.js version (18+) and pins a compatible Vite version, with pnpm auto-installation. - Use Case: A user asks for an interactive dashboard artifact with tabs, charts, and dialogs. The Skill initializes the project, the agent develops the components using shadcn/ui, then bundles everything into a single HTML file shared directly in the conversation. ## Quick Start Ask the agent to build a complex interactive web artifact with React and shadcn/ui components, and it will initialize the project, develop the code, and deliver a single bundled HTML file.

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 React + TypeScript + Vite project with Tailwind CSS and 40+ shadcn/ui components pre-installed. After developing your code, run bundle-artifact.sh to produce a single bundle.html file shareable as an artifact.

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 from your root index.html without source maps, then inlines all JavaScript and CSS assets into one self-contained bundle.html file.

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

Use this Skill for complex artifacts requiring state management, routing, or shadcn/ui components. For simple single-file HTML or JSX artifacts without those needs, a direct single-file approach is more appropriate.

Does the init script work with Node 18?▼

Yes, the script auto-detects your Node.js version and requires Node 18 or higher. 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 bundling 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 running it.

Related Skills

Explore More Software Engineering Skills→
JubaKitiashviliJubaKitiashvili
41

erne-plan

Plan feature architecture for RN/Expo apps with file structure and task lists.

Community
Advanced
willyu1007willyu1007

test-web-playwright

Automate end-to-end web UI testing with Playwright, including debugging and failure analysis.

Community
Intermediate
capaas2capaas2

frontend-design

Guide frontend design decisions for web interfaces using UX psychology and accessibility principles.

Community
Advanced
GGGODLINGGGODLIN

web-artifacts-builder

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

Community
Advanced