domains / families / design / generative-ui

generative-ui

separate

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".

When to use

• charts and dashboards
• diagrams, flowcharts and architecture drawings
• mockups
• comparison grids
• illustrations
• interactive explainers
• tools with sliders, toggles, and live-updating displays
• financial data shown visually

When not to use

• plain text or markdown

Skill page

Source