generative-ui

# 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) ``` <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 sh...