generative-ui

This skill is a design system and set of guidelines for Claude's built-in generative UI, specifically the show_widget tool that renders interactive HTML/SVG fragments inline in claude.ai conversations. It packages Anthropic's "Imagine" visual-creation design rules so that an assistant can produce high-quality widgets directly, without first making a read_me setup call. The problem it solves is consistency: it encodes the routing, structure, typography, and styling conventions that make inline widgets feel native to the host interface.

It teaches the assistant to route on the user's verb (how-does-X-work becomes an illustrative SVG diagram, compare-options becomes an HTML grid, show-a-chart becomes a Chart.js widget, and so on) and to build widgets in a strict style-then-content-then-script order for token-by-token streaming. The design rules are opinionated and detailed: flat surfaces with no gradients or shadows, transparent outer containers, two font weights only, sentence case, minimum font sizes, rounded-number formatting, and a CSP-enforced CDN allowlist (cdnjs, jsdelivr, unpkg, esm.sh). Reference files provide deep guidance for SVG setup and diagram patterns (viewBox conventions, safety checklists, prebuilt classes, arrow markers, flowchart and structural-diagram construction), Chart.js usage, and the CSS-variable-based design system.

The target users are people using claude.ai who ask to visualize data, build dashboards, draw diagrams or flowcharts, create mockups, or produce interactive explainers, including financial-data displays and comparison grids. It is a guidance/reference skill; it produces rendered visual output and does not perform system operations.