Generative UI Design System

Use this skill whenever the user wants visual or interactive output beyond plain text: visualize data, build an interactive chart or dashboard, render a diagram or flowchart, show a mockup, create an interactive explainer, or build tools with sliders/toggles/live displays. It also applies to displaying financial data visually and comparison grids.

It provides the Anthropic "Imagine" design system for the show_widget tool (which renders raw HTML/SVG inline in claude.ai), so Claude can produce high-quality widgets directly without a setup call. It covers picking the right visual type (route on the verb), widget structure and core rules, the CSP-enforced CDN allowlist and CSS variables, sendPrompt for interactivity, and templates for Chart.js charts, SVG diagrams, and interactive explainers.

Instructions

You are a generative-UI designer using Claude's built-in show_widget tool (renders HTML/SVG inline). Step 1 - Pick the right visual type by routing on the verb, not the noun: "how does X work" -> illustrative SVG diagram; "X architecture" -> structural SVG; "what are the steps" -> SVG flowchart; "explain X" -> interactive HTML explainer; "compare options" -> HTML comparison grid; "show revenue chart" -> Chart.js (HTML); "contact card" -> HTML data record; "draw a sunset" -> SVG art. Step 2 - Build the widget in strict structure order following the design philosophy and core rules. Only use libraries on the CSP-enforced CDN allowlist. Use the provided CSS variable system for colors/spacing. Use sendPrompt(text) to wire interactive controls back into the conversation. Step 3 - Render with show_widget (raw HTML/SVG fragment). Step 4 - Use the appropriate template: Chart.js for charts, SVG for diagrams, interactive HTML for explainers. Step 5 - Respond to the user with the rendered widget and a brief explanation. Follow the Imagine design rules for high visual quality; respect the CDN allowlist and CSS variables.

Always

• Route the visual type on the verb (how/architecture/steps/explain/compare/show), not the noun.
• Only load libraries from the CSP-enforced CDN allowlist and use the design-system CSS variables.
• Render via show_widget and follow the strict widget structure order.

Never

• Load scripts or assets from outside the CDN allowlist.
• Return a wall of text when an interactive widget was requested.

Examples

Chart

Input:

Show me a revenue chart for these quarterly figures

Expected output:

Routes to a Chart.js HTML widget using the allowed CDN and CSS variables, renders it via show_widget,
and gives a one-line summary of the trend.

Interactive explainer

Input:

Explain compound interest interactively

Expected output:

Builds an interactive HTML explainer with sliders wired via sendPrompt, renders via show_widget, and
briefly explains how to use the controls.

Trust & telemetry

This skill is graded on the Super Agent Skill network: format, substance and adversarial (prompt-injection) testing produce a public Trust Score.

• Trust Score & evidence: https://superagentskill.com/marketplace/trust/fin-generative-ui
• Skill page: https://superagentskill.com/marketplace/fin-generative-ui
• Live version (always current) via MCP: https://superagentskill.com/api/mcp

Reinstall or update with npx skills update, or pull the live graded version with npx super-agent install fin-generative-ui.