skills.rest
julianromli
julianromliCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

artifacts-builder

Create and package React, Tailwind, and shadcn/ui artifacts as single HTML files.

141|20|Updated Dec 19, 2025
Search Tags:#ui#frontend#react#tailwind#bundling#artifact#claude-ai
One-click install
npx skills add https://github.com/julianromli/opencode-template --skill artifacts-builder-julianromli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/julianromli/opencode-template/tree/main/skill/artifacts-builder
Command: npx skills add https://github.com/julianromli/opencode-template --skill artifacts-builder-julianromli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, vite, tailwindcss, postcss, autoprefixer, tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, @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 enabling you to create 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

  • Bootstraps a React + Vite project tailored for Claude artifacts and ensures a consistent bundling pipeline.
  • Supports inlined bundling into a single HTML artifact via scripts for easy sharing in Claude conversations.
  • Leverages shadcn/ui components and Tailwind CSS for scalable, polished user interfaces across complex artifacts.
  • Use Case: Build an interactive Claude.ai artifact that demonstrates a data dashboard with routing and state management.

Quick Start

Initialize your artifact project with the provided script and bundle it into a single HTML file using the bundle-artifact script.

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.ai artifacts?▼

To bundle a React app into a single HTML file for Claude.ai artifacts, use the provided bundle-artifact scripts to inline Vite-built React and Tailwind CSS assets into one shareable HTML file. This packaging workflow results in a single self-contained file.

Can I use shadcn/ui and Tailwind CSS components in Claude.ai artifacts?▼

Yes, you can use shadcn/ui and Tailwind CSS components in Claude.ai artifacts. This approach bootstraps a React project preconfigured with Radix UI primitives and Tailwind CSS to build scalable, polished user interfaces inside complex interactive artifacts.

Do I need Node 18+ to build complex interactive Claude artifacts?▼

Yes, you need Node 18+ to build complex interactive Claude artifacts. This toolchain requires a modern Node-based environment to run Vite and Parcel bundling scripts and process Tailwind CSS and React dependencies into a self-contained HTML file.

What's the best way to add state management and routing to a Claude.ai HTML artifact?▼

The best way to add state management and routing to a Claude.ai HTML artifact is to build it as a multi-component React application. This workflow uses Vite for bundling and React Hook Form with Zod for state management before packaging into a single HTML file.

When should I not use this approach for building Claude artifacts?▼

You should not use this approach for building simple single-file HTML or JSX Claude artifacts. It is designed specifically for complex interactive artifacts requiring state management, routing, or shadcn/ui components, making it overly complex for basic static HTML needs.

Related Skills

Explore More Software Engineering Skills→
kmshihab7878kmshihab7878
6

web-artifacts-builder

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

Community
Advanced
sergeyitalysergeyitaly
1

web-artifacts-builder

Builds interactive React frontend artifacts bundled into single HTML files.

Community
Intermediate
vietlinhh02vietlinhh02

shadcn/ui

Generate reusable React components styled with Tailwind CSS and Radix UI primitives.

Community
Intermediate
nilecuinilecui
27

web-artifacts-builder

Create multi-component React HTML artifacts with Vite, Tailwind CSS, and shadcn/ui.

Community
Advanced