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
Decision gist · record as of 2026-07-21
Generative UI provides the design system and templates for Claude to render interactive HTML/SVG widgets inline in conversations. 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.
Use it when
- Generative UI supports building charts, dashboards, flowcharts, diagrams, data visualizations, interactive explainers, comparison grids.
- Generative UI includes Chart.js patterns and component templates to build dashboards.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
himself65/finance-skills/generative-ui · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create interactive HTML/SVG widgets for data visualization and visual content”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Concept Diagrams produces production-quality SVG visuals with a unified flat, minimal design system—ideal for physics setups, anatomy, floor plans, and process flows. Output renders as a single self-contained HTML file with automatic light and dark mode support in any modern browser, requiring no server or dependencies.
Anthropic Style Diagram generates semantic SVGs following Anthropic's visual language and design system, then renders them to PNG. The skill handles architecture, flow, and structural diagrams—automatically managing colors, themes, viewBox cropping, and style baking. Author the geometry and meaning; the rendering pipeline owns the design.
Visualize transforms your concepts into polished, self-contained HTML visualizations in one go. Generate slide decks, dashboards, infographics, flowcharts, timelines, and other visual formats—each as a standalone file ready to open anywhere. Perfect for presenting information in ways that help audiences grasp it faster.
Svg Diagram creates polished structural diagrams—flowcharts, architecture charts, sequence diagrams, hierarchies, and more—by outputting HTML blocks containing SVG. The skill renders output directly in a sandboxed iframe, offering more refined aesthetics and flexible layout control than comparable tools.
Generate fully functional HTML dashboards embedded with Chart.js visualizations, interactive filters, and KPI metrics. The skill produces self-contained files with line charts, bar charts, data tables, and responsive layouts—no external dependencies required beyond Chart.js CDN links.
build-dashboard generates a single HTML file containing an interactive dashboard with embedded data, responsive layout, and real-time filtering. The dashboard includes KPI cards, Chart.js visualizations, sortable data tables, and filter controls—all functioning offline without server dependencies. Perfect for executive summaries, operational monitoring, or shareable reports.
More skills Blueprinter (unlicensed)