Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From claude-commands
Creates multi-component claude.ai HTML artifacts using React 18, TypeScript, Tailwind CSS, and shadcn/ui. Generates, bundles, and tests complex frontend artifacts with state management and routing.
npx claudepluginhub jleechanorg/claude-commands --plugin claude-commandsHow this skill is triggered — by the user, by Claude, or both
Slash command
/claude-commands:web-artifacts-builderThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
To build powerful frontend claude.ai artifacts, follow these steps:
Creates elaborate multi-component HTML artifacts for Claude.ai using React, Tailwind CSS, and shadcn/ui. Bundles into single-file artifacts. For complex apps needing state/routing/shadcn components.
Builds complex Claude.ai HTML artifacts with React, TypeScript, Tailwind CSS, and shadcn/ui. Provides init and bundling scripts for multi-component apps with state and routing.
Builds complex, multi-component HTML artifacts for Claude using React, Tailwind CSS, and shadcn/ui. Includes scripts to initialize projects and bundle into single-file artifacts.
Share bugs, ideas, or general feedback.
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
Requirements: Your project must have an index.html in the root directory.
What the script does:
.parcelrc config with path alias supportFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.