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

curl -fsSL --create-dirs -o ~/.claude/skills/artifacts-builder/SKILL.md https://claudeskil.com/skills/artifacts-builder/SKILL.md

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.