/generative-ui
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
$ npx -y skills add himself65/finance-skills --skill generative-ui --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/generative-ui
Context preview
The summary Claude sees to decide when to auto-load this skill.
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
SKILL.md
generative-ui.SKILL.mdname: 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 `<!-- 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 to chat as if the user typed it. Use it when the user's next step benefits from Claude thinking. Handle filtering, sorting, toggling, and calculations in JS instead.
---
Step 3: Render with `show_widget`
The `show_widget` tool is built into claude.ai — no activation needed. Pass your widget code directly:
{
"title": "snake_case_widget_name",
"widget_code": "<style>...</style>\n<div>...</div>\n<script>...</script>"
}| Parameter | Type | Required | Description | |---|---|---|---| | `title` | string | Yes | Snake_case identifier for the widget | | `widget_code` | string | Yes | HTML or SVG code. For SVG: start w
Read more
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 `<!-- 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 to chat as if the user typed it. Use it when the user's next step benefits from Claude thinking. Handle filtering, sorting, toggling, and calculations in JS instead.
---
Step 3: Render with `show_widget`
The `show_widget` tool is built into claude.ai — no activation needed. Pass your widget code directly:
{
"title": "snake_case_widget_name",
"widget_code": "<style>...</style>\n<div>...</div>\n<script>...</script>"
}| Parameter | Type | Required | Description | |---|---|---|---| | `title` | string | Yes | Snake_case identifier for the widget | | `widget_code` | string | Yes | HTML or SVG code. For SVG: start w
This project is for educational and informational purposes only. Nothing here constitutes financial advice. Always do your own research and consult a qualified financial advisor before making investment decisions.
Repo: himself65/finance-skills
Other skills on finance-skills.
- /finance-sentiment
Fetch structured stock sentiment across Reddit, X.com, news, and Polymarket using the Adanos Finance API. Use this skill whenever the user asks how much people are talking about a stock, how hot a ticker is on social platforms, how many Polymarket bets exist for a company,
Open skill - /fintel-data
Query Fintel (fintel.io) institutional market intelligence via the REST API at https://api.fintel.io/v1 with FINTEL_API_KEY (X-API-KEY header), or the official MCP server at https://mcp.fintel.io/mcp. Read-only data: short interest, borrow rate/fee and shares available to
Open skill - /funda-data
Query Funda AI financial data via two surfaces: the MCP server at https://funda.ai/api/mcp for analyst-grade research synthesis (DCF, comps, earnings previews/recaps, sector deep-dives, SEC filings, transcripts, supply-chain mapping, ownership flow, macro framing) via the
Open skill - /hormuz-strait
Check the current status of the Strait of Hormuz — shipping transit data, oil price impact, stranded vessels, insurance risk levels, diplomatic developments, and global trade impact. Use this skill whenever the user asks about the Strait of Hormuz, Hormuz chokepoint, Persian
Open skill - /hyperliquid-reader
Read Hyperliquid (app.hyperliquid.xyz) perp + spot market data via opencli (read-only, public info API). Use whenever the user wants Hyperliquid perpetual or spot markets, mark/oracle/mid prices, 24h change, funding rates (hourly or annualized APR), open interest, volume, the L2
Open skill - /tradingview-reader
Read TradingView desktop app for market data, news, alerts, watchlists, and screener results using opencli (read-only). Use this skill whenever the user wants quotes, options chains, options expiries, screener results across stocks/crypto/forex/futures/bonds,
Open skill