skills.rest
bhisoftware
bhisoftwareCOMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

Create React, TypeScript, and Vite frontend artifacts bundled into a single HTML file.

Updated Aug 23, 2026
Search Tags:#frontend#react#shadcn/ui#vite#bundling#artifact
One-click install
npx skills add https://github.com/bhisoftware/page-refresh --skill artifacts-builder-bhisoftware
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/bhisoftware/page-refresh/tree/main/library/bhi-claude-skills/react-builder
Command: npx skills add https://github.com/bhisoftware/page-refresh --skill artifacts-builder-bhisoftware

SYSTEM DOCUMENTATION & REQUIREMENTS

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

This Skill provides a streamlined process for creating complex, multi-component frontend artifacts using modern web technologies, specifically for platforms like Claude.ai.

Core Features & Use Cases

  • Project Initialization: Quickly set up a new React project with Vite, TypeScript, Tailwind CSS, and shadcn/ui pre-configured.
  • Component Integration: Seamlessly use over 40 shadcn/ui components and integrate custom logic.
  • Bundling: Package the entire application into a single, self-contained HTML file for easy deployment as an artifact.
  • Use Case: Develop an interactive dashboard artifact for a user, complete with data visualization components and user input forms, all bundled into a single HTML file.

Quick Start

Run the bash scripts/init-artifact.sh command with your desired project name to begin.

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 application into a single HTML file for artifact deployment?▼

To bundle a React application into a single HTML file, this Skill uses Vite and Parcel to compile your project, including all JavaScript, TypeScript, and CSS assets, into a self-contained HTML artifact suitable for immediate deployment.

Can I use shadcn/ui components when building interactive web artifacts?▼

Yes, you can use shadcn/ui components when building interactive web artifacts. The Skill pre-configures over 40 Radix UI-backed shadcn/ui components, enabling sophisticated state management and complex UI development within your project.

What is the best way to set up a React project with Vite, TypeScript, and Tailwind CSS?▼

The best way to set up a React project with Vite, TypeScript, and Tailwind CSS is by running the provided initialization script, which pre-configures the entire environment alongside shadcn/ui for immediate frontend artifact development.

Does the single HTML bundle support complex state management and routing?▼

Yes, the single HTML bundle supports complex state management and routing. The Skill facilitates sophisticated frontend artifacts using React, allowing you to integrate custom logic and interactive components before bundling everything for deployment.

Can I integrate custom logic with Radix UI components in a bundled artifact?▼

Yes, you can integrate custom logic with Radix UI components in a bundled artifact. The Skill seamlessly combines over 40 shadcn/ui components with your custom logic, packaging the entire application into a single self-contained HTML file.

What limitations exist when deploying a Vite React app as a single HTML file?▼

When deploying a Vite React app as a single HTML file, all assets including JavaScript, CSS, and Radix UI components are inlined. This self-contained format requires bundling the entire application together, limiting independent asset fetching during deployment.

Related Skills

Explore More Software Engineering Skills→
Xinm123Xinm123

web-artifacts-builder

Automate creation of React and TypeScript HTML artifacts for Claude.ai.

Community
Advanced
jaydubya818jaydubya818

artifacts-builder

Create and bundle React frontend artifacts into a single HTML file.

Community
Advanced
frankxaifrankxai
7

web-artifacts-builder

Create single-file HTML artifacts with React, TypeScript, Vite, and Tailwind CSS.

Community
Advanced
Jaydpatel01Jaydpatel01

web-artifacts-builder

Build multi-component React HTML artifacts with Tailwind CSS and shadcn/ui.

Community
Advanced