web-artifacts-builder

Automate React, Tailwind, and shadcn/ui artifact setup and bundling into a single HTML.

Updated Jan 23, 2026

Search Tags:#react #claude #vite #tailwind #artifact #shadcn #bundle

Ready to run

npx skills add https://github.com/LisaPullman/foxai_skills --skill web-artifacts-builder-lisapullman

💬 Prompt for ChatGPT / Claude Chat▼

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

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?

Build and bundle sophisticated Claude artifacts with full frontend toolchains, enabling multi-component web artifacts that run in Claude conversations.

Core Features & Use Cases

Frontend scaffolding and project configuration for React + TypeScript + Vite + Parcel bundling.
Inlined artifacts: bundle into a single HTML with all dependencies inlined for easy sharing in Claude.
Guided workflow: scripts for initializing, developing, and bundling artifacts; supports Tailwind + shadcn/ui.

Quick Start

Run the initialization script to create a new React artifact project with your chosen project name.

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

You can build complex Claude artifacts with React and Tailwind by running the initialization script to scaffold a project. It configures path aliasing, routing, and state management to produce multi-component web artifacts that run directly in Claude conversations.

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

Yes, you can use shadcn/ui and Tailwind when building Claude artifacts. The workflow includes guided scripts for initializing and developing artifacts, pre-configuring the environment to support shadcn/ui components and Tailwind styling out of the box.

What's the best way to manage state and routing in Claude web artifacts?▼

The best way to manage state and routing in Claude web artifacts is using this React-based scaffolding tool. It sets up a structured frontend environment with TypeScript and path aliasing, enabling multi-component architecture and complex interactions within a single bundled file.

Do I need Parcel to bundle complex Claude artifacts?▼

You need Parcel to bundle complex Claude artifacts because the workflow relies on it alongside the parcel-resolver-tspaths plugin. This setup handles the dependency compilation and asset inlining required to generate the final single-file HTML output.

Why does my Claude artifact project need path aliasing during development?▼

Your Claude artifact project needs path aliasing during development to maintain clean import structures across multi-component React codebases. The parcel-resolver-tspaths dependency resolves these aliases during the bundling step to ensure the final HTML artifact compiles correctly.