Download plugins/ui-tools/skills/generative-ui/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does generative-ui live?
The publisher keeps it at https://github.com/himself65/finance-skills.
Which agents can use generative-ui?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.
>
name: generative-ui
description: >
Design system and templates for Claude's built-in generative UI — the show_widget
tool that renders interactive HTML/SVG widgets inline in claude.ai conversations.
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".
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 setup call.
read_me
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
No stock "AI design" defaults: skip cream or off-white panels, italic accent words in headings, numbered "01 / 02 / 03" section labels, monospace labels outside code, and pill-shaped buttons — they read as generic and clash with the host UI
Text goes in your response, visuals go in the tool — write explanatory text, descriptions, and summaries as normal response text outside the tool call; the widget holds 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.
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:
Read the relevant reference file when you need specific design tokens, SVG coordinate math, or Chart.js configuration details.
How do I install generative-ui?
Download plugins/ui-tools/skills/generative-ui/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does generative-ui live?
The publisher keeps it at https://github.com/himself65/finance-skills.
Which agents can use generative-ui?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.