playbooks

home / skills / shipshitdev / library / artifacts-builder

artifacts-builder skill

/bundles/workspace/skills/artifacts-builder

This skill guides you to initialize, develop, bundle, and share elaborate Claude.ai artifacts built with React, TypeScript, Tailwind, and UI components.

npx playbooks add skill shipshitdev/library --skill artifacts-builder

Review the files below or copy the command above to add this skill to your agents.

Files (6)
SKILL.md
3.0 KB
---
name: artifacts-builder
description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, @agenticindiedev/ui). Use for complex artifacts requiring state management or shared UI components - not for simple single-file HTML/JSX artifacts.
license: Complete terms in LICENSE.txt
---

# 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 + @agenticindiedev/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
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 configured for @agenticindiedev/ui
- ✅ Path aliases (`@/`) configured
- ✅ @agenticindiedev/ui installed and ready
- ✅ 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
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

- **@agenticindiedev/ui**: Check the package README/docs

Overview

This skill is a suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend technologies. It scaffolds a React + TypeScript + Tailwind UI project, provides build/bundle scripts, and produces a single self-contained HTML artifact ready to share in conversation. Use it when an artifact needs state, shared components, or advanced UI beyond a single-file snippet.

How this skill works

The toolset initializes a Vite-based React project configured with Tailwind CSS and @agenticindiedev/ui, path aliases, and Parcel bundling. You develop in the generated project, then run the bundling script to produce bundle.html with all JS/CSS inlined. The result is a single HTML file you can paste into a conversation so the recipient can open a fully working interactive artifact.

When to use it

  • You need a multi-component interactive artifact with state management.
  • You want consistent UI using @agenticindiedev/ui and Tailwind across components.
  • You must deliver a single-file HTML artifact for embedding in a chat.
  • You want a reproducible dev and build workflow for complex frontend features.
  • You prefer a modern stack (React + TypeScript + Vite) with easy bundling.

Best practices

  • Start by running the init script to generate a correctly configured project structure.
  • Keep shared UI and state in dedicated components/hooks to simplify bundling.
  • Avoid overly generic visual tropes (excessive centering, purple gradients, uniform rounded corners, Inter font) to reduce AI-looking output.
  • Ensure an index.html exists at the project root before bundling.
  • Bundle only when the UI is functionally ready; skip heavy local testing unless necessary to save time.

Example use cases

  • An interactive assistant dashboard with tabs, persisted state, and custom components.
  • A multi-stage form or workflow that collects inputs and shows dynamic previews.
  • A visualization artifact combining charts, controls, and component-driven layouts.
  • A reusable UI toolkit built on @agenticindiedev/ui that you can reuse across artifacts.
  • A demo widget that requires client-side routing and shared context/state.

FAQ

What does the init script create for me?

It scaffolds a Vite + React + TypeScript project with Tailwind configured for @agenticindiedev/ui, path aliases, and Parcel-ready settings.

How does bundling produce a single HTML file?

The bundling script runs Parcel to build the app and then inlines all CSS/JS/assets into bundle.html so nothing external is required.

Do I need to test the artifact before sharing?

Testing is optional. You can skip upfront testing to reduce latency and iterate after sharing; test later if issues are reported.

Which visual styles should I avoid?

Avoid excessive centered layouts, purple gradients, uniform rounded corners, and default Inter font to reduce generic or AI-looking designs.