skills.rest
sshekhar-04
sshekhar-04COMMUNITY
Explore all skills by this author →
Website𝕏@ShreyanshD44145GitHub

web-artifacts-builder

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, vite, tailwindcss, parcel, html-inline, parcel-resolver-tspaths, 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 slow and error-prone, especially when they require state management, routing, or a full component library. This Skill scaffolds a complete modern frontend project and bundles it into a single self-contained HTML file ready to share as an artifact. ## Core Features & Use Cases - Project Initialization: Generates a fully configured React 18 + TypeScript + Vite project with Tailwind CSS, path aliases, and 40+ pre-installed shadcn/ui components via scripts/init-artifact.sh. - Single-File Bundling: Uses Parcel and html-inline to inline 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: A user asks for an interactive dashboard artifact with tabs, dialogs, and charts. The Skill initializes the project, the developer edits the React code, and the bundling script produces one HTML file to display in the conversation. ## Quick Start Ask the assistant to build a complex React artifact with shadcn/ui components, then have it initialize the project with init-artifact.sh and bundle the result into a single 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 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 to create a React project with shadcn/ui components pre-installed?▼

Run init-artifact.sh with a project name to scaffold a Vite React TypeScript project. It configures Tailwind CSS 3.4.1, path aliases, and extracts over 40 shadcn/ui components from a bundled tarball into the src directory.

Does this workflow support 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 scaffold and bundle pipeline adds unnecessary setup time for trivial 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 run from the directory containing package.json. Verify you initialized the project with init-artifact.sh and are in the correct directory before bundling.

Related Skills

Explore More Software Engineering Skills→
ohmyhotelcoohmyhotelco
1

pp-design

Generates UI DSL JSON and Stitch wireframes from finalized functional specifications.

Official
Advanced
w-pinkietechw-pinkietech
1

sanitize-artifacts

Removes prompt leakage and production residue from generated artifacts.

Official
Intermediate
akornmeierakornmeier
4

cloudflare-browser-rendering

Control headless browsers via Cloudflare's Browser Rendering API for automation.

Community
Advanced
GGGODLINGGGODLIN

web-artifacts-builder

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

Community
Advanced