generative-ui

generative-ui is a skill for Claude Code, Codex from himself65/finance-skills. It costs 205 tokens per session (3,413 once invoked), scanned A, original, MIT.

A design guide for Claude's built-in feature that displays interactive HTML or SVG widgets inside a conversation. It explains how to choose and structure visual outputs such as diagrams, charts, and comparison panels.

In plain words
What is it for?
Creating inline flowcharts, architecture diagrams, interactive explainers, comparison grids, charts, and data cards in Claude conversations.
Why use it?
It helps an agent choose a suitable visual format for the user's request and follow a consistent design system when creating the widget.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: positional $N argument.

About the project

Finance Skills is a collection of agent skills for financial analysis and trading, covering activities such as company valuation, earnings research, market analysis, and options calculations. It is for users who want coding agents to perform structured finance workflows, and the catalogue contains its skills, plugins, instructions, and MCP integration.

himself65/finance-skills · 3,290 stars · on GitHub · skills.himself65.com

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/himself65/finance-skills/generative-ui
Any agent
npx skills add himself65/finance-skills --skill generative-ui
Clone the repo
git clone --depth 1 https://github.com/himself65/finance-skills

Made for: Claude Code, Codex.

Its marketplace also offers this one on its own, as the plugin finance-ui-tools/plugin install finance-ui-tools after adding the marketplace above.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for generative-ui

README.md
[![agentmods](https://agentmods.dev/badge/skills/himself65/finance-skills/generative-ui.svg)](https://agentmods.dev/skills/himself65/finance-skills/generative-ui)
Your own site
<a href="https://agentmods.dev/skills/himself65/finance-skills/generative-ui"><img src="https://agentmods.dev/badge/skills/himself65/finance-skills/generative-ui.svg" alt="Measured on agentmods" height="20"></a>
Per session 205 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,413 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00205 $0.03413
Opus 5 $0.00102 $0.01707
Sonnet 5 $0.00041 $0.00683
Haiku 4.5 $0.00020 $0.00341

Measured 6d ago against content hash 90265217dc02, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

generative-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/ui-tools/skills/generative-ui/SKILL.md · 290 lines

How it starts

The opening of the file, as written. The whole thing — 290 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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
  • 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

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

Read the full file on GitHub · 290 lines

Files

What ships with it

4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 6d ago First seen · 290 lines · 205 tokens per session scan A 90265217dc02

Subscribe to this mod's changes

generative-ui is a skill published in the GitHub repository himself65/finance-skills (3,290 stars, last pushed 9d ago), licensed MIT. It adds 205 tokens to every session and 3,413 once invoked, about $0.0010 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

quotient

Prediction-market intelligence for Polymarket agents. Quotient runs a multi-role AI forecasting pipeline over 1,600+ sources and publishes daily trade signals with side, entry prices, conviction tiers, capacity, and convergence reads. Pull forecasts (with what-changed deltas), recent sources (articles + X posts), the…

BankrBot/skills · 201 tokens

delu-oracle

Full-cognition token analysis for Base EVM tokens via the deluagent oracle. Pass a CA or cashtag, get back a flat decision header (action, conviction, entry/stop/size, read) plus full cognition report. Tiered x402 pricing — 100M+ DELU free, 50M+ 50k DELU, public 250k DELU. Sequential calls only.

BankrBot/skills · 87 tokens

lonestaroracle-data

Live pay-per-call data for crypto and DeFi protocol risk, funding rates, open interest, liquidations, stablecoin health, macro, equities, and on-chain intelligence — settled per query in USDC on Base via x402, no signup or API key.

BankrBot/skills · 58 tokens

backtesting-sim

Backtesting and simulation: vectorized backtesting, paper trading simulation, strategy A/B testing, automated strategy building, natural language to strategy, and trading plan generation. USE FOR: backtest, backtesting, paper trading, simulation, strategy builder, A/B test strategies, natural language strategy…

mahmoud20138/Tradecraft · 118 tokens

cross-asset-relationships

Cross-asset and quantitative analysis: pair correlations, correlation heatmaps, currency strength, cross-timeframe divergence, intermarket analysis, market breadth, carry trades, swap rates, risk premia, and multi-pair baskets. USE FOR: correlation, currency strength, intermarket, market breadth, carry trade, swap…

mahmoud20138/Tradecraft · 85 tokens

freqtrade-bot

Freqtrade — open-source Python crypto trading bot. Backtesting, hyperopt (ML parameter optimization), FreqAI (self-training adaptive strategies), Telegram + WebUI control. Supports Binance, Kraken, Bybit, OKX, Gate.io (spot + futures). SQLite trade h.

mahmoud20138/Tradecraft · 61 tokens