Verified:GitHub

anthropic-web-artifacts-builder

Builds Claude artifact projects into a bundled single-file HTML using Parcel and shadcn/ui.

1|Updated Jun 28, 2026

Search Tags:#react #shadcn/ui #tailwind css #vite #claude artifacts #frontend scaffolding #parcel bundling

One-click install

npx skills add https://github.com/whmathews15/DEX-Personal-Operating-System --skill anthropic-web-artifacts-builder-whmathews15

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: anthropic-web-artifacts-builder
Source: https://github.com/whmathews15/DEX-Personal-Operating-System/tree/main/.claude/skills/anthropic-web-artifacts-builder
Command: npx skills add https://github.com/whmathews15/DEX-Personal-Operating-System --skill anthropic-web-artifacts-builder-whmathews15

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, [email protected], postcss, autoprefixer, @types/node, tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, lucide-react, next-themes, @radix-ui/react-accordion, @radix-ui/react-aspect-ratio, @radix-ui/react-avatar, @radix-ui/react-checkbox, @radix-ui/react-collapsible, @radix-ui/react-context-menu, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-hover-card, @radix-ui/react-label, @radix-ui/react-menubar, @radix-ui/react-navigation-menu, @radix-ui/react-popover, @radix-ui/react-progress, @radix-ui/react-radio-group, @radix-ui/react-scroll-area, @radix-ui/react-select, @radix-ui/react-separator, @radix-ui/react-slider, @radix-ui/react-slot, @radix-ui/react-switch, @radix-ui/react-tabs, @radix-ui/react-toast, @radix-ui/react-toggle, @radix-ui/react-toggle-group, @radix-ui/react-tooltip, sonner, cmdk, vaul, embla-carousel-react, react-day-picker, react-resizable-panels, date-fns, react-hook-form, @hookform/resolvers, zod, and includes scripts (resource) components.

What problem does it solve?

It removes the friction of setting up and bundling complex Claude artifact frontends, so you can go from an idea to a polished interactive experience without hand-building the project scaffolding.

Core Features & Use Cases

Project Bootstrap: Creates a ready-to-use React, TypeScript, Vite, Tailwind CSS, and shadcn/ui workspace with path aliases and theme configuration.
Artifact Bundling: Produces a single self-contained HTML file for sharing in Claude conversations and artifact workflows.
Use Case: Build multi-screen product demos, stateful dashboards, routing-driven prototypes, or component-rich interfaces that need a production-like frontend setup.

Quick Start

Use this skill to initialize the artifact project, edit the generated React app, bundle it into bundle.html, and share the resulting single-file artifact.

Frequently Asked Questions about anthropic-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 CSS project into a single HTML file for Claude artifacts?▼

Yes, shadcn/ui components are fully supported. The project bootstrapping process pre-installs Radix UI primitives, Tailwind CSS, and class-variance-authority to ensure complex component interfaces render correctly within the bundled HTML artifact.

What is the best way to build stateful dashboards for Claude artifacts?▼

Yes, routing-heavy prototypes and interactive demos are supported. The scaffolding workflow sets up a Vite and React environment with path aliases, enabling you to build and test multi-screen experiences before bundling them into a single-file HTML artifact.

How does Parcel bundle a Vite React project into an inline HTML file?▼

The main limitation is that the bundling process relies on specific dependency versions, such as Tailwind CSS 3.4.1, to ensure compatibility. You should adhere to the scripted workflow to avoid configuration issues when generating the final single-file HTML artifact.

Do I need to manually configure path aliases when scaffolding a Claude artifact frontend?▼

No, you do not need to manually configure path aliases. The project bootstrap automatically sets up TypeScript path aliases alongside the Tailwind CSS and shadcn/ui workspace configuration to streamline the development process.