skills.rest
himself65
himself65COMMUNITY
Explore all skills by this author →
Website𝕏@himself65GitHub

generative-ui

Generates interactive HTML and SVG widgets for Claude's show_widget tool on claude.ai.

3.3k|382|Updated Mar 13, 2026
Search Tags:#design system#chart.js#claude.ai#generative ui#interactive widgets#svg diagrams#show_widget
One-click install
npx skills add https://github.com/himself65/finance-skills --skill generative-ui-himself65
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generative-ui
Source: https://github.com/himself65/finance-skills/tree/main/plugins/ui-tools/skills/generative-ui
Command: npx skills add https://github.com/himself65/finance-skills --skill generative-ui-himself65

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Producing high-quality interactive widgets with Claude's built-in show_widget tool requires knowing Anthropic's Imagine design system, CSP restrictions, and streaming-safe markup rules, which are otherwise only available through a read_me setup call. ## Core Features & Use Cases - Complete design system: Provides the full color palette, CSS variables, typography rules, and component patterns for widgets that blend with the claude.ai host UI in both light and dark mode. - Templates for every visual type: Includes ready-to-use patterns for Chart.js charts, SVG flowcharts and structural diagrams, dashboards with metric cards, comparison grids, and interactive explainers with sliders and live calculations. - Use Case: A user asks to visualize quarterly revenue with a slider to adjust growth assumptions. The skill routes the request to a Chart.js template with an interactive control, applies the correct CSS variables and script load ordering, and renders a dark-mode-safe widget inline in the conversation. ## Quick Start Ask Claude on claude.ai to visualize your data as an interactive chart or diagram, and this skill will render it as a widget using the show_widget tool.

Frequently Asked Questions about generative-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create interactive charts in Claude.ai conversations?▼

Use the show_widget tool with a Chart.js configuration loaded from cdnjs.cloudflare.com. Set height only on the wrapper div, use responsive: true with maintainAspectRatio: false, and initialize via the onload callback pattern to handle script load ordering during streaming.

What is the show_widget tool in Claude?▼

show_widget is a built-in claude.ai tool that renders raw HTML or SVG fragments inline in conversations. It accepts a snake_case title and widget_code parameter, auto-detecting SVG when the code starts with an svg tag.

Which CDN domains are allowed in Claude generative UI widgets?▼

Only cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, and esm.sh are permitted by the content security policy. Requests to any other origin silently fail, so all external scripts must load from these four domains.

How do I make SVG diagrams support dark mode in Claude widgets?▼

Use the pre-built color classes like c-blue or c-teal applied to groups or shapes, which automatically adjust fills, strokes, and child text for light and dark modes. In HTML, always use CSS variables such as --color-text-primary instead of hardcoded hex colors.

Why does my Chart.js chart not render in a Claude widget?▼

Charts fail when the CDN script has not loaded before the inline script runs, especially during streaming. Always define initialization in a named function, call it via onload on the CDN script tag, and add an if (window.Chart) fallback check.

When should I use mermaid.js instead of SVG for diagrams?▼

Use mermaid.js erDiagram syntax for database schemas and ERDs rather than hand-drawn SVG or Chart.js. Load it from esm.sh as an ES module and configure themeVariables based on the user's prefers-color-scheme setting.

Related Skills

Explore More Design & Creative Skills→
SennTseSennTse

verified-data

Fetch real-time market data for US, HK, and A-share tickers via yfinance.

Community
Intermediate
lazygopherslazygophers
4

office-xlsx-skills

Read, write, analyze, and convert Excel, CSV, and JSON files.

Official
Advanced
GoldenZeroGoldenZero
1

population-trend-narratives

Generate plain-language narratives from population health trend data.

Community
Advanced
HouseGarofaloHouseGarofalo
3

streamlit-dashboards

Create interactive Python dashboards with Streamlit, Pandas, and Plotly.

Official
Intermediate