skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building complex claude.ai HTML artifacts with state management, routing, or component libraries requires a full frontend toolchain, and manually scaffolding React + Tailwind + shadcn/ui projects and inlining them into one shareable HTML file is slow and error-prone. ## Core Features & Use Cases - Project Scaffolding: scripts/init-artifact.sh 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: scripts/bundle-artifact.sh builds the app with Parcel and inlines all JavaScript and CSS into one self-contained bundle.html artifact. - Node Compatibility Handling: Automatically detects the Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: When a user asks for an interactive dashboard artifact with tabs, dialogs, and forms, scaffold the project, build the UI with shadcn/ui components, bundle it, and share the resulting HTML artifact 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 web-artifacts-builder skill.

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

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

Run scripts/init-artifact.sh with a project name. It creates a Vite React-TypeScript project, installs Tailwind CSS 3.4.1 with the shadcn/ui theming system, configures path aliases, and extracts 40+ pre-built shadcn/ui components.

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. Simple single-file HTML or JSX artifacts do not need this toolchain and should be written directly.

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, while Node 20 and later use the latest Vite version. Node versions below 18 are rejected.

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 the init script before bundling.

Related Skills

Explore More Software Engineering Skills→
hackethacket
38

artifacts-builder

Bundle multi-component React artifacts into a single HTML file.

Community
Advanced
graysurfgraysurf

playwright

Automate real browser interactions via the Playwright CLI wrapper script.

Community
Intermediate
ginlix-aiginlix-ai
1.7k

ui-design

Applies research-desk typography, color, and composition standards to financial visual output.

Official
Intermediate
Jst-Well-DanJst-Well-Dan
8

artifacts-builder

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

Community
Advanced