skills.rest
organvm-i-theoria
organvm-i-theoriaOFFICIAL
Explore all skills by this author →
GitHub

web-artifacts-builder

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building complex, multi-component web artifacts with state management, routing, and shadcn/ui components requires a full frontend toolchain, but the final deliverable must be a single self-contained HTML file. This Skill automates project scaffolding and bundling so a React + TypeScript + Tailwind app can be shipped as one portable HTML artifact. ## Core Features & Use Cases - Project Initialization: Runs scripts/init-artifact.sh to scaffold a Vite + React + TypeScript project with Tailwind CSS 3.4.1, path aliases, and 40+ pre-installed shadcn/ui components, with automatic Node 18/20 Vite version pinning. - Single-File Bundling: Runs scripts/bundle-artifact.sh to build with Parcel and inline all JavaScript and CSS into one bundle.html file via html-inline. - Pattern References: Provides reusable patterns for state management, event handling, canvas/SVG drawing, localStorage persistence, and CSS theming in references/artifact-patterns.md. - Use Case: A user asks for an interactive dashboard artifact with tabs, dialogs, and charts. The Skill initializes the project, the agent develops the components, then bundles everything into one HTML file shared directly in the conversation. ## Quick Start Ask the agent to build a complex React artifact with shadcn/ui components and bundle it into a single shareable 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 bundle a React app into a single HTML file?▼

Run scripts/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 bundle.html file that works as a self-contained artifact.

How to create a React project with shadcn/ui components pre-installed?▼

Run bash scripts/init-artifact.sh <project-name>. It scaffolds a Vite React-TypeScript project, configures Tailwind CSS 3.4.1 with the shadcn theming system, adds @/ path aliases, and extracts 40+ shadcn/ui components from a bundled tarball.

Does the init script work with Node 18?▼

Yes. The script detects your Node version automatically and pins Vite to 5.4.11 for Node 18, while using the latest Vite for Node 20 and above. Node versions below 18 are rejected with an error.

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 scaffold-and-bundle workflow adds setup time that is unnecessary for lightweight 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 you are inside the initialized project directory before bundling.

Related Skills

Explore More Software Engineering Skills→
ahsanghalibahsanghalib

frontend-design

Produces project-grounded UI design briefs covering layout, states, responsive behavior, and accessibility contracts.

Community
Intermediate
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate
koki3141koki3141
2

webapp-testing

Automate web application testing with Python Playwright scripts.

Community
Intermediate
MiniMax-AIMiniMax-AI
3.0k

artifacts-builder

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

Official
Intermediate