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

web-artifacts-builder

Frontend & websites

View repository

Updated 10-15 19:47

About this skill

Web Artifacts Builder

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

  1. scripts/init-artifact.shInitialize the frontend repository using.
  2. Edit the generated code to develop the artifact.
  3. scripts/bundle-artifact.shBundle all code into a single HTML file using.
  4. Display the artifact to the user.
  5. (Optional) Test the artifact.

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

Design and Style Guidelines

Very important: To avoid the "obvious AI-made feel (AI slop)," avoid excessive center-aligned layouts, purple gradients, uniform rounded corners, and the use of 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 <project-name>
cd <project-name>

This command creates a project configured with the following:

  • ✅ React + TypeScript (Vite-based)
  • ✅ Tailwind CSS 3.4.1 (including the shadcn/ui theme system)
  • ✅ Path aliases (@/) configuration complete
  • ✅ Over 40 shadcn/ui components pre-installed
  • ✅ All Radix UI dependencies included
  • ✅ Parcel bundling configuration complete (using .parcelrc)
  • ✅ Node 18+ compatibility (automatic precise detection of the Vite version)

Step 2: Develop the artifact

Edit the generated files to build the artifact. If you need guidance, see Common Development Tasksbelow.

Step 3: Bundle into a single HTML file

Bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This command generates bundle.html. This is a standalone artifact file with all JavaScript, CSS, and dependencies inlined. This file can be shared directly as an artifact in a Claude conversation.

Requirements: In the project root directory, index.htmlmust be present.

How the Script Works:

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

Step 4: Share the artifact with the user

Share the bundled HTML file with the user so they can view it as an artifact.

Step 5: Test/Visualize the artifact (Optional)

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

To test or visualize an artifact, use the available tools (including other SKILLs or built-in tools such as Playwright and Puppeteer). In general, it is best to avoid performing artifact tests in advance because it causes latency between the request and checking the result. When there is a request or a problem occurs, present the artifact first and then proceed with testing.

Reference