web-artifacts-builder

Bundle React and shadcn/ui projects into single HTML artifacts.

2|1|Updated Oct 8, 2009

Search Tags:#react #claude #tailwind #bundling #shadcn-ui #artifact-generation #html-artifacts

Ready to run

npx skills add https://github.com/riethmayer/dotfiles --skill web-artifacts-builder-riethmayer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/riethmayer/dotfiles/tree/main/stow/agents/.agents/skills/web-artifacts-builder
Command: npx skills add https://github.com/riethmayer/dotfiles --skill web-artifacts-builder-riethmayer

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Core Features & Use Cases

React + TypeScript (Vite) project scaffolding with Tailwind CSS and shadcn/ui integration for multi-component artifacts.
Bundling to a single HTML artifact with inlined assets for Claude conversations and offline delivery.
Design and styling guidelines to maintain consistency across complex artifacts.

Quick Start

Initialize the frontend project with the provided script, then develop your artifact and bundle it into a single HTML file.

Frequently Asked Questions about web-artifacts-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build complex React HTML artifacts for Claude.ai?▼

You can build complex React HTML artifacts by scaffolding a Vite project with Tailwind CSS and shadcn/ui, then bundling the output with Parcel and html-inline into a single inlined HTML file for Claude conversations.

Can I use shadcn/ui components in a multi-page Claude artifact?▼

Yes, you can use shadcn/ui components in a multi-page Claude artifact by integrating them within a React and TypeScript Vite setup, utilizing path aliases for state management and routing before final bundling.

What's the best way to bundle a React project into a single HTML file?▼

The best way to bundle a React project into a single HTML file is using Parcel alongside the html-inline package, which inlines all assets to ensure the artifact renders correctly within Claude.ai or offline.

Do I need Vite to generate interactive demos with React and Tailwind?▼

Yes, you need Vite to generate interactive demos with React and Tailwind, as this approach requires a Vite-based project setup to scaffold components and integrate path aliases before Parcel bundling.

When should I avoid using a React toolchain for HTML artifact generation?▼

You should avoid using a React toolchain for HTML artifact generation when dealing with simple single-file HTML or JSX artifacts, as this approach is specifically designed for complex artifacts requiring state management and routing.