artifacts-builder

Name: artifacts-builder
Availability: InStock
Author: vzulin

Bundle React-based frontend projects into a single portable HTML artifact.

Updated Jun 3, 2026

Search Tags:#frontend #react #tooling #single-file #artifact #bundle #claude-ai

Ready to run

npx skills add https://github.com/vZulin/overlay-clock-timer --skill artifacts-builder-vzulin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/vZulin/overlay-clock-timer/tree/main/.codex/skills/macos-design/artifacts-builder
Command: npx skills add https://github.com/vZulin/overlay-clock-timer --skill artifacts-builder-vzulin

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?

The Artifacts Builder addresses the challenge of turning multi-file frontend projects into a portable, Claude-ready HTML artifact, enabling rich demonstrations without distributing a full dev environment.

Core Features & Use Cases

One-click bundling of React + TypeScript apps into a self-contained HTML artifact.
Supports Tailwind CSS and shadcn/ui components within a single-file artifact.
Use Case: Share interactive frontend demos in Claude conversations without hosting.

Quick Start

Initialize a new artifact project with the init-artifact.sh script and then bundle it into bundle.html for sharing.

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?▼

You can bundle a React app into a single HTML file by using Parcel-based bundling to compile the project into a self-contained, portable HTML artifact suitable for offline use.

Can I use Tailwind CSS and shadcn/ui components in a single-file React bundle?▼

Yes, you can include Tailwind CSS and shadcn/ui components within a single-file React bundle, allowing you to share rich interactive frontend demos without external dependencies.

What's the best way to share interactive frontend prototypes in a Claude conversation?▼

The best way to share interactive frontend prototypes in Claude conversations is to compile the React project into a portable HTML artifact, eliminating the need to host a full development environment.

Does this single-file artifact bundling process require a specific build tool?▼

Yes, the bundling process requires a Parcel-based build configuration, utilizing specific resolvers and inline HTML plugins to package TypeScript and React code into one file.

How do I initialize a React project for offline HTML artifact generation?▼

You initialize a React project for offline HTML artifact generation by running the provided initialization script, which sets up the necessary Parcel configuration to bundle the output into a shareable file.