skills.rest
evolving-machines-lab
evolving-machines-labOFFICIAL
Explore all skills by this author →
Website𝕏@evolvymachinesGitHub

artifacts-builder

Bundle React projects into single HTML artifacts for Claude.

76|3|Updated Jan 20, 2026
Search Tags:#frontend#react#build#claude#artifacts#tailwind#shadcn-ui
One-click install
npx skills add https://github.com/evolving-machines-lab/evolve --skill artifacts-builder-evolving-machines-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/evolving-machines-lab/evolve/tree/main/skills/artifacts-builder
Command: npx skills add https://github.com/evolving-machines-lab/evolve --skill artifacts-builder-evolving-machines-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, vite, tailwindcss, postcss, autoprefixer, @types/node, tailwindcss-animate, @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?

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

  • Scaffolds a React + Vite project configured for shadcn/ui components and Tailwind CSS.
  • Bundles artifacts into a single HTML file for easy sharing in Claude conversations.
  • Supports complex UI with routing, state management, and reusable components.

Quick Start

Run scripts/init-artifact.sh to scaffold a new project, then use scripts/bundle-artifact.sh to generate a single HTML artifact.

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

To bundle a React project into a single HTML file for Claude artifacts, run the scripts/init-artifact.sh helper to scaffold a Vite project, then execute scripts/bundle-artifact.sh to inline all assets. This produces a shareable single-file HTML bundle configured for Claude conversations.

Can I use shadcn/ui components in Claude artifacts?▼

Yes, you can use shadcn/ui components in Claude artifacts. The Skill scaffolds a React and Vite project pre-configured with Tailwind CSS, Radix UI primitives, and shadcn/ui, allowing you to build complex UI components and inline them into a single HTML file.

When should I use a Vite-based React build for Claude artifacts instead of plain HTML?▼

Use a Vite-based React build for Claude artifacts when your project requires state management, routing, or reusable shadcn/ui components. For simple single-file HTML or JSX artifacts without complex logic, a plain HTML approach is more appropriate and faster to deploy.

Does this bundling approach support Tailwind CSS and TypeScript path aliases?▼

Yes, the bundling approach supports Tailwind CSS and TypeScript path aliases. The project relies on Vite, Postcss, Autoprefixer, and the parcel-resolver-tspaths dependency to resolve TypeScript paths and compile Tailwind styles into the final single HTML artifact.

What's the best way to share complex frontend web applications in Claude conversations?▼

The best way to share complex frontend applications in Claude conversations is bundling them into a single HTML file. This Skill uses Vite to compile React projects with state management and UI components, inlining all JavaScript and CSS assets into one shareable file.

Why does my complex multi-component artifact need inlining for Claude?▼

Your complex multi-component artifact needs inlining because Claude conversations require a single HTML file format. The bundle-artifact.sh script concatenates your compiled React, Tailwind CSS, and shadcn/ui assets into one file, ensuring the application renders correctly without external dependencies.

Related Skills

Explore More Software Engineering Skills→
BidingCCBidingCC
1.9k

web-artifacts-builder

Automate creation and bundling of Claude-compatible HTML artifacts with React tooling.

Community
Advanced
dalehurleydalehurley
2

web-artifacts-builder

Bundle React apps into a single HTML artifact with inlined JavaScript and CSS.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
davekilleendavekilleen
461

anthropic-web-artifacts-builder

Initialize React, TypeScript, Vite, and Tailwind projects with shadcn/ui components.

Community
Advanced