Skill
financial-ui-patterns
Use when building any UI that displays prices, P&L, holdings, orders, trades, charts, order books, watchlists, or streaming market data. Covers patterns from…
@rgourleyView SkillDevelopment
Skill
/financial-ui-styles
Use when building any financial UI to select a visual aesthetic — Bloomberg-style pro terminal, TradingView-style modern pro, Robinhood-style retail, FT-style editorial, Massive/Stripe-style API dashboard, Coinbase/Binance-style crypto exchange, TastyTrade-style options pro,
Install
$ npx -y skills add rgourley/financial-ui-suite --skill financial-ui-styles --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/financial-ui-styles
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when building any financial UI to select a visual aesthetic — Bloomberg-style pro terminal, TradingView-style modern pro, Robinhood-style retail, FT-style editorial, Massive/Stripe-style API dashboard, Coinbase/Binance-style crypto exchange, TastyTrade-style options pro,
SKILL.md
financial-ui-styles.SKILL.mdname: financial-ui-styles
description: Use when building any financial UI to select a visual aesthetic — Bloomberg-style pro terminal, TradingView-style modern pro, Robinhood-style retail, FT-style editorial, Massive/Stripe-style API dashboard, Coinbase/Binance-style crypto exchange, TastyTrade-style options pro, Wise-style retail light, Uniswap-style DeFi, iOS Stocks-style Apple native, Yahoo Finance-style prosumer dark, AlphaSense-style research terminal, AlphaSpace-style consumer terminal, or Gloomberb-style terminal TUI. Loads AFTER `financial-ui-patterns` (which handles correctness). Read when user says "make it look like X" or specifies a brand/style direction.
Financial UI Styles
Overview
Fourteen distinct visual styles for financial UIs. The base skill `financial-ui-patterns` handles correctness (tabular nums, semantic tokens, tick flash, accessibility). This skill handles **visual style** — the brand-flavored layer on top.
**Layering:**
product-design → atomic decisions for any SaaS UI
financial-ui-patterns → finance-specific correctness (mandatory)
financial-ui-styles (this) → brand style / visual polish (pick one)
You always apply the lower layers. You pick exactly one style on top.
When to Use
- User says "make it look like X" where X is a financial product or aesthetic
- User specifies brand/aesthetic direction ("Bloomberg style", "Robinhood feel", "FT-like", "API-dashboard aesthetic")
- Starting a new financial UI from scratch and picking the visual direction
- Refactoring an existing financial UI toward a specific aesthetic
**Don't use for:** marketing pages, blog posts, anything not loading data. Styles are calibrated for data-dense UIs.
How to Pick
Match the user and product category, not the brand mood the founder asked for.
| If the user is... | And the product is... | Pick | |---|---|---| | Institutional / desk trader | Desktop terminal, command-line driven, max density | `pro-terminal` | | Pro / prosumer trader | Modern web app, dense but not terminal-dense | `modern-pro-dark` | | Mainstream prosumer | Chart-forward consumer market data, watchlist + multi-ticker compare | `yahoo-prosumer` | | Self-directed retail-pro | Multi-panel custom terminal with embedded AI agent, themed views | `alphaspace` | | Buy-side analyst | Document/transcript search, sentiment, AI summaries | `research-terminal` | | Active options trader | Strategy builder, Greeks-forward | `tasty-pro` | | Centralized crypto trader | Exchange (CEX), spot + perps | `crypto-exchange` | | Onchain / DeFi user | DEX, swap UI, wallet-connect first | `defi-native` | | Retail consumer | Mobile-first investing app, dark | `retail-polish-dark` | | Retail consumer | Money app / neobank, light, friendly | `retail-polish-light` | | News / analysis reader | Editorial layout with embedded market data | `editorial-financial` | | Developer / admin | API console, dashboard, docs-adjacent | `api-dashboard` | | iOS user | Native companion or web that mimics native iOS | `apple-native` | | Indie / developer trader | Tiled multi-pane terminal (TUI) dashboard, muted, theme-swappable | `retro-tui` |
If two rows fit, pick the one whose **reference product** ships the closest UX. Don't blend.
Style Index
| Style | Reference shipping products | Reference file | |---|---|---| | `modern-pro-dark` | TradingView, Kraken Pro, Hyperliquid | `references/modern-pro-dark.md` | | `pro-terminal` | Bloomberg Terminal, IBKR TWS, ThinkOrSwim | `references/pro-terminal.md` | | `tasty-pro` | TastyTrade | `references/tasty-pro.md` | | `crypto-exchange` | Coinbase Advanced, Binance, Bybit | `references/crypto-exchange.md` | | `retail-polish-dark` | Robinhood, Public | `references/retail-polish-dark.md` | | `retail-polish-light` | Wise, Revolut, Cash App | `references/retail-polish-light.md` | | `editorial-financial` | FT.com, Bloomberg.com, WSJ | `references/editorial-financial.md` | | `api-dashboard` | Massive, Stripe, Vercel, Linear | `references/api-dashboard.md` | | `defi-native` | Uniswap, Jupiter, Solana ecosystem | `references/defi-native.md` | | `apple-native` | iOS Stocks, macOS Stocks widget | `references/apple-native.md` | | `yahoo-prosumer` | Yahoo Finance (current redesign), Seeking Alpha, Investing.com | `references/yahoo-prosumer.md` | | `alphaspace` | Yahoo Finance AlphaSpace (Gold tier), TradingView desktop, Bloomberg Terminal (layout reference) | `references/alphaspace.md` | | `research-terminal` | AlphaSense, Visible Alpha, FactSet, Tegus | `references/research-terminal.md` | | `retro-tui` | Gloomberb, lazygit, k9s, btop | `references/retro-tui.md` |
Each file ships with CSS variable token set (dark + light), typography table, density numbers, visual rules, style-specific patterns, anti-patterns, example component code, reference URLs, and verification checklist.
Style Summaries
modern-pro-dark — TradingView, Kraken Pro, Hyperliquid
Dark slate background. Single blue or purple accent. Sans body + tabular nums + mono on tickers. 28-32px table rows, 24-28px order book. Hairline borders. 4-6px radius. No gradients, no shadows beyond elevation. The default for serious pro consumer products.
pro-terminal — Bloomberg, IBKR TWS, ThinkOrSwim
Black or near-black with amber or cyan accent. Mono-everywhere, ALL CAPS section labels. 24-28px rows, max density. 0-2px radius. Hairline borders. Function-key shortcuts in tooltips. Institutional desktop aesthetic.
tasty-pro — TastyTrade
Black background, pink-magenta accent, green/red signals. Sans + tabular. Options-focused: prominent strikes, Greeks readability. 32-36px rows. Distinctive enough to call out separately even though it shares Modern Pro fundamentals.
crypto-exchange — Coinbase Advanced, Binance, Bybit
Dark slate or near-black. Yellow (Binance) or blue (Coinbase) accent. Higher cell-level color saturation than Modern Pro. Subtle gradients OK on chart areas. 28-32px rows. More aggress
Read more
name: financial-ui-styles description: Use when building any financial UI to select a visual aesthetic — Bloomberg-style pro terminal, TradingView-style modern pro, Robinhood-style retail, FT-style editorial, Massive/Stripe-style API dashboard, Coinbase/Binance-style crypto exchange, TastyTrade-style options pro, Wise-style retail light, Uniswap-style DeFi, iOS Stocks-style Apple native, Yahoo Finance-style prosumer dark, AlphaSense-style research terminal, AlphaSpace-style consumer terminal, or Gloomberb-style terminal TUI. Loads AFTER `financial-ui-patterns` (which handles correctness). Read when user says "make it look like X" or specifies a brand/style direction.
Financial UI Styles
Overview
Fourteen distinct visual styles for financial UIs. The base skill `financial-ui-patterns` handles correctness (tabular nums, semantic tokens, tick flash, accessibility). This skill handles **visual style** — the brand-flavored layer on top.
**Layering:**
product-design → atomic decisions for any SaaS UI financial-ui-patterns → finance-specific correctness (mandatory) financial-ui-styles (this) → brand style / visual polish (pick one)
You always apply the lower layers. You pick exactly one style on top.
When to Use
- User says "make it look like X" where X is a financial product or aesthetic
- User specifies brand/aesthetic direction ("Bloomberg style", "Robinhood feel", "FT-like", "API-dashboard aesthetic")
- Starting a new financial UI from scratch and picking the visual direction
- Refactoring an existing financial UI toward a specific aesthetic
**Don't use for:** marketing pages, blog posts, anything not loading data. Styles are calibrated for data-dense UIs.
How to Pick
Match the user and product category, not the brand mood the founder asked for.
| If the user is... | And the product is... | Pick | |---|---|---| | Institutional / desk trader | Desktop terminal, command-line driven, max density | `pro-terminal` | | Pro / prosumer trader | Modern web app, dense but not terminal-dense | `modern-pro-dark` | | Mainstream prosumer | Chart-forward consumer market data, watchlist + multi-ticker compare | `yahoo-prosumer` | | Self-directed retail-pro | Multi-panel custom terminal with embedded AI agent, themed views | `alphaspace` | | Buy-side analyst | Document/transcript search, sentiment, AI summaries | `research-terminal` | | Active options trader | Strategy builder, Greeks-forward | `tasty-pro` | | Centralized crypto trader | Exchange (CEX), spot + perps | `crypto-exchange` | | Onchain / DeFi user | DEX, swap UI, wallet-connect first | `defi-native` | | Retail consumer | Mobile-first investing app, dark | `retail-polish-dark` | | Retail consumer | Money app / neobank, light, friendly | `retail-polish-light` | | News / analysis reader | Editorial layout with embedded market data | `editorial-financial` | | Developer / admin | API console, dashboard, docs-adjacent | `api-dashboard` | | iOS user | Native companion or web that mimics native iOS | `apple-native` | | Indie / developer trader | Tiled multi-pane terminal (TUI) dashboard, muted, theme-swappable | `retro-tui` |
If two rows fit, pick the one whose **reference product** ships the closest UX. Don't blend.
Style Index
| Style | Reference shipping products | Reference file | |---|---|---| | `modern-pro-dark` | TradingView, Kraken Pro, Hyperliquid | `references/modern-pro-dark.md` | | `pro-terminal` | Bloomberg Terminal, IBKR TWS, ThinkOrSwim | `references/pro-terminal.md` | | `tasty-pro` | TastyTrade | `references/tasty-pro.md` | | `crypto-exchange` | Coinbase Advanced, Binance, Bybit | `references/crypto-exchange.md` | | `retail-polish-dark` | Robinhood, Public | `references/retail-polish-dark.md` | | `retail-polish-light` | Wise, Revolut, Cash App | `references/retail-polish-light.md` | | `editorial-financial` | FT.com, Bloomberg.com, WSJ | `references/editorial-financial.md` | | `api-dashboard` | Massive, Stripe, Vercel, Linear | `references/api-dashboard.md` | | `defi-native` | Uniswap, Jupiter, Solana ecosystem | `references/defi-native.md` | | `apple-native` | iOS Stocks, macOS Stocks widget | `references/apple-native.md` | | `yahoo-prosumer` | Yahoo Finance (current redesign), Seeking Alpha, Investing.com | `references/yahoo-prosumer.md` | | `alphaspace` | Yahoo Finance AlphaSpace (Gold tier), TradingView desktop, Bloomberg Terminal (layout reference) | `references/alphaspace.md` | | `research-terminal` | AlphaSense, Visible Alpha, FactSet, Tegus | `references/research-terminal.md` | | `retro-tui` | Gloomberb, lazygit, k9s, btop | `references/retro-tui.md` |
Each file ships with CSS variable token set (dark + light), typography table, density numbers, visual rules, style-specific patterns, anti-patterns, example component code, reference URLs, and verification checklist.
Style Summaries
modern-pro-dark — TradingView, Kraken Pro, Hyperliquid
Dark slate background. Single blue or purple accent. Sans body + tabular nums + mono on tickers. 28-32px table rows, 24-28px order book. Hairline borders. 4-6px radius. No gradients, no shadows beyond elevation. The default for serious pro consumer products.
pro-terminal — Bloomberg, IBKR TWS, ThinkOrSwim
Black or near-black with amber or cyan accent. Mono-everywhere, ALL CAPS section labels. 24-28px rows, max density. 0-2px radius. Hairline borders. Function-key shortcuts in tooltips. Institutional desktop aesthetic.
tasty-pro — TastyTrade
Black background, pink-magenta accent, green/red signals. Sans + tabular. Options-focused: prominent strikes, Greeks readability. 32-36px rows. Distinctive enough to call out separately even though it shares Modern Pro fundamentals.
crypto-exchange — Coinbase Advanced, Binance, Bybit
Dark slate or near-black. Yellow (Binance) or blue (Coinbase) accent. Higher cell-level color saturation than Modern Pro. Subtle gradients OK on chart areas. 28-32px rows. More aggress
Ships withfinancial-ui-suite
financial-ui-suite — a Claude Code plugin for building financial products. UI, UX, interaction logic, and structure. A Claude Code plugin for building financial products that follow the patterns and rules every serious trading product ships.
Get the whole plugin
Other skills on financial-ui-suite.
@rgourleyView Skill