SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsweb-artifacts-builder

web-artifacts-builder

Frontend & websites

View repository

Updated 10-15 23:47

About this skill

Web Artifacts Builder

Build powerful frontend claude.ai artifacts by following these steps:

  1. Use scripts/init-artifact.sh to initialize the frontend repository
  2. Develop the 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 and Styling Guidelines

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

Quick Start

Step 1: Initialize the project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh 
cd

This creates a fully configured project, including:

  • ✅ React + TypeScript (via Vite)
  • ✅ Tailwind CSS 3.4.1 with the shadcn/ui theme system
  • ✅ Path aliases (@/) configured
  • ✅ 40+ shadcn/ui components preinstalled
  • ✅ All Radix UI dependencies included
  • ✅ Parcel configured for bundling (via .parcelrc)
  • ✅ Node 18+ compatibility (automatically detects and pins the Vite version)

Step 2: Develop the artifact

Edit the generated files to build the artifact. See "Common Development Tasks" below for guidance.

Step 3: Bundle into a single HTML file

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 shared directly as an artifact in a Claude conversation.

Requirement: The project must have index.html。

What the script does：

  • Install bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
  • Create a .parcelrc configuration with path alias support
  • Build with Parcel (no source maps)
  • Inline all assets into a single HTML using html-inline

Step 4: Share the artifact with the user

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

Step 5: Test/visualize the artifact (optional)

Note: This is a completely optional step. Only do it when necessary or requested.

To test/visualize the artifact, use available tools (including other skills or built-in tools such as Playwright or Puppeteer). Generally, avoid testing the artifact in advance, as it adds latency between the request and being able to see the finished artifact. If requested or if issues arise, test it later after presenting the artifact.

Reference