Web Artifacts Builder

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend technologies (React, Tailwind CSS, shadcn/ui).

Prerequisites

• Node.js 18+
• npm
• Understanding of React and TypeScript

Instructions

Stack

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

Step 1: Initialize Project

bash scripts/init-artifact.sh <project-name>
cd <project-name>

Creates:

• React + TypeScript (via Vite)
• Tailwind CSS 3.4.1 with shadcn/ui theming
• Path aliases (@/) configured
• 40+ shadcn/ui components pre-installed
• Parcel configured for bundling

Step 2: Develop Your Artifact

Edit the generated files to build your artifact.

Step 3: Bundle to Single HTML

bash scripts/bundle-artifact.sh

Creates bundle.html - self-contained with all JS, CSS, dependencies inlined.

Step 4: Share Artifact

Share the bundled HTML file as an artifact.

Step 5: Testing (Optional)

Use Playwright/Puppeteer to test if needed.

Design Guidelines

AVOID "AI slop":

• Excessive centered layouts
• Purple gradients
• Uniform rounded corners
• Inter font

DO:

• Unique, intentional design choices
• Appropriate use of shadcn/ui components
• Proper spacing and hierarchy

Error Handling

• Ensure index.html exists in root for bundling
• If build fails, check for TypeScript errors
• Test bundle.html locally before sharing

Notes

• For complex artifacts requiring state management or routing
• Not for simple single-file HTML/JSX artifacts
• shadcn/ui components: https://ui.shadcn.com/docs/components

Source: anthropics/skills