generative-ui

Name: generative-ui
Author: himself65

1.5kinstalls351forks

How to install generative-ui?

himself65/finance-skills/generative-ui

$npx -y skills add himself65/finance-skills --skill generative-ui

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Generative UI Skill
2
3	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.
4
5	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.
6
7	---
8
9	## Step 1: Pick the Right Visual Type
10
11	Route on the verb, not the noun. Same subject, different visual depending on what was asked:
12
13	\| User says \| Type \| Format \|
14	\|---\|---\|---\|
15	\| "how does X work" \| Illustrative diagram \| SVG \|
16	\| "X architecture" \| Structural diagram \| SVG \|
17	\| "what are the steps" \| Flowchart \| SVG \|
18	\| "explain compound interest" \| Interactive explainer \| HTML \|
19	\| "compare these options" \| Comparison grid \| HTML \|
20	\| "show revenue chart" \| Chart.js chart \| HTML \|
21	\| "create a contact card" \| Data record \| HTML \|
22	\| "draw a sunset" \| Art/illustration \| SVG \|
23
24	---
25
26	## Step 2: Build the Widget
27
28	### Structure (strict order)
29
30	```
31	<style> → HTML content → <script>
32	```
33
34	Output streams token-by-token. Styles must exist before the elements they target, and scripts must run after the DOM is ready.
35
36	### Philosophy
37
38	- Seamless: Users shouldn't notice where the host UI ends and your widget begins
39	- Flat: No gradients, mesh backgrounds, noise textures, or decorative effects. Clean flat surfaces
40	- Compact: Show the essential inline. Explain the rest in text
41	- Text goes in your response, visuals go in the tool — all explanatory text, descriptions, and summaries must be written as normal response text OUTSIDE the tool call. The tool output should contain ONLY the visual element
42
43	### Core Rules
44
45	- No `<!-- comments -->` or `/* comments */` (waste tokens, break streaming)
46	- No font-size below 11px
47	- No emoji — use CSS shapes or SVG paths
48	- No gradients, drop shadows, blur, glow, or neon effects
49	- No dark/colored backgrounds on outer containers (transparent only — host provides the bg)
50	- Typography: two weights only: 400 regular, 500 medium. Never use 600 or 700. Headings: h1=22px, h2=18px, h3=16px — all font-weight 500. Body text=16px, weight 400, line-height 1.7
51	- Sentence case always. Never Title Case, never ALL CAPS
52	- No mid-sentence bolding — entity names go in `code style` not bold
53	- No `<!DOCTYPE>`, `<html>`, `<head>`, or `<body>` — just content fragments
54	- No `position: fixed` — use normal-flow layouts
55	- No tabs, carousels, or `display: none` sections during streaming
56	- No nested scrolling — auto-fit height
57	- Corners: `border-radius: var(--border-radius-lg)` for cards, `var(--border-radius-md)` for elements
58	- No rounded corners on single-sided borders (border-left, border-top)
59	- Round every displayed number — use `Math.round()`, `.toFixed(n)`, or `Intl.NumberFormat`
60
61	### CDN Allowlist (CSP-enforced)
62
63	External resources may ONLY load from:
64	- `cdnjs.cloudflare.com`
65	- `cdn.jsdelivr.net`
66	- `unpkg.com`
67	- `esm.sh`
68
69	All other origins are blocked — the request silently fails.
70
71	### CSS Variables
72
73	Backgrounds: `--color-background-primary` (white), `-secondary` (surfaces), `-tertiary` (page bg), `-info`, `-danger`, `-success`, `-warning`
74	Text: `--color-text-primary` (black), `-secondary` (muted), `-tertiary` (hints), `-info`, `-danger`, `-success`, `-warning`
75	Borders: `--color-border-tertiary` (0.15α, default), `-secondary` (0.3α, hover), `-primary` (0.4α), semantic `-info/-danger/-success/-warning`
76	Typography: `--font-sans`, `--font-serif`, `--font-mono`
77	Layout: `--border-radius-md` (8px), `--border-radius-lg` (12px), `--border-radius-xl` (16px)
78
79	All auto-adapt to light/dark mode.
80
81	Dark mode is mandatory — every color must work in bo

People who liked this also viewed

