Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
A toolset for building multi-component React artifacts that run inside claude.ai. It scaffolds a project with React, TypeScript, Tailwind CSS, and shadcn/ui pre-configured, then bundles everything into a single self-contained HTML file ready to share as a Claude artifact. Intended for artifacts that need state management, routing, or component libraries, not simple single-file HTML.
Bundles a full React and shadcn/ui app into a single HTML file so you can share complex interactive UIs in Claude without hosting or deploying anything.
When to use it
- Building interactive dashboards to share in Claude conversations
- Prototyping multi-page React apps without a deployment
- Creating data visualization tools as self-contained HTML artifacts
- Generating kanban boards, calculators, or form tools as artifacts
- Sharing stateful UI components with non-technical users via Claude
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Build a kanban board task manager
- 1Run init-artifact.sh to scaffold a new React + TypeScript + Tailwind + shadcn/ui project
- 2Edit the generated components to implement kanban board UI and drag-and-drop state
- 3Add shadcn/ui Card and Badge components for task display
- 4Run bundle-artifact.sh to inline all JavaScript, CSS, and dependencies into bundle.html
- 5Share bundle.html with the user as a Claude artifact
A self-contained HTML file with a functional kanban board displayed as an interactive Claude artifact