artifacts-builder

Generate React and Vite frontend artifacts bundled into a single HTML file.

166|116|Updated Jan 19, 2026

Search Tags:#frontend #react #tailwind #bundling #artifact #shadcn #single-html

Ready to run

npx skills add https://github.com/Kilo-Org/kilo-marketplace --skill artifacts-builder-kilo-org

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/Kilo-Org/kilo-marketplace/tree/main/skills/artifacts-builder
Command: npx skills add https://github.com/Kilo-Org/kilo-marketplace --skill artifacts-builder-kilo-org

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, pnpm, and includes scripts (resource) components.

What problem does it solve?

Automates the construction of elaborate, self-contained frontend artifacts by generating React + Vite projects, bundling them into a single HTML file, and guiding styling and deployment.

Core Features & Use Cases

Project scaffolding for React + Vite with Tailwind CSS and shadcn/ui.
Single-file bundle generation via a dedicated bundling script.
Support for optional resources (scripts, references, assets) and portable artifact sharing.
Real-world use: create a self-contained UI demo artifact for client handoffs or product demos.

Quick Start

Initialize a new artifacts project, tailor it to your needs, and run the bundling script to generate bundle.html.

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 self-contained HTML file?▼

To bundle a React app into a single HTML file, run the included bundling script after scaffolding your Vite project to inline all scripts and assets into one portable deliverable for client handoffs.

Can I use Tailwind CSS and shadcn/ui when building frontend artifacts?▼

Yes, Tailwind CSS and shadcn/ui are supported. The scaffolding process initializes a React project pre-configured with both to streamline styling for your single-file UI artifact.

What do I need to install to generate a portable frontend artifact?▼

Generating a portable frontend artifact requires Node.js 18+ and pnpm. These execute the initialization and bundling scripts that build and package your React project.

How do I scaffold a React project for client demos and handoffs?▼

Scaffolding a React project for client demos is handled by the initialization script, which sets up a Vite environment with Tailwind and shadcn/ui before you tailor and bundle it.

Does the bundling process support adding external scripts and assets?▼

Yes, the bundling process supports optional resources. You can include external scripts, references, and assets that get inlined alongside your React code into the final HTML deliverable.

Why use a single HTML file for UI artifact delivery instead of standard builds?▼

Using a single HTML file for UI artifact delivery ensures portable, repeatable sharing. It inlines all dependencies, eliminating server requirements and making client handoffs self-contained.