skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

Builds and bundles multi-component React artifacts into single HTML files.

1|Updated Aug 18, 2026
Search Tags:#typescript#react#shadcn/ui#tailwind css#vite#html artifact#bundling
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill artifacts-builder-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/artifacts-builder
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill artifacts-builder-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, vite, tailwindcss, parcel, html-inline, shadcn/ui, @radix-ui/react-accordion, lucide-react, react-hook-form, zod, and includes scripts (resource) components.

What problem does it solve? Building complex claude.ai HTML artifacts with state management, routing, or shadcn/ui components requires a full project setup and a way to bundle everything into one shareable HTML file, which is tedious to configure manually. ## Core Features & Use Cases - Project Initialization: Scaffolds a 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 self-contained bundle.html via scripts/bundle-artifact.sh. - Node Compatibility Handling: Auto-detects 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, initialize the project, develop with shadcn/ui components, then bundle it into a single HTML artifact to share in the conversation. ## Quick Start Ask the agent to build a complex multi-component React artifact with shadcn/ui and bundle it into a single HTML file.

Frequently Asked Questions about 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 to create a React project with shadcn/ui components pre-installed?▼

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

When should I use this instead of a single-file HTML artifact?▼

Use it only 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 18?▼

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

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 the directory containing package.json. Verify you are inside the initialized project before running it.

Related Skills

Explore More Software Engineering Skills→
ohmyhotelcoohmyhotelco
1

pp-prototype

Generates a clickable React prototype from UI DSL definitions for stakeholder review.

Official
Intermediate
Sake-TeamSake-Team

browser-qa

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

Official
Advanced
NolanPicNolanPic

Frontend Accessibility

Enforce WCAG compliance in frontend UI code with semantic HTML and ARIA.

Community
Basic
SnoopiamSnoopiam

artifacts-builder

Bundle React and TypeScript projects into single HTML artifacts.

Community
Advanced