---
name: artifacts-builder
description: "Generate Claude Artifacts (HTML, SVG, React, Mermaid) the right way — without the common rendering pitfalls. Builds Claude Artifacts that actually render. Knows the sandboxing rules, the React import limits, the SVG quirks, and the HTML/CSS gotchas that make Artifacts fail silently — and writes around all of them."
license: MIT
---

# Artifacts Builder

Artifacts Builder writes Claude Artifacts that render correctly on the first try. It encodes the actual constraints of the Artifacts runtime — the iframe sandbox, the restricted React module set, SVG namespace quirks, and the silent failures that leave you staring at a blank preview pane — and generates code that stays inside those lines. It's for anyone who builds dashboards, diagrams, mini-apps, or visualizations in Claude and is tired of debugging why a component renders fine in their head but not in the panel.

## When to use it

- You asked Claude for a React artifact and got a white screen with no error.
- You need a single-file HTML tool (calculator, form, data table) that must run with no build step.
- You're embedding an SVG and the icons or gradients vanish on render.
- You want a Mermaid flowchart or sequence diagram that parses cleanly instead of throwing a syntax error.
- You're porting a working local component into an artifact and half the imports break.

## How it works

The skill targets the four artifact MIME types Claude supports: `text/html`, `image/svg+xml`, `application/vnd.ant.react` (JSX/TSX), and `application/vnd.ant.mermaid`. For React, it sticks to the libraries the runtime actually bundles — `react`, `lucide-react`, `recharts`, `three`, `d3`, `papaparse`, `mathjs`, `tone`, and `@tailwindcss` utility classes — and refuses arbitrary `npm` imports that have no CDN backing. For HTML it inlines everything (no external `<link>`/`<script src>` to blocked origins) and routes any network calls through `window.claude.complete` where appropriate. It defaults the component to a named `export default function`, avoids `localStorage`/`sessionStorage` (unavailable in the sandbox), and namespaces SVG correctly with `xmlns` plus `viewBox`.

## Usage

```
You: build me a React artifact: a sortable expense table with a bar chart by category

Claude (with artifacts-builder):
- emits application/vnd.ant.react
- import { useState } from "react"
- import { BarChart, Bar, XAxis, YAxis } from "recharts"
- export default function ExpenseDashboard() { ... }
- Tailwind classes only, no external CSS, no localStorage
```

## Tips & gotchas

- **No persistent storage.** `localStorage` throws in the sandbox. Hold state in `useState`/`useReducer` instead.
- **Imports are allowlisted, not arbitrary.** If a chart needs a library outside the bundled set, the skill substitutes `recharts` or hand-rolled SVG rather than failing silently.
- **SVG needs `viewBox` to scale.** Width/height-only SVGs render at fixed size and clip; the skill always sets `viewBox` and `preserveAspectRatio`.
- **Tailwind is utility-only.** Arbitrary `@apply` and custom config don't load; stick to inline class names.

## FAQ

**Why did my artifact show a blank panel with no error?**
Usually an unsupported import or a `localStorage` access throwing on mount. The skill removes both before emitting.

**Can it fetch data from an API?**
Inside an artifact, only `window.claude.complete` is reliably available; cross-origin `fetch` is blocked by the sandbox. The skill designs around that or uses inlined sample data.

**Does it do TypeScript?**
Yes — React artifacts accept TSX, and the skill emits typed props and state when you ask for them.