skills.rest
hoanghd218
hoanghd218COMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

Bundle and inline a React frontend project into a single HTML artifact.

7|9|Updated May 9, 2026
Search Tags:#frontend#react#tailwind#artifact#shadcn-ui#bundle
One-click install
npx skills add https://github.com/hoanghd218/claude-code-2-days --skill web-artifacts-builder-hoanghd218
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/hoanghd218/claude-code-2-days/tree/main/.claude/skills/web-artifacts-builder
Command: npx skills add https://github.com/hoanghd218/claude-code-2-days --skill web-artifacts-builder-hoanghd218

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill helps developers package multi-file frontend projects into a single, shareable HTML artifact for Claude conversations, enabling interactive UI components to be embedded directly in prompts.

Core Features & Use Cases

  • Bundle a React + Vite + Tailwind + shadcn/ui project into a self-contained HTML artifact.
  • Inline all assets so the artifact can be shared in Claude without external files.
  • Use cases include distributing interactive widgets, prototypes, or complex UI artifacts within Claude prompts.

Quick Start

Run the scripts/bundle-artifact.sh script from the project root to generate bundle.html that embeds all code and assets for Claude sharing.

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

To bundle a React and Tailwind project into a single HTML file, run the bundle-artifact.sh script from your project root. This uses Parcel and html-inline to compile and inline all assets, producing a self-contained bundle.html file for sharing.

What is a single HTML artifact and when do I need it for Claude conversations?▼

A single HTML artifact is a self-contained file with all frontend code and assets inlined. You need it for Claude conversations when you want to share interactive widgets or complex UI components without relying on external file dependencies.

Can I package a shadcn/ui project into one file for Claude prompts?▼

Yes, you can package a shadcn/ui project into one file for Claude prompts. The bundling pipeline takes your multi-file React and shadcn/ui project and compiles it into a single, interactive HTML artifact.

Does this bundling pipeline support Vite projects?▼

Yes, the bundling pipeline supports Vite projects. It is designed to bundle complex frontend setups, including React, Vite, Tailwind, and shadcn/ui, into a single shareable HTML file.

Why do my interactive widgets lose styling when shared in Claude?▼

Interactive widgets lose styling when shared in Claude if external CSS or assets are not properly inlined. This skill resolves that by using html-inline to embed all dependencies directly into the generated bundle.html file.

Related Skills

Explore More Software Engineering Skills→
mcauduro0mcauduro0
1

artifacts-builder

Create and bundle React/TypeScript HTML artifacts using Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate
quanyquany

web-artifacts-builder

Bundle React and Tailwind frontend artifacts into a single HTML file.

Community
Advanced
sayali-ingle-pdlsayali-ingle-pdl

tsconfig

Generate a tsconfig.json with @/ path alias, Jest types, and Vite client types.

Community
Basic
zebbernzebbern
5

web-artifacts-builder

Bundle React frontend projects into a single shareable HTML file.

Community
Advanced