{"enrichment":{"faq":[{"a":"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.","q":"How to create interactive widgets in Claude?"},{"a":"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.","q":"What can I build with generative-ui widgets?"},{"a":"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.","q":"Show me a visual dashboard with charts?"},{"a":"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.","q":"What design guidelines does generative-ui follow?"},{"a":"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\u2014the design system handles routing and styling automatically for charts, diagrams, and interactive content.","q":"How do I use the show_widget tool in generative-ui?"},{"a":"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.","q":"Can I build interactive explainers with live calculations?"}],"shadow_tags":["widget-rendering","inline-visualization","design-tokens","interactive-charts","svg-diagrams","html-templates","data-dashboards","visual-explainers","ui-components","responsive-layouts"],"summary_rewrite":"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."},"files":[{"bytes":12549,"path":"plugins/ui-tools/skills/generative-ui/SKILL.md","sha256":"c4b34509222daef76a736341e68fcb4731dfa3887e374227855d85454ee05cae","url":"https://skillfed.io/files/himself65/finance-skills/generative-ui/5909c2cb/SKILL.md"}],"id":"himself65/finance-skills/generative-ui","links":{"html":"https://skillfed.io/himself65/finance-skills/generative-ui","md":"https://skillfed.io/himself65/finance-skills/generative-ui.md","repo":"https://github.com/himself65/finance-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":354,"language":"JavaScript","last_updated":"2026-07-21","license":"MIT","name":"generative-ui","publisher":"himself65","stars":3075},"relations":{"similar":[{"id":"matsonj/mviz/mviz"},{"id":"NousResearch/hermes-agent/concept-diagrams"},{"id":"PM-Shawn/Abu-Cowork/svg-diagram"},{"id":"rookie-ricardo/erduo-skills/anthropic-style-diagram"},{"id":"minicoohei/ai-agent-camp/interactive-dashboard-builder"},{"id":"PM-Shawn/Abu-Cowork/html-widget"},{"id":"steelan9199/wechat-publisher/svg-diagram-yashu"},{"id":"careerhackeralex/visualize/visualize"},{"id":"openyak/openyak/build-dashboard"},{"id":"anthropics/knowledge-work-plugins/build-dashboard"}]},"slug":{"owner":"himself65","repo":"finance-skills","skill":"generative-ui"},"version":"5909c2cb"}