SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsartifacts-builder

artifacts-builder

Frontend & websites

View repository

Updated 10-15 21:36

About this skill

Artifacts Builder

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

  1. Use scripts/init-artifact.sh to initialize the frontend repository
  2. Develop your artifact by editing the generated code
  3. Use scripts/bundle-artifact.sh to bundle all code into a single HTML file
  4. Show the artifact to the user
  5. (Optional) Test the artifact

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

Design & Style Guidelines

Very important: To avoid what is commonly called "AI slop", avoid excessive centered layouts, purple gradients, uniform rounded corners, and the Inter font.

Quick Start

Step 0: Ask about the theme color specification (important)

Before calling the initialization script, you must first ask the user about the project's theme color specification.

Ask the user for the following information:

  • Primary color: What primary color does the project use? (e.g., blue, green, purple, gray, etc.)
  • Brand color: If there are specific brand color values (HSL, RGB, or hex), please provide them
  • Design specification: Is there a complete design system specification file? (If so, a complete theme configuration can be generated based on the specification)

If the user provides theme color information, pass it via environment variables when calling the script:

THEME_COLOR=blue bash scripts/init-artifact.sh <project-name>

Supported theme colors:slate(default gray),blue、green、violet

If the user does not provide a theme color, use the default slate gray theme.

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh <project-name>
# 或指定主题色
THEME_COLOR=blue bash scripts/init-artifact.sh <project-name>
cd <project-name>

This will create a fully configured project that includes:

  • ✅ React + TypeScript (via Vite)
  • ✅ Tailwind CSS 3.4.1 and shadcn/ui theme system
  • ✅ Path alias (@/) configured
  • ✅ 40+ shadcn/ui components pre-installed
  • ✅ Includes all Radix UI dependencies
  • ✅ Parcel configuration for bundling (via .parcelrc)
  • ✅ Node 18+ compatibility (automatically detects and pins the Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See theCommon Development Tasksbelow 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 will create bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be shared directly as an artifact in a Claude conversation.

Requirement: Your project must have an index.html。

What the script does：

  • Install bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
  • Create a .parcelrc configuration that supports path aliases
  • Build with Parcel (no source maps)
  • Use html-inline to inline all assets into a single HTML

Step 4: Share Artifact with User

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

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Perform it only when necessary or upon request.

To test/visualize the artifact, use available tools (including other Skills or built-in tools such as Playwright or Puppeteer). In general, avoid testing the artifact in advance, as this adds latency between the request and the artifact becoming visible. If requested or if problems arise, test after presenting the artifact.

Reference