# Generative UI

Design system and templates for interactive HTML/SVG visuals in Claude and Codex, using...

- Repository: https://github.com/himself65/finance-skills (3487 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add himself65/finance-skills --skill generative-ui -g -a claude-code -y`
Codex: `npx skills add himself65/finance-skills --skill generative-ui -g -a codex -y`
Cursor: `npx skills add himself65/finance-skills --skill generative-ui -g -a cursor -y`
Gemini CLI: `npx skills add himself65/finance-skills --skill generative-ui -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add himself65/finance-skills`

## 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".

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 |

The rest: https://github.com/himself65/finance-skills/blob/HEAD/plugins/ui-tools/skills/generative-ui/SKILL.md