fin-generative-ui

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