Generative Ui

# generative-ui

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

```bash
# As a plugin (recommended — installs all skills)
npx plugins add himself65/finance-skills --plugin finance-ui-tools

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

See the [main README](../../../../README.md) 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


# Chart.js Reference

Extracted from Claude's actual `visualize:read_me` guidelines.

---

## Basic Setup

```html
<div style="position: relative; width: 100%; height: 300px;">
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" onload="initChart()"></script>
<script>
  function initChart() {
    new Chart(document.getElementById('myChart'), {
      type: 'bar',
      data: { labels: ['Q1','Q2','Q3','Q4'], datasets: [{ label: 'Revenue', data: [12,19,8,15] }] },
      options: { responsive: true, maintainAspectRatio: false }
    });
  }
  if (window.Chart) initChart();
</script>
```

---

## Rules

### Canvas Sizing
- Set height ONLY on the wrapper div, never on the canvas element itself
- Use `position: relative` on the wrapper
- Use `responsive: true, maintainAspectRatio: false` in Chart.js options
- Never set CSS height directly on canvas — causes wrong dimensions, especially for horizontal bar charts
- For horizontal bar charts: wrapper div height = at least `(number_of_bars × 40) + 80` pixels

### Script Load Ordering
- Load UMD build via `<script src="https://cdnjs.cloudflare.com/ajax/libs/...">` — sets `window.Chart` global
- Follow with plain `<script>` (no `type="module"`)
- CDN scripts may not be loaded when the next `<script>` runs (especially during streaming)
- **Always use `onload="initChart()"` on the CDN script tag**
- Define your chart init in a named function
- Add `if (window.Chart) initChart();` as fallback at end of inline script
- This guarantees charts render regardless of load order

### Canvas and CSS Variables
- Canvas cannot resolve CSS variables. Use hardcoded hex or Chart.js defaults
- Multiple charts: use unique IDs (`myChart1`, `myChart2`). Each gets its own canvas+div pair

### Scale Padding
- For bubble and scatter charts: bubble radii extend past center points, so points near axis boundaries get clipped
- Pad the scale range — set `sca