web-artifacts-builder

Savant verdict: Review advised

SkillSpector or the source hub flagged patterns to review before use.

Live evaluation

1 pass · 1 investigate · 6 fail across 8 cases. Jev accepted 8 of 16 LLM-drafted cases. Drafted and run by nvidia/nemotron-3-super-120b-a12b, validated and scored by jev-latest.

• Build a React-based expense tracker dashboard with interactive charts, filtering by date range, and data persistence using localStorage. Include a navbar, sidebar, and responsive grid layout using shadcn/ui components.positive case · fail
• Create a multi-step form wizard for job applications with validation, progress tracking, and dynamic field dependencies (e.g., showing different questions based on selected industry). Use shadcn/ui form components, tabs, and toast notifications.positive case · fail
• Develop a real-time collaborative whiteboard with drawing tools (pen, eraser, shape selector), color palette, and undo/redo history. Use shadcn/ui for the toolbar and sidebar, and implement canvas drawing via React refs and useEffect.positive case · fail
• Build a file explorer artifact that lets users browse, upload, and preview files. I want drag-and-drop and folder trees, but I don’t have a backend — can it work entirely frontend?edge case · fail
• Create a simple HTML page with a heading and a paragraph that says 'Hello World'. Just make it look nice with some styling.negative case · pass
• Generate a React component for a button that changes color when hovered. I want to reuse it in other projects.negative case · fail
• I want to build a simple counter app using the web-artifacts-builder skill. I only need a button that increments a number and displays it.edge case · fail
• Help me build an artifact using web-artifacts-builder, but I don't want to use Tailwind CSS or shadcn/ui — I prefer to style everything with plain CSS.edge case · investigate

Safety (NVIDIA SkillSpector)

2 patterns found

• analysis-evasion: scripts/init-artifact.sh (partial)high · SKILL.md:10 · Referenced artifact was not completely inspected
• analysis-evasion: scripts/init-artifact.sh (partial)high · SKILL.md:28 · Referenced artifact was not completely inspected

Structure

• Ships 2 executable scriptsscripts/bundle-artifact.sh, scripts/init-artifact.sh. Review what they do before enabling the skill for agents with tool access.

SKILL.md

---
name: web-artifacts-builder
description: 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.
license: Complete terms in LICENSE.txt
---

# 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
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
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

- **shadcn/ui components**: https://ui.shadcn.com/docs/components