skills.rest
Nymbo
NymboCOMMUNITY
Explore all skills by this author →
𝕏@nymboqtGitHub

artifacts-builder

Bundle multi-file React and TypeScript projects into a single HTML artifact.

Updated Aug 23, 2026
Search Tags:#web development#frontend#react#shadcn/ui#tailwind css#HTML artifact#bundling
One-click install
npx skills add https://github.com/Nymbo/Skills --skill artifacts-builder-nymbo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/Nymbo/Skills/tree/main/artifacts-builder
Command: npx skills add https://github.com/Nymbo/Skills --skill artifacts-builder-nymbo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, tailwindcss, 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 solves?

Building complex, interactive HTML artifacts for AI conversations often requires setting up a full frontend development environment, managing dependencies, and bundling everything into a single, shareable file. This skill automates that entire, intricate process.

Core Features & Use Cases

  • React + Tailwind Setup: Initializes a complete React, TypeScript, Vite, Tailwind CSS, and shadcn/ui project with all necessary configurations and components.
  • Single-File Bundling: Compiles the entire web application into a self-contained bundle.html artifact, ready for direct sharing in Claude conversations.
  • Use Case: Quickly generate a sophisticated dashboard, a data visualization, or an interactive form as a single HTML file that can be viewed directly in Claude, eliminating the need for external hosting or complex deployment.

Quick Start

Initialize a new React project named 'my-dashboard' using the artifacts-builder skill.

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 and Tailwind project into a single HTML artifact?▼

Bundling a React and Tailwind project into a single HTML artifact compiles your multi-file frontend code with all dependencies, styles, and assets into one self-contained bundle.html file. Use init-artifact.sh to set up your project with React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui components, then run bundle-artifact.sh to generate the final artifact ready for Claude conversations.

Can I use shadcn/ui components and Radix UI in an HTML artifact?▼

Yes, artifacts-builder supports the complete shadcn/ui component library built on Radix UI primitives, including accordion, dialog, dropdown menu, tabs, tooltips, and all other Radix components. These components bundle seamlessly with React 18 and Tailwind CSS into your final HTML artifact.

What's required to create an interactive artifact with state management and routing?▼

Create an interactive artifact by organizing your React project with an index.html in the root directory and TypeScript components handling state management and routing. The artifacts-builder automates dependency installation via pnpm, bundles code with Parcel and Vite, and inlines all assets—you only run init-artifact.sh and bundle-artifact.sh.

When should I use artifacts-builder instead of a simple HTML file?▼

Use artifacts-builder for complex, interactive applications requiring React state management, multiple components, and styling with Tailwind CSS. It's not suitable for simple, single-file HTML or JSX artifacts; reserve it for dashboards, data visualizations, interactive forms, and multi-component applications.

Does artifacts-builder handle CSS bundling and asset inlining automatically?▼

Yes, artifacts-builder automatically bundles Tailwind CSS with PostCSS and Autoprefixer, inlines all assets into the HTML file using html-inline, and compiles everything with Parcel's default configuration and TypeScript path resolver—producing one complete, self-contained artifact.

Related Skills

Explore More Software Engineering Skills→
466852675466852675

web-artifacts-builder

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

Community
Advanced
511avolo-dot511avolo-dot

web-artifacts-builder

Bundle frontend assets into a single self-contained HTML artifact.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

building-with-shadcn

Create accessible React UIs with shadcn/ui components and Radix primitives.

Community
Intermediate
alexzuoshalexzuosh

vite

Configure Vite build tool options, plugins, and SSR capabilities.

Community
Intermediate