Atlas / Skills / himself65 / Generative Ui

Generative UiSAFE

skills/himself65/generative-ui

Agent skill by himself65 · agent skills · claude code · skills · Audited 2026-10-08

⚑ Report / re-scan Source ↗

A collection of skills for AI financial analysis.

Verdict

SAFE

Grade

Trust score

89 /100

Version

—

Hosts

1 documented

License

MIT

Stars

3,383

Overview

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

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.

What it does

Provides the complete Anthropic "Imagine" design system so Claude produces high-quality widgets without needing to call read_me first. Covers:

Charts — Chart.js line, bar, area charts with interactive controls
Diagrams — SVG flowcharts, structural diagrams, illustrative diagrams
Dashboards — metric cards, comparison grids, data displays
Interactive explainers — sliders, toggles, live-updating calculations
Design tokens — CSS variables, color palette (light/dark), typography, spacing

Key design principles

Seamless — widgets blend with the host UI
Flat — no gradients, shadows, or decorative effects
Compact — show the essential inline, explain in text
Dark mode mandatory — all colors work in both light and dark mode via CSS variables

Triggers

"show me", "visualize", "draw", "chart", "dashboard"
"diagram", "flowchart", "widget", "interactive", "mockup"
"explain how X works" (with visual), "illustrate"
Any request for visual/interactive output beyond plain text or markdown

Platform

Works on Claude.ai (built-in show_widget tool).

Setup

# Choose finance-ui-tools when prompted.
npx plugins add himself65/finance-skills

# Or install just this skill
npx skills add himself65/finance-skills --skill generative-ui

See the main README for more installation options.

Reference files

references/design_system.md — Complete color palette, CSS variables, UI component patterns, metric cards, layout rules
references/svg_and_diagrams.md — SVG viewBox setup, font calibration, pre-built classes, diagram patterns with examples
references/chart_js.md — Chart.js configuration, script load ordering, canvas sizing, legend patterns, dashboard layout

Read from source at commit 317cbce031f1OBSERVED · 2026-10-08

Install

Commands as the repository documents them. They are shown, not run.

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

Host compatibility

What the documentation claims. We have not run a compatibility test.

Host	Status	Notes
cursor	mentioned

What it tells the agent

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: generative-ui
description: >
  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".
---

# Generative UI Skill

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.

---

## Step 1: Pick the Right Visual Type

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 |

---

## Step 2: Build the Widget

### Structure (strict order)

```
<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.

### Philosophy

- **Seamless**: Users shouldn't notice where the host UI ends and your widget begins
- **Flat**: No gradients, mesh backgrounds, noise textures, or decorative effects. Clean flat surfaces
- **Compact**: Show the essential inline. Explain the rest in text
- **No stock "AI design" defaults**: skip cream or off-white panels, italic accent words in headings, numbered "01 / 02 / 03" section labels, monospace labels outside code, and pill-shaped buttons — they read as generic and clash with the host UI
- **Text goes in your response, visuals go in the tool** — write explanatory text, descriptions, and summaries as normal response text outside the tool call; the widget holds only the visual element

### Core Rules

- No `<!-- comments -->` or `/* comments */` (waste tokens, break streaming)
- No font-size below 11px
- No emoji — use CSS shapes or SVG paths
- No gradients, drop shadows, blur, glow, or neon effects
- No dark/colored backgrounds on outer containers (transparent only — host provides the bg)
- **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
- **Sentence case** always. Never Title Case, never ALL CAPS
- No mid-sentence bolding — entity names go in `code style` not **bold**
- No `<!DOCTYPE>`, `<html>`, `<head>`, or `<body>` — just content fragments
- No `position: fixed` — use normal-flow layouts
- No tabs, carousels, or `display: none` sections during streaming
- No nested scrolling — auto-fit height
- Corners: `border-radius: var(--border-radius-lg)` for cards, `var(--border-radius-md)` for elements
- No rounded corners on single-sided borders (border-left, border-top)
- **Round every displayed number** — use `Math.round()`, `.toFixed(n)`, or `Intl.NumberFormat`

### CDN Allowlist (CSP-enforced)

External resources may ONLY load from:
- `cdnjs.cloudflare.com`
- `cdn.jsdelivr.net`
- `unpkg.com`
- `esm.sh`

All other origins are blocked — the request silently fails.

### CSS Variables

**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:
- In HTML: always use CSS variables for text. Never hardcode colors like `color: #333`
- In SVG: use pre-built color classes (`c-blue`, `c-teal`, etc.) — they handle light/dark automatically
- Mental test: if the background were near-black, would every text element still be readable?

### `sendPrompt(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.

---

## Step 3: Render with `show_widget`

The `show_widget` tool is built into claude.ai — no activation needed. Pass your widget code directly:

```json
{
  "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

Trust audit

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

Layer	What it checks	Result
L0	Provenance & inventory	PASS
L1	Static analysis of the code	NA
L2	Instruction surface (what it tells the agent)	PASS
L3	Class-specific surface	PASS
L4	Behavioural (sandbox)	SKIPPED

What the source does

Filesystem: none-observed
Network: none-observed
Shell: none-observed
Dependencies: pinned
Secrets in source: none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.

Audited 2026-10-08 · audit v0.4.1 · source sha 317cbce031f1full audit observations/trust-audit/skill/himself65__generative-ui.json · Report an issue / request a re-scan

Audit history

Every audit this skill has had.

Date	Source	Verdict	Grade	Score	Change
2026-10-08	`317cbce031f1`	SAFE	B	89	first audit

Questions

What does the Generative Ui skill do?

A collection of skills for AI financial analysis.

Is Generative Ui safe to install?

The audit found nothing in the source that contradicts what it says it does, and graded it B (89/100). Grade A is held back for packages that have also passed a sandboxed behavioural run, which is why a clean skill reads B.

What can Generative Ui access on my machine?

The audit observed no filesystem, network or shell use at all in its source.

Which assistants does Generative Ui work with?

Its documentation mentions cursor. That is what the text claims, not a compatibility test we ran.

How current is this page?

The grade is for one exact copy of the source (317cbce031f1), read on 2026-10-08. The repository is watched, and a new audit runs when it changes — this is the first audit.

Source	himself65/finance-skills/plugins/ui-tools/skills/generative-ui
License	MIT
Dependencies	pinned to exact versions
Activity	pushed 3d ago