skills.rest
JoaquinCampo
JoaquinCampoCOMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

Bundle React frontend artifacts into a single self-contained HTML file.

3|Updated Dec 22, 2025
Search Tags:#React#frontend#offline#Tailwind#artifact#Vite#bundle
One-click install
npx skills add https://github.com/JoaquinCampo/codex-skills --skill web-artifacts-builder-joaquincampo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/JoaquinCampo/codex-skills/tree/main/web-artifacts-builder
Command: npx skills add https://github.com/JoaquinCampo/codex-skills --skill web-artifacts-builder-joaquincampo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, parcel, html-inline, @parcel/config-default, parcel-resolver-tspaths, vite, tailwindcss, tailwindcss-animate, clsx, tailwind-merge, lucide-react, next-themes, postcss, autoprefixer, @radix-ui/react-accordion, @radix-ui/react-avatar, @radix-ui/react-checkbox, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-hover-card, @radix-ui/react-label, @radix-ui/react-menubar, @radix-ui/react-navigation-menu, @radix-ui/react-popover, @radix-ui/react-progress, @radix-ui/react-radio-group, @radix-ui/react-scroll-area, @radix-ui/react-select, @radix-ui/react-separator, @radix-ui/react-slider, @radix-ui/react-slot, @radix-ui/react-switch, @radix-ui/react-tabs, @radix-ui/react-toast, @radix-ui/react-toggle, @radix-ui/react-toggle-group, sonner, cmdk, vaul, embla-carousel-react, react-day-picker, react-resizable-panels, date-fns, react-hook-form, @hookform/resolvers, zod, and includes scripts (resource) components.

What problem does it solve?

This Skill enables rapid creation and packaging of React-based frontend artifacts into a single, self-contained HTML file, reducing setup time for demos and offline sharing.

Core Features & Use Cases

  • Initialize a React + Vite project with Tailwind CSS and shadcn/ui components.
  • Bundle all code, assets, and dependencies into a single HTML file for easy distribution.
  • Use cases include prototyping UI concepts, presenting interactive demos, and offline demonstrations.

Quick Start

Use the skill to scaffold and bundle a frontend artifact:

  • Step 1: Create a new project with: scripts/init-artifact.sh <project-name>
  • Step 2: Bundle to a single HTML artifact with: scripts/bundle-artifact.sh

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 and Vite project into a single HTML file?▼

This skill automates bundling React and Vite projects into a single HTML file by running scripts/init-artifact.sh to scaffold the project, followed by scripts/bundle-artifact.sh to inline all dependencies and assets.

What is the best way to share a Tailwind CSS and shadcn/ui prototype offline?▼

Bundling your Tailwind CSS and shadcn/ui prototype into a self-contained HTML file allows offline sharing by inlining all assets and dependencies, ensuring the interactive demo runs without external network requests.

Do I need Node.js and pnpm to create a self-contained HTML artifact?▼

Yes, creating a self-contained HTML artifact requires Node.js 18+ and pnpm to install dependencies and execute the initialization and bundling shell scripts for the React project.

Can I use Radix UI components in a single-file HTML bundle?▼

Yes, you can use Radix UI components in a single-file HTML bundle; the skill leverages Parcel and Vite to inline all JavaScript and CSS dependencies, including Radix UI components, directly into the final HTML output.

How does inlining assets into a single HTML file work for React demos?▼

Inlining assets for React demos works by configuring Parcel and html-inline to embed all JavaScript, CSS, and images into one self-contained file, which eliminates external requests and enables offline presentations.

What are the limitations of bundling a complex frontend into one HTML file?▼

Limitations of bundling a complex frontend into one HTML file include potentially large file sizes from inlined assets and dependencies, and the requirement for a specific project structure with an index.html to properly initialize and configure the build.

Related Skills

Explore More Software Engineering Skills→
Adam-GuerinAdam-Guerin
1

web-artifacts-builder

Initialize React projects and bundle frontend applications into single HTML files.

Community
Advanced
whichguywhichguy

html-artifact

Generate self-contained HTML files from Markdown content.

Community
Intermediate
jaem1n207jaem1n207
18

shadcn-ui

Integrate and customize shadcn/ui components with Radix UI and Tailwind CSS.

Community
Advanced
TETRA2000TETRA2000

export-html

Export React/Vite pages as self-contained HTML files with inlined CSS and JavaScript.

Community
Advanced