--- name: himself65/generative-ui source: https://app.decimal.ai/s/himself65-generative-ui@1/SKILL.md source_sha256: 308e5903fcf1 --- # 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. --- ## 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) ``` \n
...
\n" } ``` | Parameter | Type | Required | Description | |---|---|---|---| | `title` | string | Yes | Snake_case identifier for the widget | | `widget_code` | string | Yes | HTML or SVG code. For SVG: start with ``. For HTML: content fragment | For SVG output: start `widget_code` with `
Label
—
50
``` **Chart.js rules:** - Canvas cannot resolve CSS variables — use hardcoded hex - Set height ONLY on the wrapper div, never on canvas itself - Always `responsive: true, maintainAspectRatio: false` - Always disable default legend, build custom HTML legends - Number formatting: `-$5M` not `$-5M` (negative sign before currency symbol) - Use `onload="initChart()"` on CDN script tag + `if (window.Chart) initChart();` as fallback --- ## Step 5: SVG Diagram Template For flowcharts and diagrams, use SVG with pre-built classes: ```svg Step one Step two Processes the input ``` **SVG rules:** - ViewBox always 680px wide (`viewBox="0 0 680 H"`). Set H to fit content + 40px padding - Safe area: x=40 to x=640, y=40 to y=(H-40) - Pre-built classes: `t` (14px), `ts` (12px secondary), `th` (14px medium 500), `box`, `node`, `arr`, `c-{color}` - Every `` element must carry a class (`t`, `ts`, or `th`) - Use `dominant-baseline="central"` for vertical text centering in boxes - Connector paths need `fill="none"` (SVG defaults to `fill: black`) - Stroke width: 0.5px for borders and edges - Make all nodes clickable: `onclick="sendPrompt('...')"` --- ## Step 6: Interactive Explainer Template For interactive explainers (sliders, live calculations, inline SVG): ```html
20
$1,000 → $3,870
``` Use `sendPrompt()` to let users ask follow-ups: `sendPrompt('What if I increase the rate to 10%?')` --- ## Step 7: Respond to the User After rendering the widget, briefly explain: 1. What the widget shows 2. How to interact with it (which controls do what) 3. One key insight from the data Keep it concise — the widget speaks for itself. --- ## Reference Files - `references/design_system.md` — Complete color palette (9 ramps × 7 stops), CSS variables, UI component patterns, metric cards, layout rules - `references/svg_and_diagrams.md` — SVG viewBox setup, font calibration, pre-built classes, flowchart/structural/illustrative diagram patterns with examples - `references/chart_js.md` — Chart.js configuration, script load ordering, canvas sizing, legend patterns, dashboard layout Read the relevant reference file when you need specific design tokens, SVG coordinate math, or Chart.js configuration details.