skills.rest
ammosu
ammosuCOMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

Scaffold and bundle React + Vite frontend artifacts into a single HTML file.

24|15|Updated Dec 8, 2025
Search Tags:#frontend#react#claude#artifacts#vite#bundling
One-click install
npx skills add https://github.com/ammosu/awesome-claude-skills-zh-TW --skill artifacts-builder-ammosu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/ammosu/awesome-claude-skills-zh-TW/tree/main/artifacts-builder
Command: npx skills add https://github.com/ammosu/awesome-claude-skills-zh-TW --skill artifacts-builder-ammosu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, vite, tailwindcss, postcss, autoprefixer, @types/node, tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, lucide-react, next-themes, @radix-ui/react-accordion, @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, sonner, cmdk, vaul, embla-carousel-react, react-day-picker, react-resizable-panels, date-fns, react-hook-form, @hookform/resolvers, zod, react, typescript, and includes scripts (resource) components.

What problem does it solve?

This Skill simplifies scaffolding, bundling, and sharing Claude-ready frontend artifacts by providing a ready-to-run React + Vite workflow that outputs a single, inlined HTML artifact suitable for Claude conversations.

Core Features & Use Cases

  • Scaffolds a fully configured React + Vite project tailored for Claude artifacts.
  • Bundles all code, assets, and dependencies into a single bundle.html file for easy Claude sharing.
  • Includes scripts to initialize, bundle, and test artifacts, enabling rapid iteration for complex Claude workflows.

Quick Start

Use the artifacts-builder skill to generate a new artifact project, then run the bundle script to produce bundle.html ready for Claude.

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 for Claude artifacts?▼

Bundling a React app into a single HTML file for Claude artifacts requires compiling all code, assets, and dependencies into one inlined bundle.html. This Skill uses Parcel and html-inline to produce that shareable output for Claude conversations.

What is the best way to share a React component in a Claude conversation?▼

The best way to share a React component in a Claude conversation is to inline all JavaScript, CSS, and assets into a single bundle.html file. This eliminates external dependency requests, ensuring the artifact renders directly within the Claude interface.

Do I need Node.js and pnpm to scaffold Claude-ready frontend artifacts?▼

Yes, you need Node.js 18+ and pnpm to scaffold Claude-ready frontend artifacts. These tools manage the Vite and Parcel dependencies required to initialize the project and execute the bundling scripts that generate the final HTML file.

Can I use Tailwind CSS and Radix UI when building artifacts for Claude?▼

Yes, you can use Tailwind CSS and Radix UI when building artifacts for Claude. The scaffolding process includes PostCSS, Tailwind, and multiple Radix UI primitives, allowing you to build complex interfaces that bundle cleanly into a single HTML file.

How does the bundling process handle external assets and dependencies?▼

The bundling process handles external assets and dependencies by inlining them directly into the HTML output. By using Parcel alongside html-inline, all JavaScript modules, stylesheets, and static assets are embedded within a single bundle.html file.

Why use Vite for scaffolding instead of standard Create React App for Claude artifacts?▼

Using Vite for scaffolding instead of standard Create React App provides faster build times and native ES module support tailored for Claude artifacts. Vite integrates efficiently with Parcel and html-inline to compile complex React workflows into a single shareable HTML bundle.

Related Skills

Explore More Software Engineering Skills→
initializinitializ
186

codegen-react

Scaffold Vite + React projects and run a hot-reloading development server.

Official
Intermediate
ollieb89ollieb89

web-artifacts-builder

Scaffold a React + Vite project and bundle it into a single HTML file.

Community
Advanced
TheGoat395TheGoat395
117

ui-primitives-shadcn-lucide

Generate accessible UI components with Radix-style primitives and lucide-react icons.

Community
Intermediate
OutlineDrivenOutlineDriven
15

web-artifacts-builder

Bootstrap React and Vite projects and bundle them into a single HTML file.

Official
Intermediate