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 inline in claude.ai conversations. The guidelines below are the actual Anthropic "Imagine — Visual Creation Suite" design rules, extracted so you can produce high-quality widgets directly without needing the read_me setup call.
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versiongenerative-uiExecute the skills CLI command in your project's root directory to begin installation:
Fetches generative-ui from himself65/finance-skills and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate generative-ui. Access via /generative-ui in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
3
total installs
3
this week
880
GitHub stars
0
upvotes
Run in your terminal
3
installs
3
this week
880
stars
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 inline in claude.ai conversations. The guidelines below are the actual Anthropic "Imagine — Visual Creation Suite" design rules, extracted so you can produce high-quality widgets directly without needing the read_me setup call.
How it works: On claude.ai, Claude has access to the show_widget tool which renders raw HTML/SVG fragments inline in the conversation. This skill provides the design system, templates, and patterns to use it well.
Route on the verb, not the noun. Same subject, different visual depending on what was asked:
| User says | Type | Format |
|---|---|---|
| "how does X work" | Illustrative diagram | SVG |
| "X architecture" | Structural diagram | SVG |
| "what are the steps" | Flowchart | SVG |
| "explain compound interest" | Interactive explainer | HTML |
| "compare these options" | Comparison grid | HTML |
| "show revenue chart" | Chart.js chart | HTML |
| "create a contact card" | Data record | HTML |
| "draw a sunset" | Art/illustration | SVG |
<style> → HTML content → <script>
Output streams token-by-token. Styles must exist before the elements they target, and scripts must run after the DOM is ready.
<!-- comments --> or /* comments */ (waste tokens, break streaming)code style not bold<!DOCTYPE>, <html>, <head>, or <body> — just content fragmentsposition: fixed — use normal-flow layoutsdisplay: none sections during streamingborder-radius: var(--border-radius-lg) for cards, var(--border-radius-md) for elementsMath.round(), .toFixed(n), or Intl.NumberFormatExternal resources may ONLY load from:
cdnjs.cloudflare.comcdn.jsdelivr.netunpkg.comesm.shAll other origins are blocked — the request silently fails.
Backgrounds: --color-background-primary (white), -secondary (surfaces), -tertiary (page bg), -info, -danger, -success, -warning
Text: --color-text-primary (black), -secondary (muted), -tertiary (hints), -info, -danger, -success, -warning
Borders: --color-border-tertiary (0.15α, default), -secondary (0.3α, hover), -primary (0.4α), semantic -info/-danger/-success/-warning
Typography: --font-sans, --font-serif, --font-mono
Layout: --border-radius-md (8px), --border-radius-lg (12px), --border-radius-xl (16px)
All auto-adapt to light/dark mode.
Dark mode is mandatory — every color must work in both modes:
color: #333c-blue, c-teal, etc.) — they handle light/dark automaticallysendPrompt(text)A global function that sends a message to chat as if the user typed it. Use it when the user's next step benefits from Claude thinking. Handle filtering, sorting, toggling, and calculations in JS instead.
show_widgetThe show_widget tool is built into claude.ai — no activation needed. Pass your widget code directly:
{
"title": "snake_case_widget_name",
"widget_code": "<style>...</style>\n<div>...</div>\n<script>...</script>"
}
| Parameter | Type | Required | Description |
|---|---|---|---|
title |
string | Yes | Snake_case identifier for the widget |
widget_code |
string | Yes | HTML or SVG code. For SVG: start with <svg>. For HTML: content fragment |
For SVG output: start widget_code with <svg — it will be auto-detected and wrapped appropriately.
For charts, use onload callback pattern to handle script load ordering:
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;">
<div style="background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 1rem;">
<div style="font-size: 13px; color: var(--color-text-secondary);">Label</div>
<div style="font-size: 24px; font-weight: 500;" id="stat1">—</div>
</div>
</div>
<div style="position: relative; width: 100%; height: 300px; margin-top: 1rem;">
<canvas id="myChart"></canvas>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin-top: 1rem;">
<label style="font-size: 14px; color: var(--color-text-secondary);">Parameter</label>
<input type="range" min="0" max="100" value="50" id="param" step="1" style="flex: 1;" />
<span style="font-size: 14px; font-weight: 500; min-width: 32px;" id="param-out">50</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
<script>
function initChart() {
const slider = document.getElementById('param');
const out = document.getElementById('param-out');
let chart = null;
Prerequisites
Time Estimate
15-45 minutes depending on use case complexity
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
anthropics/claude-code
mblode/agent-skills
github/awesome-copilot
sickn33/antigravity-awesome-skills
leonxlnx/taste-skill
erichowens/some_claude_skills
generative-ui fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
I recommend generative-ui for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Registry listing for generative-ui matched our evaluation — installs cleanly and behaves as described in the markdown.
We added generative-ui from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
Useful defaults in generative-ui — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
Keeps context tight: generative-ui is the kind of skill you can hand to a new teammate without a long onboarding doc.
I recommend generative-ui for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
generative-ui reduced setup friction for our internal harness; good balance of opinion and flexibility.
Registry listing for generative-ui matched our evaluation — installs cleanly and behaves as described in the markdown.
Solid pick for teams standardizing on skills: generative-ui is focused, and the summary matches what you get after install.
showing 1-10 of 50