web-artifacts-builder

Scaffold React/TypeScript frontends and bundle them into single-file HTML artifacts.

1|Updated Feb 11, 2026

Search Tags:#frontend #react #claude #vite #tailwind #artifact

Ready to run

npx skills add https://github.com/xiaoshuangLi/aibo --skill web-artifacts-builder-xiaoshuangli

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/xiaoshuangLi/aibo/tree/main/skills/web-artifacts-builder
Command: npx skills add https://github.com/xiaoshuangLi/aibo --skill web-artifacts-builder-xiaoshuangli

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 enables developers to create and share complex frontend artifacts as self-contained Claude-compatible HTML bundles, eliminating manual wiring and dependency management for multi-component projects.

Core Features & Use Cases

Scaffolds a React + TypeScript frontend (Vite) configured with Tailwind CSS and shadcn/ui for advanced UI.
Bundles the artifact into a single, self-contained HTML file using a dedicated script for easy Claude sharing and evaluation.
Supports initialization, development, bundling, and optional testing via scripts in the skill.

Quick Start

Initialize a new artifact project with scripts/init-artifact.sh <project-name> and bundle it with scripts/bundle-artifact.sh to produce bundle.html.

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

To bundle a React and TypeScript project into a single HTML file, this skill uses a dedicated script to compile the Vite frontend into a self-contained bundle.html suitable for Claude sharing.

Can I use Tailwind CSS and shadcn/ui when building Claude-compatible HTML artifacts?▼

Yes, you can use Tailwind CSS and shadcn/ui when building Claude-compatible HTML artifacts. The skill scaffolds a Vite project pre-configured with these frameworks for advanced UI development.

What is the best way to scaffold a frontend artifact for Claude conversations?▼

The best way to scaffold a frontend artifact for Claude conversations is using the initialization script, which sets up a React and TypeScript project with Vite, Tailwind, and path aliases ready for bundling.

Does bundling React artifacts with Parcel support path aliases?▼

Yes, bundling React artifacts with Parcel supports path aliases. The project configuration includes the parcel-resolver-tspaths plugin to correctly resolve TypeScript path aliases during the HTML bundling process.

How do I inline dependencies into a single-file HTML artifact?▼

To inline dependencies into a single-file HTML artifact, the skill utilizes the html-inline package during the bundling script execution, automatically wiring all multi-component outputs into one file.

Why does my multi-component frontend project need a single-file HTML artifact?▼

A multi-component frontend project needs a single-file HTML artifact to eliminate manual dependency wiring. This format makes complex frontend stacks directly shareable and evaluable within Claude conversations.