Is Artifacts Builder suitable for simple single-file HTML artifacts?

No. It’s intended for complex artifacts requiring multiple components, state management, and routing. Use lighter approaches for simple single-file HTML/JSX artifacts.

What tooling is required to use Artifacts Builder?

You need Node.js 18+ and to run the scripts from the SKILL.md: scripts/init-artifact.sh to start, and scripts/bundle-artifact.sh to bundle. Bundling uses Parcel and html-inline to produce a self-contained bundle.html.

Can I customize the bundling or inlining process?

The bundle-artifact.sh approach inlines assets into bundle.html for portability. If needed, you can adjust configuration and scripts for your project, but the default flow is designed to produce a self-contained artifact for Claude sharing.

artifacts-builder

Scanned

npx machina-cli add skill ComposioHQ/awesome-claude-plugins/artifacts-builder --openclaw

Files (1)

SKILL.md

2.9 KB

Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

Initialize the frontend repo using scripts/init-artifact.sh
Develop your artifact by editing the generated code
Bundle all code into a single HTML file using scripts/bundle-artifact.sh
Display artifact to user
(Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

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.

Quick Start

Step 1: Initialize Project

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:

React + TypeScript (via Vite)
Tailwind CSS 3.4.1 with shadcn/ui theming system
Path aliases (@/) configured
40+ shadcn/ui components pre-installed
All Radix UI dependencies included
Parcel configured for bundling (via .parcelrc)
Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

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:

Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
Creates .parcelrc config with path alias support
Builds with Parcel (no source maps)
Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

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.

Reference

shadcn/ui components: https://ui.shadcn.com/docs/components

Source

git clone https://github.com/ComposioHQ/awesome-claude-plugins/blob/master/artifacts-builder/skills/artifacts-builder/SKILL.md

View on GitHub

Overview

Artifacts Builder provides tools for creating elaborate claude.ai HTML artifacts using React, TypeScript, Tailwind CSS, and shadcn/ui. It’s designed for multi-component artifacts that need state management and routing, not simple single-file HTML. Artifacts can be bundled into a single HTML file for easy sharing in Claude conversations.

How This Skill Works

Initialize a frontend project with scripts/init-artifact.sh, develop your artifact by editing the generated code, then bundle everything into a single HTML using scripts/bundle-artifact.sh. The bundle.html file inlines JavaScript, CSS, and dependencies so you can share a self-contained artifact directly in Claude.

When to Use It

Building a multi-component Claude artifact that requires routing and state management
Need a single self-contained HTML artifact for Claude conversations
Using React 18 + TypeScript + Tailwind + shadcn/ui in the project
Bundling all assets into one portable artifact for distribution
Planning to test or visualize the artifact with tools like Playwright or Puppeteer

Quick Start

Step 1: Initialize Project Run the initialization script to create a new React project: bash scripts/init-artifact.sh <project-name> cd <project-name>
Step 2: Develop Your Artifact Edit the generated files to build your artifact. Refer to the Common Development Tasks section in the SKILL.md for guidance.
Step 3: Bundle to Single HTML File Bundle the React app into a single HTML artifact: bash scripts/bundle-artifact.sh This creates bundle.html with all assets inlined. Ensure your project has an index.html in the root.

Best Practices

Start from the initialization script to ensure a consistent project setup
Keep an index.html in the root since bundling relies on it
Use path aliases (/@) to keep imports clean and maintainable
Follow the design guidelines to avoid AI slop (no excessive centered layouts, purple gradients, uniform rounded corners, or Inter font)
Verify the final bundle.html contains all assets inlined and works standalone

Example Use Cases

A dashboard-like artifact with multiple components and navigation between sections
A guided multi-step form with stateful steps and validation
An interactive tutorial featuring tabs, accordions, and dynamic content
A documentation viewer with routing between chapters and code samples
A product gallery with interactive components and inlined assets for Claude sharing

Frequently Asked Questions

Add this skill to your agents