skills.rest
refly-ai
refly-aiOFFICIAL
Explore all skills by this author →
Website𝕏@reflyaiGitHub

web-artifacts-builder

Bundle React frontend artifacts into a single shareable HTML file.

Updated Jan 4, 2026
Search Tags:#React#frontend#Claude#HTML#Tailwind#artifact#bundle
One-click install
npx skills add https://github.com/refly-ai/skill-to-workflow --skill web-artifacts-builder-refly-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/refly-ai/skill-to-workflow/tree/main/skills-source/anthropic/web-artifacts-builder
Command: npx skills add https://github.com/refly-ai/skill-to-workflow --skill web-artifacts-builder-refly-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vite, tailwindcss, postcss, autoprefixer, 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?

Bundles complex Claude-ready frontend artifacts into a single, shareable HTML file.

Core Features & Use Cases

  • Artifact scaffolding: Initialize a React + TypeScript project configured for Claude artifact development.
  • Bundling to single HTML: Bundle the app into a self-contained HTML file with all assets inlined for easy sharing.
  • Design-guided development: Includes Tailwind + shadcn/ui setup and ready-to-use UI components for rapid artifact creation.

Quick Start

Use the Skill to initialize and bundle an artifact by running the provided scripts:

  • bash scripts/init-artifact.sh <project-name>
  • Develop your artifact by editing generated files
  • bash scripts/bundle-artifact.sh to generate bundle.html

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

Bundling a React app into a single HTML file requires compiling your TypeScript project with Vite and inlining assets with html-inline. This Skill generates a self-contained bundle.html for easy sharing.

What is a Claude artifact and how does frontend bundling work for it?▼

A Claude artifact is a shareable frontend application component. This Skill scaffolds a React project with Tailwind and shadcn/ui, then bundles the built output and inlines assets into one HTML file for Claude conversations.

Do I need Node.js and pnpm to build frontend artifacts?▼

Yes, a Node.js environment with pnpm is required to initialize, bundle, and inline frontend artifacts. The scripts use pnpm to manage dependencies and execute the Vite bundling process.

Can I use Tailwind CSS and shadcn/ui components in my bundled HTML?▼

Yes, the initialization script scaffolds a project pre-configured with Tailwind CSS, Radix UI primitives, and ready-to-use shadcn/ui components. These are compiled and inlined into the final HTML bundle.

What's the best way to share a complex React project via Claude?▼

The best way to share a complex React project via Claude is to bundle it into a self-contained HTML file. This process compiles your app and inlines all JavaScript and CSS assets directly into one shareable document.

Why does my bundled React artifact fail to initialize?▼

Bundled React artifact initialization fails if the Node.js environment or pnpm is missing. You must run the init-artifact script with a valid project name to scaffold Vite configuration and install required dependencies.

Related Skills

Explore More Software Engineering Skills→
mendoza000mendoza000

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in React projects.

Community
Intermediate
kevinlinkevinlin
14

web-artifacts-builder

Bundle React and TypeScript frontend artifacts into a single self-contained HTML file.

Community
Intermediate
kuse-aikuse-ai
6

backstage-style-web

Generate React 18+ web applications using the Backstage Design System.

Official
Advanced
wsxwj123wsxwj123
7

web-artifacts-builder

Bundle React and Vite projects into a single HTML artifact.

Community
Advanced