Artifacts Builder

Name: Artifacts Builder
Author: bobmatnyc

bobmatnyc/claude-mpm-skills

141 installs
63 repo stars
Updated July 18, 2026
bobmatnyc/claude-mpm-skills

This is a copy of artifacts-builder by composiohq - installs and ranking accrue to the original listing.

artifacts-builder is a Claude Code skill that scaffolds and bundles React + TypeScript + shadcn/ui claude.ai artifacts into a single self-contained HTML file.

About

artifacts-builder is a skill that builds multi-component claude.ai HTML artifacts from a modern frontend stack. It initializes a React 18 + TypeScript + Vite project with Tailwind CSS and shadcn/ui, then bundles all code into one self-contained HTML file with Parcel. A developer uses it for complex artifacts that need state, routing, or shadcn/ui components rather than plain HTML. The bundled file can be shared directly in a Claude conversation.

Scaffolds React + TypeScript + shadcn/ui projects for claude.ai artifacts
Bundles the whole app into a single self-contained HTML file via Parcel
Ships init and bundle scripts plus 40+ pre-installed shadcn/ui components

Artifacts Builder by the numbers

141 all-time installs (skills.sh)
Data as of Aug 1, 2026 (Skillselion catalog sync)

At a glance

artifacts-builder capabilities & compatibility

Capabilities: frontend scaffold · html bundle · ui generation
Use cases: frontend · ui design

From the docs

What artifacts-builder says it does

Build complex React + TypeScript + shadcn/ui artifacts bundled to single HTML files

SKILL.md

This creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined.

SKILL.md

40+ shadcn/ui components pre-installed

SKILL.md

npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill artifacts-builder

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/bobmatnyc/claude-mpm-skills/artifacts-builder.svg)](https://skillselion.com/skills/bobmatnyc/claude-mpm-skills/artifacts-builder)

Installs	141
repo stars	★ 63
Last updated	July 18, 2026
Repository	bobmatnyc/claude-mpm-skills ↗

What it does

Scaffold and bundle a React + shadcn/ui claude.ai artifact into a single self-contained HTML file.

Who is it for?

developers building elaborate multi-component claude.ai artifacts that go beyond simple HTML/JSX

Skip if: simple HTML or single-JSX artifacts

When should I use this skill?

building complex claude.ai artifacts that need state management, routing, or shadcn/ui components

What you get

a single self-contained bundle.html artifact

By the numbers

40+ shadcn/ui components pre-installed
Tailwind CSS 3.4.1
React 18

Files

SKILL.mdMarkdownGitHub ↗

Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps: 1. Initialize the frontend repo using scripts/init-artifact.sh 2. Develop your artifact by editing the generated code 3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh 4. Display artifact to user 5. (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

{
  "name": "artifacts-builder",
  "version": "1.0.0",
  "category": "universal",
  "toolchain": null,
  "framework": null,
  "tags": [
    "frontend",
    "testing"
  ],
  "entry_point_tokens": 82,
  "full_tokens": 843,
  "author": "bobmatnyc",
  "license": "MIT",
  "requires": [],
  "updated": "2025-11-21",
  "source_path": "main/artifacts-builder/SKILL.md",
  "source": "https://github.com/bobmatnyc/claude-mpm",
  "created": "2025-11-21",
  "modified": "2025-11-21",
  "maintainer": "Claude MPM Team",
  "attribution_required": true,
  "repository": "https://github.com/bobmatnyc/claude-mpm-skills"
}