SkillRepo
Sign InSign Up
Catalog
anthropics/web-artifacts-builder

anthropics

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

globalComplete terms in LICENSE.txt
0installs0uses—~746
v1.0Saved Apr 5, 2026

Web Artifacts Builder

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

  1. Initialize the frontend repo using scripts/init-artifact.sh
  2. Develop your artifact by editing the generated code
  3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
  4. Display artifact to user
  5. (Optional) Test the artifact

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

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

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

This creates a fully configured project with:

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

Step 2: Develop Your Artifact

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

Requirements: Your project must have an index.html in the root directory.

What the script does:

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

Step 4: Share Artifact with User

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

Step 5: Testing/Visualizing the Artifact (Optional)

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

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

Reference

Files4
4 files · 41.8 KB

Select a file to preview

Overall Score

81/100

Grade

B

Good

Safety

85

Quality

82

Clarity

83

Completeness

72

Summary

Web Artifacts Builder is a comprehensive skill for creating production-ready React + TypeScript frontend artifacts deployable to Claude.ai. It automates project scaffolding with Vite, Tailwind CSS, and shadcn/ui components, then bundles everything into a single self-contained HTML file suitable for artifact display.

Static Analysis Findings

1 finding

Patterns detected by deterministic static analysis before AI scoring. Hover over any finding code for detailed information and remediation guidance.

Destructive Operation
SEC-001Recursive DeletionMax: B

Recursive deletion pattern (rm -rf)

scripts/bundle-artifact.shrm -rf
100% confidenceCWE-379: Unrestricted File Deletion

Detected Capabilities

Project scaffolding and initialization (Vite + React + TypeScript setup)Dependency installation and version pinning (Node version detection)Configuration file generation (Tailwind, PostCSS, Vite, TypeScript)Component library extraction from tarball archiveBash scripting for build automation and conditional logicFile modification using sed and Node.js file system operationsBundling and inlining assets into single HTML file (Parcel + html-inline)Path alias configuration for TypeScript module resolution

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

react artifactinteractive dashboardbundled component libraryshadcn ui componentsingle page htmltailwind styled componentsstate management artifact

Risk Signals

INFO

Recursive deletion using rm -rf on dist/ and bundle.html directories

scripts/bundle-artifact.sh:26
WARNING

Dynamic package installation without version pinning (pnpm create vite, pnpm install)

scripts/init-artifact.sh:47-48, 61-62
WARNING

Tarball extraction without integrity verification

scripts/init-artifact.sh:107
INFO

Direct JSON modification using node -e with fs.readFileSync/writeFileSync

scripts/init-artifact.sh:87-95
INFO

sed command with OS detection for macOS/Linux compatibility

scripts/init-artifact.sh:26-29

Referenced Domains

External domains referenced in skill content, detected by static analysis.

ui.shadcn.comwww.apache.org

Use Cases

  • Build interactive React-based artifacts with state management and component libraries
  • Create data visualization dashboards with shadcn/ui components
  • Develop form-heavy applications using React Hook Form and Zod validation
  • Bundle multi-file React projects into single HTML artifacts for sharing
  • Generate accessible UI components with Radix UI primitives and Tailwind styling

Quality Notes

  • ✅ Excellent project structure: clear 5-step workflow (init → develop → bundle → share → test) that agents can follow sequentially
  • ✅ Comprehensive error handling: checks for Node version, pnpm availability, required files (package.json, index.html, tarball) with helpful error messages
  • ✅ Well-documented dependencies: skill clearly lists what gets installed and why (40+ shadcn/ui components, Radix UI, Tailwind utilities)
  • ✅ Design guidance included: explicit anti-patterns section ('avoid AI slop') showing awareness of common artifact design mistakes
  • ✅ Path alias configuration: establishes @/ import convention early, reducing refactoring friction later
  • ✅ Platform compatibility: cross-OS sed handling, Node 18+ version pinning strategy demonstrates production-grade scripting
  • ✅ Tarball pre-bundling: avoiding remote component downloads improves reliability and offline capability
  • ✅ Clear file dependencies: manifest correctly lists all supporting scripts and archives needed
  • ⚠️ Missing: no guidance on common development tasks (adding new components, managing state, routing setup) despite 'See **Common Development Tasks**' reference in step 2
  • ⚠️ Missing: no troubleshooting section for common failures (pnpm lock conflicts, build errors, bundling issues)
  • ⚠️ Missing: testing step is optional but guidance is vague ('use available tools') — would benefit from specific Playwright/Puppeteer examples
  • ⚠️ No mention of bundle size constraints or optimization techniques (tree-shaking, code splitting post-bundling)
  • ⚠️ Reference to shadcn/ui at ui.shadcn.com is helpful but skill could note that component source is extracted from tarball, not fetched at runtime
Model: claude-haiku-4-5-20251001Analyzed: Apr 5, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Add anthropics/web-artifacts-builder to your library

Get Started Free

Command Palette

Search for a command to run...