6 picks

Type

generative-ui

1.5kinstalls351forks

View on GitHub

How to install generative-ui?

himself65/finance-skills/generative-ui

$npx -y skills add himself65/finance-skills --skill generative-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Generative UI Skill
2
3	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.
4
5	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.
6
7	---
8
9	## Step 1: Pick the Right Visual Type
10
11	Route on the verb, not the noun. Same subject, different visual depending on what was asked:
12
13	\| User says \| Type \| Format \|
14	\|---\|---\|---\|
15	\| "how does X work" \| Illustrative diagram \| SVG \|
16	\| "X architecture" \| Structural diagram \| SVG \|
17	\| "what are the steps" \| Flowchart \| SVG \|
18	\| "explain compound interest" \| Interactive explainer \| HTML \|
19	\| "compare these options" \| Comparison grid \| HTML \|
20	\| "show revenue chart" \| Chart.js chart \| HTML \|
21	\| "create a contact card" \| Data record \| HTML \|
22	\| "draw a sunset" \| Art/illustration \| SVG \|
23
24	---
25
26	## Step 2: Build the Widget
27
28	### Structure (strict order)
29
30	```
31	<style> → HTML content → <script>
32	```
33
34	Output streams token-by-token. Styles must exist before the elements they target, and scripts must run after the DOM is ready.
35
36	### Philosophy
37
38	- Seamless: Users shouldn't notice where the host UI ends and your widget begins
39	- Flat: No gradients, mesh backgrounds, noise textures, or decorative effects. Clean flat surfaces
40	- Compact: Show the essential inline. Explain the rest in text
41	- Text goes in your response, visuals go in the tool — all explanatory text, descriptions, and summaries must be written as normal response text OUTSIDE the tool call. The tool output should contain ONLY the visual element
42
43	### Core Rules
44
45	- No `<!-- comments -->` or `/* comments */` (waste tokens, break streaming)
46	- No font-size below 11px
47	- No emoji — use CSS shapes or SVG paths
48	- No gradients, drop shadows, blur, glow, or neon effects
49	- No dark/colored backgrounds on outer containers (transparent only — host provides the bg)
50	- Typography: two weights only: 400 regular, 500 medium. Never use 600 or 700. Headings: h1=22px, h2=18px, h3=16px — all font-weight 500. Body text=16px, weight 400, line-height 1.7
51	- Sentence case always. Never Title Case, never ALL CAPS
52	- No mid-sentence bolding — entity names go in `code style` not bold
53	- No `<!DOCTYPE>`, `<html>`, `<head>`, or `<body>` — just content fragments
54	- No `position: fixed` — use normal-flow layouts
55	- No tabs, carousels, or `display: none` sections during streaming
56	- No nested scrolling — auto-fit height
57	- Corners: `border-radius: var(--border-radius-lg)` for cards, `var(--border-radius-md)` for elements
58	- No rounded corners on single-sided borders (border-left, border-top)
59	- Round every displayed number — use `Math.round()`, `.toFixed(n)`, or `Intl.NumberFormat`
60
61	### CDN Allowlist (CSP-enforced)
62
63	External resources may ONLY load from:
64	- `cdnjs.cloudflare.com`
65	- `cdn.jsdelivr.net`
66	- `unpkg.com`
67	- `esm.sh`
68
69	All other origins are blocked — the request silently fails.
70
71	### CSS Variables
72
73	Backgrounds: `--color-background-primary` (white), `-secondary` (surfaces), `-tertiary` (page bg), `-info`, `-danger`, `-success`, `-warning`
74	Text: `--color-text-primary` (black), `-secondary` (muted), `-tertiary` (hints), `-info`, `-danger`, `-success`, `-warning`
75	Borders: `--color-border-tertiary` (0.15α, default), `-secondary` (0.3α, hover), `-primary` (0.4α), semantic `-info/-danger/-success/-warning`
76	Typography: `--font-sans`, `--font-serif`, `--font-mono`
77	Layout: `--border-radius-md` (8px), `--border-radius-lg` (12px), `--border-radius-xl` (16px)
78
79	All auto-adapt to light/dark mode.
80
81	Dark mode is mandatory — every color must work in bo

People who liked this also viewed

6 picks

Type