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

web-artifacts-builder

Frontend & websites

View repository

Updated 10-15 23:58

About this skill

Web Artifacts Builder

To build a powerful front-end claude.ai artifact, follow these steps:

  1. Use scripts/init-artifact.sh to initialize the front-end 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 and Style Guide

Very important: To avoid what is commonly called "AI slop" design, avoid overusing 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 will create a fully configured project containing:

  • ✅ React + TypeScript (via Vite)
  • ✅ Tailwind CSS 3.4.1 with the shadcn/ui theme system
  • ✅ Path aliases configured (@/)
  • ✅ 40+ shadcn/ui components preinstalled
  • ✅ Includes all Radix UI dependencies
  • ✅ Parcel configured 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 into a 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 containing all inline JavaScript, CSS, and dependencies. This file can be shared directly as an artifact in a Claude conversation.

Requirements: Your project root directory must contain a index.html。

Script behavior:

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

Step 4: Share the Artifact with the user

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

Step 5: Test/Preview the Artifact (Optional)

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

To test/preview the artifact, use the available tools (including other Skills or built-in tools such as Playwright or Puppeteer). Typically, avoid testing the artifact in advance, because this increases the delay between the request and seeing the finished artifact. If the user requests it or a problem occurs, test after showing the artifact.

References