generative-ui
Design system and guidelines for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. This skill provides the complete Anthropic "Imagine" design system so Claude produces high-quality widgets without needing to call read_me first. Use this skill whenever the user asks to visualize data, create an interactive chart, build a dashboard, render a diagram, draw a flowchart, show a mockup, create an interactive explainer, or produce any visual content beyond plain text or markdown. Triggers include: "show me", "visualize", "draw", "chart", "dashboard", "diagram", "flowchart", "widget", "interactive", "mockup", "illustrate", "explain how X works" (with visual), or any request for visual/interactive output. Also triggers when the user wants to display financial data visually, create comparison grids, or build tools with sliders, toggles, or live-updating displays.
Author
Category
Finance AnalysisInstall
Download and extract to your skills directory
Copy command and send to OpenClaw for auto-install:
generative-ui - Claude Interactive Visualization Component Skills
Skill Overview
generative-ui provides a complete design-system guide for Claude’s built-in
show_widget tool, for directly rendering interactive HTML/SVG widgets in claude.ai conversations.Use Cases
1. Data Visualization and Chart Display
When you need to present financial data, statistical metrics, or trend analysis within a conversation, you can generate dynamic line charts, bar charts, or comparison tables. Users can adjust parameters in real time using controls like sliders and buttons, and the charts update instantly.
2. System Architecture and Process Explanations
To explain how complex systems work, you can generate interactive SVG flowcharts or architecture diagrams. Each node is clickable, triggering further explanations or follow-up questions, allowing users to explore at their own pace.
3. Prototypes and Interactive Demos
Product managers or designers can quickly generate interactive prototypes with sliders and toggles to demonstrate concepts or collect feedback. No code is needed—an actionable interface can be created directly within the conversation.
Core Features
1. show_widget Tool Integration
Directly call Claude’s built-in
show_widget tool by passing an HTML or SVG code snippet, and it will be rendered as an interactive widget within the conversation. Supports two formats: HTML (for charts, forms) and SVG (for flowcharts, diagrams).2. Anthropic Imagine Design System
Provides a complete set of Anthropic “Imagine” design rules, including CSS variables, color schemes, component templates, and best practices. Ensures the generated widgets match the claude.ai interface style and automatically adapt to dark mode.
3. Chart.js and SVG Template Library
Includes built-in Chart.js chart templates and SVG flowchart templates, featuring responsive layout, event handling, and the
sendPrompt() interaction function. Templates can be applied as-is or customized, greatly reducing development cost.FAQ
What is the show_widget tool?
show_widget is Claude’s built-in tool on the claude.ai platform, allowing AI to directly render HTML/SVG content in the conversation. Users can interact with these widgets (e.g., drag sliders, click buttons) to get instant visual feedback.How do I create interactive charts?
Use the Chart.js CDN library together with HTML controls. First, define styles using
<style>, then create an HTML interface that includes sliders or buttons. Finally, load Chart.js via <script> and bind event listeners. The template includes complete example code.What are the limitations of generative UI?
position: fixed, gradients, or shadowsdisplay: none during streaming loads