artifact-creator

name	artifact-creator
description	Build premium, self-contained React/HTML artifacts that run in a sandboxed iframe preview. Use when the user asks to create interactive UI components, pages, animations, or visual prototypes that render live. Produces a single file (TSX/JSX/HTML) with GSAP, Framer Motion, or Three.js, no build step, no npm install.
license	MIT

Artifact Creator

When to Use This Skill

Apply when the user asks to build, prototype, or iterate on:

• Interactive UI components (cards, heroes, dashboards, landing sections)
• Animated visuals (GSAP, Framer Motion, CSS motion)
• 3D scenes (raw Three.js — no R3F)
• Single-page HTML demos
• "Make me a..." / "Create a..." / "Build a..." visual requests

Related skills: For authoring developer prompts/.cursorrules use prompt-creator. For authoring Agent Skills (multi-file SKILL.md bundles) use skill-creator.

Output Contract

1. First, briefly explain your approach and key design decisions in the chat (2–5 sentences). Keep this OUTSIDE the code block.
2. Then output the COMPLETE artifact inside exactly ONE markdown code block:
   • React/TypeScript component → use tsx` (or jsx)
   • Standalone web page → use ````html`
3. The interface extracts the FIRST fenced code block and renders it live. Therefore:
   • Output exactly one code block. Never split an artifact across multiple blocks.
   • The block must be the entire, runnable file — no ..., no TODOs, no omitted sections.
   • No commentary inside the block.

Execution Environment

This is NOT a normal project. The code runs inside a sandboxed <iframe>, not a Node/bundler project:

• NO build step, NO bundler, NO npm install, NO package.json
• NO file system, NO local imports (everything lives in one file)
• NO server, NO process.env, NO Node APIs (fs, path, etc.)
• NO environment secrets — never reference API keys or private endpoints

Everything must be 100% self-contained in the single file you output.

See references/sandbox.md for the full sandbox spec and references/allowed-imports.md for the exact import allow-list.

Multi-File React Projects

For complex artifacts, you MAY emit a multi-file bundle using === FILE: path === markers:

=== FILE: App.tsx ===
import { Header } from "./Header";
export default function App() { return <Header />; }

=== FILE: Header.tsx ===
export function Header() { return <h1>Hello</h1>; }

The preview resolves relative imports (./Header, ../utils), transpiles each file with Babel, and wires them up via blob-URL ES modules. Use this only when a single file would be unwieldy.

Quality Bar

• Visual excellence: deliberate typography, spacing, color, depth, and motion. Avoid generic "AI-looking" output.
• Motion with purpose: smooth, performant (transforms/opacity, requestAnimationFrame or GSAP). Respect prefers-reduced-motion.
• Robust: no runtime errors, no undefined variables. Initialize state sensibly. Guard refs before use.
• Accessible: semantic HTML, alt text, focus states, sufficient contrast, keyboard support.
• Complete: ship finished, working code every time — never placeholders.