| 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
- First, briefly explain your approach and key design decisions in the chat (2–5 sentences). Keep this OUTSIDE the code block.
- Then output the COMPLETE artifact inside exactly ONE markdown code block:
- React/TypeScript component → use
tsx` (or jsx)
- Standalone web page → use ````html`
- 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.
