Individual skill
generative-ui
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".
plugins/ui-tools/skills/generative-ui/SKILL.md
Source commit a0850786e72aa23b92862f9f1635b0de506fe206
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 9, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 3,527
- Repository last updated
- Nov 4, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- claude-code Repository topic
- skills Repository topic
- trading Repository topic
- agent-skills Repository topic
- design Derived category
- engineering Derived category
- finance Derived category
- data Derived category
- design-interface Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
README.mddoc · 2,250 bytesSKILL.mdcore · 13,272 bytesSKILL.mdcore · 13,272 bytesSKILL.mdcore · 13,272 bytesreferences/chart_js.mddoc · 5,276 bytesreferences/design_system.mddoc · 6,709 bytesreferences/svg_and_diagrams.mddoc · 11,143 bytes
Read excerpt
# 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:
