generative-ui
Generative UI equips Claude with the complete Anthropic design system for the `show_widget` tool, enabling inline rendering of interactive HTML/SVG widgets in claude.ai. Use it to build charts, dashboards, diagrams, flowcharts, and visual explainers without setup calls. The skill includes routing rules, component templates, CSS variables for light/dark mode, and Chart.js patterns to produce polished visuals that blend seamlessly with conversation.
Generative UI provides the design system and templates for Claude to render interactive HTML/SVG widgets inline in conversations.
AI-generated summary based on this skill's SKILL.md
Install
himself65/finance-skills/generative-ui · repository language: JavaScript
git clone https://github.com/himself65/finance-skills
cp -r finance-skills/plugins/ui-tools/skills/generative-ui ~/.claude/skills/generative-uiFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to create interactive widgets in Claude?
Generative UI provides the complete Anthropic design system for Claude's `show_widget` tool. To create interactive widgets, use HTML/SVG with the design system's CSS variables and component templates. Call `show_widget` with your markup to render charts, dashboards, diagrams, and visual explainers directly in claude.ai without any setup calls. The skill includes routing rules and best practices for seamless integration.
What can I build with generative-ui widgets?
Generative UI supports building charts, dashboards, flowcharts, diagrams, data visualizations, interactive explainers, comparison grids, mockups, and prototypes. You can create live-updating dashboards, financial data visualizations, architecture diagrams, and interactive data explorers. All widgets render inline in chat using HTML/SVG with Chart.js patterns and the design system's light/dark mode CSS variables.
Show me a visual dashboard with charts?
Generative UI includes Chart.js patterns and component templates to build dashboards. Use the `show_widget` tool with HTML containing chart containers styled with the Anthropic design system's CSS variables. The skill provides routing rules and templates for common dashboard layouts, ensuring your charts blend seamlessly with Claude's interface and support both light and dark modes automatically.
What design guidelines does generative-ui follow?
Generative UI implements Anthropic's complete design system for Claude, including CSS variables for light/dark mode theming, component templates, and routing rules. The guidelines ensure visual content integrates seamlessly with conversation. Follow the provided templates and CSS patterns to maintain consistency, accessibility, and a polished appearance across all interactive widgets and visual explainers.
How do I use the show_widget tool in generative-ui?
Generative UI equips you with the `show_widget` tool documentation and best practices. Pass your HTML/SVG markup directly to `show_widget` to render it inline in claude.ai. Use the skill's component templates, CSS variables, and Chart.js patterns as starting points. No setup calls are needed—the design system handles routing and styling automatically for charts, diagrams, and interactive content.
Can I build interactive explainers with live calculations?
Yes, generative-ui supports interactive explainers with live calculations and controls. Use HTML/SVG with JavaScript to implement sliders, inputs, and dynamic updates. The skill's templates and design system guidelines help you create polished explainers that respond to user interaction. Combine Chart.js for visualizations and the Anthropic design system's CSS variables for consistent styling across light and dark modes.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
plugins/ui-tools/skills/generative-ui/README.md
plugins/ui-tools/skills/generative-ui/SKILL.md
plugins/ui-tools/skills/generative-ui/references/chart_js.md
plugins/ui-tools/skills/generative-ui/references/design_system.md
plugins/ui-tools/skills/generative-ui/references/svg_and_diagrams.md