open source · Claude Code plugin

Financial UI,14 styles.No AI defaults.

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, and colorblind-safe up/down colors. financial-ui-styles picks one of 14 design styles, each modeled on a real trading product.

The skills load on their own whenever Claude touches prices, P&L, order books, holdings, or streaming market data. No slash commands, no special syntax. Ask what you'd ask a designer.

Stops the AI from shipping the same dashboard every time.

View on GitHub Install

2skills·17references·14styles·MIT·built for Massive

ticker · NVDA09:31:22 EDT

$754.95

+$17.68

+2.40%

vol45.2M

mkt cap$1.85T

p/e72.3

iv 30d34%

52w hi$761

beta1.68

trades tape

09:31:22755.10120

09:31:18754.90200

09:31:15754.95350

order-bookNVDA

755.30420

755.20180

755.1062

spread0.30

754.80155

754.70310

754.60540

holdings5 positions

tickerday p/lvalue

NVDA+2.4%$68.2K

AAPL+0.8%$41.5K

ALLO-1.9%$8.1K

MSFT+1.1%$29.4K

GOOGL-0.2%$22.0K

Same data on three screens.

01How it composes

Two skills. One purpose.

financial-ui-patterns always loads. It holds the correctness rules every serious trading product follows. financial-ui-styles picks one of 14 design styles, so the result doesn't look like every other AI dashboard.

Patterns load every time. One style per product. Combine them in plain English: "build an options chain in TradingView style."

$ tree skills/

├─ financial-ui-patterns // correctness, always on

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

# loads on its own when the agent sees:

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

02What it prevents

Six bugs Claude writes on its own.

Ask Claude for a trading UI without the plugin and it writes every line below. Each one breaks something real users see.

✖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, screen readers

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

Every style is modeled on a real product.

Four featured styles rendered as full product screens on the same NVDA ticker. Ten more ship in the plugin as complete reference sets.

skills/financial-ui-styles/references/

proviewMarketsScreenerIdeasAlerts

Search symbol...

Watchlist

NVDA754.95+2.40

TSLA412.30-1.12

SPY612.44+0.35

AAPL231.10+0.88

MSFT451.20-0.24

AMZN228.75+1.55

NVDA NVIDIA · NASDAQ

754.95

+17.68+2.40%

1m5m15m1h4h1D1W

Key stats

Open738.20

Prev close737.27

Day range733.10 – 761.15

52w range512.20 – 761.15

Volume45.2M

Avg volume38.4M

Market cap$1.85T

P/E72.3

Beta1.68

modern-pro-dark

Modern Pro Dark

TradingView, Kraken Pro, Hyperliquid

NVDA US EQUITY   DES  <GO>09:31:22 EDT · MKT OPEN
ORDER BOOK · L2
BSIZEBIDASKASIZE
8,420754.80754.951,205
12,510754.70755.003,860
6,285754.60755.109,120
18,420754.50755.205,308
4,110754.40755.302,940
TAPE · LAST 6
TIMEPRICESIZESIDE
09:31:22.418754.95120B
09:31:22.271754.90200S
09:31:22.104754.95350B
09:31:21.860754.851000S
09:31:21.622754.9560B
09:31:21.401754.90180S
KEY STATS
LAST754.95CHG+17.68
OPEN738.20PCLS737.27
HIGH761.15LOW733.10
VOL45.2MAVG38.4M
MKT1.85TP/E72.3
BID754.80ASK754.95
EPS3.42DIV0.04
NEWS · N<GO>
09:22NVDA UPGRADED AT MS: PT RAISED TO 820 FROM 760
08:15TSMC CONFIRMS BLACKWELL YIELDS AHEAD OF SCHEDULE
07:44NVIDIA H100 PRICING FIRM AS HYPERSCALERS RENEW
07:12MEG WHITMAN JOINS NVIDIA ADVISORY BOARD
1<HELP>2<CANCEL>GP<GO>N<GO>MO<GO>OMON<GO>

pro-terminal

Pro Terminal

Bloomberg, IBKR TWS, ThinkOrSwim

hoodInvestingStocksOptionsCrypto

NVIDIA Corporation · NVDA

$754.95

▲$17.68 (+2.40%)Today

1D1W1M3MYTD1Y5Y

Buy

Sell

Your position

Shares24Equity$18,118.80Today's return+$424.32Total return+$6,208.12

News

Reuters · 1h

Nvidia climbs as AI demand outpaces Street forecasts

The Verge · 3h

TSMC confirms Blackwell yields ahead of schedule

Bloomberg · 5h

Morgan Stanley raises NVDA price target to $820

retail-polish-dark

Retail Polish Dark

Robinhood, Public

FTFinancial Times

HomeMarketsCompaniesOpinionLexAlphaville

Markets · US Equities

Nvidia climbs 2.4% as AI demand outpaces Street forecasts

By Reuters · 09:31 EDT · 3 min read

Shares of Nvidia gained $17.68 in early trade to $754.95, extending a rally that has added roughly a fifth to the chipmaker’s valuation this quarter. Traders pointed to renewed hyperscaler ordering as the immediate catalyst.

“The pull-through from AI capex remains stronger than consensus,” wrote Morgan Stanley’s Joe Moore in a note lifting his price target to $820 from $760, citing checks with cloud operators renewing H100 pricing.

NVDA · NASDAQ

754.95

+17.68 (+2.40%)

Open738.20
Vol45.2M
Mkt$1.85T
P/E72.3

Talk to it like a person.

No special syntax. The agent reads the request, loads the right reference, and writes against it. Name 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, then install the plugin. The skills load on their own whenever Claude touches financial UI.

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

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

07Data

The NVDA prices on this page are fake. Massive's aren't.

A real build needs real trades, quotes, and bars behind it. Massive serves that data: real-time and historical trades, quotes, OHLC bars, options chains, futures, and fundamentals across stocks, crypto, FX, and indices. There's a free tier, so the first build can run on a real feed.

The plugin's api-dashboard style is modeled in part on the Massive dashboard.

massive.com Read the API docs

MIT · by Robert Gourley

Ship something that doesn't look generated.

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