skills.rest
kiranimmadi2
kiranimmadi2COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-artifacts-builder

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating complex claude.ai artifacts with state management, routing, or shadcn/ui components requires a full frontend toolchain, but artifacts must be delivered as a single self-contained HTML file. This Skill scaffolds a complete React project and bundles it into one shareable HTML artifact. ## Core Features & Use Cases - Project Initialization: Generates a React 18 + TypeScript + Vite project preconfigured with Tailwind CSS, 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 self-contained bundle.html file. - Node Compatibility Handling: Auto-detects Node.js version and pins Vite 5.4.11 for Node 18 environments. - Use Case: Build an interactive dashboard artifact with tabs, charts, and dialogs using shadcn/ui components, then bundle it into a single HTML file to share directly in a Claude conversation. ## Quick Start Ask the AI to initialize a new web artifact project with a chosen name, 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 self-contained bundle.html file.

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

Run init-artifact.sh with a project name. It creates a Vite React-TypeScript project, configures Tailwind CSS with the shadcn/ui theme, adds path aliases, and extracts 40+ pre-built shadcn/ui components into the source directory.

Does this work with Node.js 18?▼

Yes, the initialization script detects your Node version automatically. For Node 18 it pins Vite to version 5.4.11 for compatibility, while Node 20 and above use the latest Vite release.

When should I not use this artifact builder?▼

Avoid it for simple single-file HTML or JSX artifacts that do not need state management, routing, or shadcn/ui components. The full React toolchain adds unnecessary build steps for trivial artifacts.

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

The bundling 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 correctly and are in the right directory before bundling.

Related Skills

Explore More Software Engineering Skills→
guanyangguanyang
960

web-artifacts-builder

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

Community
Intermediate
Sake-TeamSake-Team

browser-qa

Automate visual testing and UI interaction verification with browser automation tools.

Official
Advanced
aronpcaronpc
1

ui-ux

Identify and validate visual UI/UX inconsistencies across web applications.

Community
Intermediate
SnoopiamSnoopiam

artifacts-builder

Bundle React and TypeScript projects into single HTML artifacts.

Community
Advanced