open source · Claude Code plugin

Financial UI.Ten aesthetics.Zero templates.

A Claude Code plugin with two skills. financial-ui-patterns covers the correctness rules AI tools usually miss: tabular-nums, per-asset number formatting, streaming state, timezone-aware timestamps, colorblind-safe up/down. financial-ui-styles picks one of ten visual systems, each modeled on how a real trading product actually ships.

Skills load automatically whenever Claude touches prices, P&L, order books, holdings, or streaming market data. No slash commands, no invocation grammar. Ask what you’d ask a designer.

Stops the AI from shipping the same dashboard every time.

View on GitHub Install

2skills·17references·10styles·MIT

Same data. Four visual systems. Pick one per product.

01How it composes

Two skills. One purpose.

product-design handles atomic decisions for any SaaS UI. financial-ui-patterns is mandatory: the correctness rules every serious trading product ships. financial-ui-styles picks one of ten aesthetics so the surface doesn’t blur into every other AI-generated dashboard.

Patterns always loaded. One style per product. Combine in plain English: “build an options chain in TradingView style.”

$ tree skills/

├─ product-design // atomic SaaS decisions

├─ financial-ui-patterns // correctness, mandatory

└─ financial-ui-styles // pick exactly one

# triggered automatically when the agent sees:

# prices, P&L, order books, holdings, charts, ticks, watchlists…

02What it prevents

The defaults that ship without it.

Every line below is something Claude wrote on its own when asked for a trading UI. Each one is a bug in a serious product.

✖text-emerald-400

Raw color values instead of semantic up/down tokens.

✖price.toFixed(2)

Breaks BTC (no decimals at $100K) and SHIB (needs eight).

✖bg-${color}-500/10

Dynamic Tailwind classes silently dropped by JIT.

✖<td>{price}</td>

No tabular-nums. Digits jitter on every tick.

✖ws.onmessage = render

No throttle, no staleness, no reconnect indicator.

✖color === 'green' ? ↑ : ↓

Red/green only fails 8% of male users.

03financial-ui-patterns

17 references for the parts AI tools miss.

Pulled from how Bloomberg, Kraken, TradingView, Coinbase, FT, Robinhood, and TastyTrade actually ship. Not opinion. Conventions.

skills/financial-ui-patterns/references/

typography-and-color.md

Tokens, type scale, density, motion

number-formatting.md

Prices, qty, %, bps, currency

components.md

Tables, order books, tickers, pills

streaming-and-state.md

Sockets, tick flash, throttling

accessibility.md

Color blindness, keyboard, SR

mobile-and-responsive.md

Phone/tablet, bottom sheets

industry-patterns.md

Bloomberg, Kraken, FT conventions

charts-and-candles.md

OHLC, volume, indicators (base)

loading-and-skeletons.md

First-load + reconnect treatments

empty-and-error-states.md

Rejected, closed, rate-limit

timestamps-and-timezones.md

Trade times, “as of” stamps

virtualization.md

100+ streaming rows, trades tape

chart-interactions.md

Crosshair, zoom/pan, drawing tools

order-entry-and-lifecycle.md

Forms, preview, pending→filled

alerts-and-disclosures.md

Price alerts, PDT/wash-sale

data-sources-and-freshness.md

Real-time→delayed→stale

heatmaps-and-density-viz.md

Sector, options, IV surface

04financial-ui-styles

Ten aesthetics. Each modeled on something real.

Pick one per product. Each reference encodes the color token, type system, density, and chart treatment of the brand it’s named after.

skills/financial-ui-styles/references/

modern-pro-dark

Modern Pro Dark

TradingView, Kraken Pro, Hyperliquid

pro-terminal

Pro Terminal

Bloomberg, IBKR TWS, ThinkOrSwim

retail-polish-dark

Retail Polish Dark

Robinhood, Public

editorial-financial

Editorial Financial

FT, Bloomberg.com, WSJ

api-dashboard

API Dashboard

Massive, Stripe, Vercel, Linear

and five more in the plugin

tasty-pro

Tasty Pro

TastyTrade

crypto-exchange

Crypto Exchange

Coinbase Advanced, Binance, Bybit

retail-polish-light

Retail Polish Light

Wise, Revolut, Cash App, Monzo

defi-native

DeFi Native

Uniswap, Jupiter, Aave, Phantom

apple-native

Apple Native

iOS Stocks, macOS widget

05Triggers

Talk to it like a person.

No invocation grammar. The agent sees the request, loads the right reference, and writes against it. Mention a brand to pick a style.

“build a portfolio holdings table”

→financial-ui-patterns

“design an options chain in TradingView style”

→patterns + modern-pro-dark

“make it look like Bloomberg terminal”

→pro-terminal

“render an FT-style market wrap”

→editorial-financial

06Install

Two commands.

Add the marketplace, install the plugin. Skills auto-load whenever Claude touches financial UI. No slash commands, no invocation grammar.

Works on any Claude Code project
React + Tailwind examples, framework-agnostic rules
Includes a verify script that fails on the common anti-patterns

terminalzsh

# Add the marketplace from GitHub
$claude plugin marketplace add https://github.com/rgourley/financial-ui-suite
 
# Install the plugin
$/plugin install financial-ui-suite@financial-ui-suite-dev
 
# Then ask Claude in plain language
>build a portfolio holdings table
>make it look like Bloomberg terminal
 
# Optional: verify an existing codebase
$./scripts/verify-financial-ui.sh ../my-app/src

MIT · by Robert Gourley

Ship something that doesn’t look generated.

github.com/rgourley/financial-ui-suite See more work