name: generative-ui description: > Design system and guidelines for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. This skill provides the complete Anthropic "Imagine" design system so Claude produces high-quality widgets without needing to call read_me first. Use this skill whenever the user asks to visualize data, create an interactive chart, build a dashboard, render a diagram, draw a flowchart, show a mockup, create an interactive explainer, or produce any visual content beyond plain text or markdown. Triggers include: "show me", "visualize", "draw", "chart", "dashboard", "diagram", "flowchart", "widget", "interactive", "mockup", "illustrate", "explain how X works" (with visual), or any request for visual/interactive output. Also triggers when the user wants to display financial data visually, create comparison grids, or build tools with sliders, toggles, or live-updating displays.

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 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
Text goes in your response, visuals go in the tool — all explanatory text, descriptions, and summaries must be written as normal response text OUTSIDE the tool call. The tool output should contain ONLY the visual element

Core Rules

No  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 bo

generative-ui

Before / After 効果比較

description SKILL.md

Generative UI Skill

Step 1: Pick the Right Visual Type

Step 2: Build the Widget

Structure (strict order)

Philosophy

Core Rules

CDN Allowlist (CSP-enforced)

CSS Variables

forumユーザーレビュー (0)

統計データ

ユーザー評価

対応プラットフォーム

タイムライン