skills.rest
SESELOVSKYDarian
SESELOVSKYDarianCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-artifacts-builder

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

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

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 Initialization: Generates a React 18 + TypeScript + Vite project preconfigured with Tailwind CSS 3.4.1, path aliases, and 40+ shadcn/ui components with all Radix UI dependencies. - 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, and installs pnpm if missing. - Use Case: Build an interactive dashboard artifact with dialogs, tables, and forms using shadcn/ui components, then bundle it into a single HTML file to display directly in a Claude conversation. ## Quick Start Ask the AI to initialize a new web artifact project named my-dashboard, develop the React components, and bundle it into a single HTML artifact.

Frequently Asked Questions about web-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 without source maps, and inlines all JavaScript and CSS into one bundle.html file that works as a self-contained artifact.

How do I set up a React project with shadcn/ui and Tailwind CSS?▼

Run init-artifact.sh with a project name. It scaffolds a Vite React-TypeScript project, configures Tailwind 3.4.1 with shadcn/ui theming, adds @/ path aliases, and extracts 40+ pre-installed shadcn/ui components into src/.

What Node.js version is required for Vite React projects?▼

Node.js 18 or higher is required. The init script auto-detects your Node version: Node 20+ uses the latest Vite, while Node 18 pins Vite to version 5.4.11 for compatibility.

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

Use this approach only for complex artifacts requiring state management, routing, or shadcn/ui components. For simple single-file HTML or JSX artifacts, the multi-step scaffold-and-bundle workflow adds unnecessary overhead.

Why does the bundling script fail with a missing index.html error?▼

The bundle script requires an index.html entry point in the project root and must be run from the directory containing package.json. Verify you initialized the project with init-artifact.sh and are in the correct directory.

Related Skills

Explore More Software Engineering Skills→
maximoseomaximoseo

artifacts-builder

Scaffold React and Tailwind projects and bundle them into single-file HTML artifacts.

Community
Advanced
SynthropicTechnologySynthropicTechnology

artifacts-builder

Bundle React, Tailwind, and shadcn projects into a single HTML artifact.

Official
Advanced
rogerzntsrogerznts
1

anvil-ui-hallmark

Generates and audits UI designs that avoid recognizable AI-generated visual patterns.

Community
Advanced
GGGODLINGGGODLIN

web-artifacts-builder

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

Community
Advanced