cyberneticlibrary
← library

Build complex React artifacts

artifacts-builderskillsetup L2★3,035
davepoon/buildwithclaude ↗
What it does

Bundle React artifact code into single-file HTML for Claude conversations

Best for

Creating complex interactive Claude artifacts (dashboards, tools) without requiring file hosting when you need full React/shadcn/ui power in a conversation

Inputs
  • · React/TypeScript project directory
  • · index.html entry point
Outputs
  • · bundle.html (self-contained artifact)
Requires
  • · Parcel bundler
  • · Vite
  • · Tailwind CSS
  • · shadcn/ui
Preconditions

React 18+ project initialized; index.html exists; Parcel and bundling deps installed

Failure modes

Missing index.html; Parcel bundling fails; large asset files exceed inline limits; CSS/JS not inlining properly

Trust signals
  • · bundling script automates Parcel setup
  • · path alias support documented
  • · 40+ shadcn/ui components pre-configured