skills.rest
ankaboot-source
ankaboot-sourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-artifacts-builder

Builds React and shadcn/ui web apps and bundles them into single HTML artifacts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating complex, multi-component claude.ai HTML artifacts by hand is error-prone: state management, routing, and component libraries cannot be inlined into a single file without a proper build pipeline. This Skill scaffolds a full React project and bundles it into one self-contained HTML artifact. ## Core Features & Use Cases - Project Scaffolding: Generates a React 18 + TypeScript + Vite project with Tailwind CSS, 40+ pre-installed shadcn/ui components, Radix UI dependencies, and path aliases via scripts/init-artifact.sh. - Single-File Bundling: Compiles the app with Parcel and inlines all JavaScript and CSS into one bundle.html artifact via scripts/bundle-artifact.sh. - Node Compatibility Handling: Auto-detects the Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: Build an interactive dashboard artifact with tabs, dialogs, and charts using shadcn/ui components, then deliver it as a single shareable HTML file in a Claude conversation. ## Quick Start Ask the agent to create 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 ready to share as an artifact.

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

Run init-artifact.sh with a project name. It scaffolds a Vite React-TypeScript project, configures Tailwind CSS 3.4.1 with the shadcn theme, installs all Radix UI dependencies, and extracts 40+ pre-built shadcn/ui components into src/.

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 build pipeline and should be written directly.

Does the init script work with Node.js 18?▼

Yes. The script detects your Node version and automatically pins Vite to 5.4.11 for Node 18 compatibility, while Node 20 and above use the latest Vite release. Versions below 18 are rejected.

Why does bundle-artifact.sh fail with a package.json error?▼

The script must run from the project root containing package.json and index.html. If you see this error, navigate into the project directory created by init-artifact.sh before bundling.

Related Skills

Explore More Software Engineering Skills→
gvinokurgvinokur

ui-ux-designer

Generate standalone HTML mockups with React and MUI v7 components.

Community
Intermediate
mostafa-ismail-2004mostafa-ismail-2004

browser-qa

Automate browser-based UI checks to report functional, visual, and accessibility defects.

Community
Advanced
StonelukasStonelukas

ui-ux-pro-max

Search UI/UX guidelines across nine stacks to assemble design systems.

Community
Advanced
SnoopiamSnoopiam

artifacts-builder

Bundle React and TypeScript projects into single HTML artifacts.

Community
Advanced