/generative-ui

name: generative-ui
description: >
  Design system and templates for interactive HTML/SVG visuals in Claude and Codex,
  using an available inline renderer or a standalone HTML file.
  Use this skill whenever the user wants visual or interactive output rather than
  plain text or markdown: charts and dashboards, diagrams, flowcharts and
  architecture drawings, mockups, comparison grids, illustrations, interactive
  explainers ("explain how X works" with a visual), or tools with sliders, toggles,
  and live-updating displays — including financial data shown visually and requests
  phrased as "show me", "visualize", "draw", or "chart this".

Generative UI Skill

This skill contains the complete design system for Claude's built-in `show_widget` tool — the generative UI feature that renders interactive HTML/SVG widgets inline in claude.ai conversations. The guidelines below are the actual Anthropic "Imagine — Visual Creation Suite" design rules, extracted so you can produce high-quality widgets directly without needing the `read_me` setup call.

**How it works**: On claude.ai, Claude has access to the `show_widget` tool which renders raw HTML/SVG fragments inline in the conversation. This skill provides the design system, templates, and patterns to use it well.

**Codex and other hosts**: First check the available tools. Use the host's documented visualization interface when provided; otherwise save a complete HTML document in the workspace and return a clickable file link. For standalone output, the fragment-only rule below does not apply: include a document wrapper and viewport metadata, define the CSS variables and SVG classes used by the templates (including dark-mode colors), and load chart dependencies explicitly. The host-specific CDN allowlist and injected styles below describe Claude's renderer; they are not Codex capabilities. Remove chat follow-up buttons and `sendPrompt` handlers when that bridge is unavailable; keep local sliders and calculations functional. Verify the saved output in a browser when available.

---

Step 1: Pick the Right Visual Type

Route on the **verb**, not the noun. Same subject, different visual depending on what was asked:

| User says | Type | Format | |---|---|---| | "how does X work" | Illustrative diagram | SVG | | "X architecture" | Structural diagram | SVG | | "what are the steps" | Flowchart | SVG | | "explain compound interest" | Interactive explainer | HTML | | "compare these options" | Comparison grid | HTML | | "show revenue chart" | Chart.js chart | HTML | | "create a contact card" | Data record | HTML | | "draw a sunset" | Art/illustration | SVG |

---

Step 2: Build the Widget

Structure (strict order)

<style>  →  HTML content  →  <script>

Output streams token-by-token. Styles must exist before the elements they target, and scripts must run after the DOM is ready.

Philosophy

• **Seamless**: Users shouldn't notice where the host UI ends and your widget begins
• **Flat**: No gradients, mesh backgrounds, noise textures, or decorative effects. Clean flat surfaces
• **Compact**: Show the essential inline. Explain the rest in text
• **No stock "AI design" defaults**: skip cream or off-white panels, italic accent words in headings, numbered "01 / 02 / 03" section labels, monospace labels outside code, and pill-shaped buttons — they read as generic and clash with the host UI
• **Text goes in your response, visuals go in the tool** — write explanatory text, descriptions, and summaries as normal response text outside the tool call; the widget holds only the visual element

Core Rules

• No `<!-- comments -->` or `/* comments */` (waste tokens, break streaming)
• No font-size below 11px
• No emoji — use CSS shapes or SVG paths
• No gradients, drop shadows, blur, glow, or neon effects
• No dark/colored backgrounds on outer containers (transparent only — host provides the bg)
• **Typography**: two weights only: 400 regular, 500 medium. Never use 600 or 700. Headings: h1=22px, h2=18px, h3=16px — all font-weight 500. Body text=16px, weight 400, line-height 1.7
• **Sentence case** always. Never Title Case, never ALL CAPS
• No mid-sentence bolding — entity names go in `code style` not **bold**
• No `<!DOCTYPE>`, `<html>`, `<head>`, or `<body>` — just content fragments
• No `position: fixed` — use normal-flow layouts
• No tabs, carousels, or `display: none` sections during streaming
• No nested scrolling — auto-fit height
• Corners: `border-radius: var(--border-radius-lg)` for cards, `var(--border-radius-md)` for elements
• No rounded corners on single-sided borders (border-left, border-top)
• **Round every displayed number** — use `Math.round()`, `.toFixed(n)`, or `Intl.NumberFormat`

CDN Allowlist (CSP-enforced)

External resources may ONLY load from:

• `cdnjs.cloudflare.com`
• `cdn.jsdelivr.net`
• `unpkg.com`
• `esm.sh`

All other origins are blocked — the request silently fails.

CSS Variables

**Backgrounds**: `--color-background-primary` (white), `-secondary` (surfaces), `-tertiary` (page bg), `-info`, `-danger`, `-success`, `-warning` **Text**: `--color-text-primary` (black), `-secondary` (muted), `-tertiary` (hints), `-info`, `-danger`, `-success`, `-warning` **Borders**: `--color-border-tertiary` (0.15α, default), `-secondary` (0.3α, hover), `-primary` (0.4α), semantic `-info/-danger/-success/-warning` **Typography**: `--font-sans`, `--font-serif`, `--font-mono` **Layout**: `--border-radius-md` (8px), `--border-radius-lg` (12px), `--border-radius-xl` (16px)

All auto-adapt to light/dark mode.

**Dark mode is mandatory** — every color must work in both modes:

• In HTML: always use CSS variables for text. Never hardcode colors like `color: #333`
• In SVG: use pre-built color classes (`c-blue`, `c-teal`, etc.) — they handle light/dark automatically
• Mental test: if the background were near-black, would every text element still be readable?

`sendPrompt(text)`

A global function that sends a message t