web-artifacts-builder

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

Updated Dec 10, 2025

Search Tags:#React #routing #Tailwind #bundling #artifact #UI-components #claude.ai

Ready to run

npx skills add https://github.com/Kullendorff/densomsover --skill web-artifacts-builder-kullendorff

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/Kullendorff/densomsover/tree/main/.claude/skills/web-artifacts-builder
Command: npx skills add https://github.com/Kullendorff/densomsover --skill web-artifacts-builder-kullendorff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Suite of tools for creating 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

Multi-component UIs: build complex claude.ai artifacts with routing and state management.
Modern stack: React + TypeScript + Tailwind CSS with shadcn/ui components.
Reuse and composition: create modular artifacts that can be bundled into a single HTML file for Claude conversations.

Quick Start

Use the web-artifacts-builder to initialize a new artifact project with:

bash scripts/init-artifact.sh <project-name>
cd <project-name>
Develop your artifact by editing the generated code
Bundle the artifact into a single HTML using:
bash scripts/bundle-artifact.sh This will produce bundle.html that can be shared in Claude conversations.

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 application into a single HTML file for claude.ai?▼

You can bundle a React application into a single HTML file for claude.ai by using a Node.js-based script that compiles the modular UI components, routing, and state management into a self-contained bundle.html artifact.

Can I use shadcn/ui components in a claude.ai artifact?▼

Yes, you can use shadcn/ui components in a claude.ai artifact by integrating them into a React and TypeScript project before bundling. This approach allows you to compose complex modular UIs into a single shareable HTML file.

Does this approach work for simple single-file HTML artifacts?▼

No, this approach is not intended for simple single-file HTML or JSX artifacts. It is designed specifically for complex multi-component UIs that require routing, state management, and shadcn/ui integration.

What's the best way to add routing and state management to claude.ai HTML artifacts?▼

The best way to add routing and state management to claude.ai HTML artifacts is to initialize a dedicated Node.js frontend project using React and TypeScript, develop the multi-component logic, and bundle the output into a single HTML file.

Do I need Node.js to create complex claude.ai artifacts with React and Tailwind?▼

Yes, you need a Node.js environment to run the initialization and bundling scripts. This workflow generates the React and Tailwind CSS project structure and compiles it into the final self-contained HTML artifact.