skills.rest
SangIlMo
SangIlMoCOMMUNITY
Explore all skills by this author →
GitHub

web-artifacts-builder

Automate creation of multi-component Claude.ai HTML artifacts with React, Tailwind, and shadcn/ui.

1|Updated Nov 14, 2024
Search Tags:#frontend#react#claude#tailwind#bundling#artifact#shadcn
One-click install
npx skills add https://github.com/SangIlMo/.dotfiles --skill web-artifacts-builder-sangilmo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/SangIlMo/.dotfiles/tree/main/.config/claude/skills/web-artifacts-builder
Command: npx skills add https://github.com/SangIlMo/.dotfiles --skill web-artifacts-builder-sangilmo

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-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 for creating elaborate Claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). It enables developers to build multi-component experiences with state management and routing, avoiding manual configuration tedium and enabling rapid sharing of artifacts.

Core Features & Use Cases

  • Multi-component Claude artifacts: Create rich, stateful Claude projects with routing and component composition.
  • Modern frontend stack: Leverage React, TypeScript, Vite, Tailwind CSS, and shadcn/ui for cohesive design systems.
  • One-file artifact sharing: Bundle the project into a single HTML artifact for easy Claude integration.

Quick Start

Run the init-artifact.sh script to scaffold a new Claude artifact project, then develop, bundle into a single HTML artifact, and share.

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 project into a single HTML file for Claude artifacts?▼

Bundling a React project into a single HTML file for Claude artifacts is done by running a coordinated script that uses Vite or Parcel to compile components, state, and styles into one shareable HTML file.

Can I use shadcn/ui and Tailwind CSS when building Claude artifacts?▼

Yes, you can use shadcn/ui and Tailwind CSS when building Claude artifacts. The toolchain pre-configures Tailwind, Radix UI primitives, and class-variance-authority to establish a cohesive design system within your multi-component project.

What is the best way to create multi-component Claude artifacts with routing?▼

The best way to create multi-component Claude artifacts with routing is to scaffold the project using an initialization script, enabling state management and component composition before compiling everything into a single HTML file.

Does this approach support state management and React hooks for Claude projects?▼

Yes, this approach supports state management and React hooks for Claude projects by leveraging a modern React and TypeScript stack, allowing you to build rich, stateful experiences rather than static HTML pages.

Do I need to manually configure Vite or Parcel to share a Claude artifact?▼

No, you do not need to manually configure Vite or Parcel to share a Claude artifact. The automation handles dependency resolution, bundling, and asset references, eliminating manual setup tedium for developers.

Why does my multi-component Claude artifact fail to bundle into one file?▼

A multi-component Claude artifact may fail to bundle into one file if dependencies are unresolved or scripts are misconfigured. The toolchain coordinates initialization and bundling scripts to ensure assets and references are correctly inlined into the final HTML.

Related Skills

Explore More Software Engineering Skills→
dnnyngyendnnyngyen
332

webapp-building

Scaffold React web applications with TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate
ZhanlinCuiZhanlinCui
178

web-artifacts-builder

Build React/TypeScript artifacts bundled into a single HTML file for Claude.

Community
Advanced
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
davekilleendavekilleen
461

anthropic-web-artifacts-builder

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

Community
Advanced