Design system and templates for Claude's built-in generative UI — the show_widget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. Use this skill whenever the user wants visual or interactive output rather than plain text or markdown: charts and dashboards, diagrams, flowcharts and architecture drawings, mockups, comparison grids, illustrations, interactive explainers ("explain how X works" with a visual), or tools with sliders, toggles, and live-updating displays — including financial data shown visually and requests phrased as "show me", "visualize", "draw", or "chart this".
68
81%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Low
Low-risk findings worth noting
The skill fetches instructions or code from an external URL at runtime, and the fetched content directly controls the agent’s prompts or executes code. This dynamic dependency allows the external source to modify the agent’s behavior without any changes to the skill itself.
The skill references unauthenticated external CDN resources (cdnjs, jsdelivr, unpkg, esm.sh) to load Chart.js and Mermaid.js scripts at runtime, establishing weak/unknown external operational dependencies.
7fe9185
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.