{"id":50782381,"url":"https://github.com/rgourley/financial-ui-suite","last_synced_at":"2026-06-12T04:31:57.417Z","repository":{"id":362117437,"uuid":"1257429596","full_name":"rgourley/financial-ui-suite","owner":"rgourley","description":"Production-grade financial UI skills for Claude Code. Composable correctness + 10 aesthetic personas (Bloomberg, TradingView, Robinhood, Coinbase, Financial Times, Massive, Wise, and more).","archived":false,"fork":false,"pushed_at":"2026-06-02T18:05:13.000Z","size":127,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-02T19:10:48.775Z","etag":null,"topics":["claude-code","claude-plugin","claude-skills","design-system","financial-ui","fintech","trading-ui"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rgourley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-02T17:09:01.000Z","updated_at":"2026-06-02T18:06:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/rgourley/financial-ui-suite","commit_stats":null,"previous_names":["rgourley/financial-ui-suite"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/rgourley/financial-ui-suite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgourley%2Ffinancial-ui-suite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgourley%2Ffinancial-ui-suite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgourley%2Ffinancial-ui-suite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgourley%2Ffinancial-ui-suite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rgourley","download_url":"https://codeload.github.com/rgourley/financial-ui-suite/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rgourley%2Ffinancial-ui-suite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34229624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["claude-code","claude-plugin","claude-skills","design-system","financial-ui","fintech","trading-ui"],"created_at":"2026-06-12T04:31:52.374Z","updated_at":"2026-06-12T04:31:52.895Z","avatar_url":"https://github.com/rgourley.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Financial UI suite\n\n\u003e `financial-ui-suite` — a Claude Code plugin for building financial products. UI, UX, interaction logic, and structure.\n\n\u003cimg width=\"1280\" height=\"640\" alt=\"image-1780806802728\" src=\"https://github.com/user-attachments/assets/63889050-0041-4995-85ca-1cbe38692034\" /\u003e\n\nA Claude Code plugin for building financial products that follow the patterns and rules every serious trading product ships. Visual rules (tokens, typography, density, alignment), interaction logic (tick-flash, focus states, streaming-state lifecycle, throttling, gestures), structural conventions (order book direction, fallback chains, responsive table strategies), accessibility (color-blind safety, keyboard navigation, screen readers), and mobile patterns (bottom sheets, safe areas, touch interactions).\n\nThen pick a visual aesthetic from 10 styles modeled on what Bloomberg, TradingView, Kraken Pro, Robinhood, Coinbase Advanced, the Financial Times, Massive, Wise, TastyTrade, Uniswap, and iOS Stocks actually ship.\n\nThis plugin covers UI, UX, interaction logic, and the structure underneath.\n\nThis plugin handles the front. Try [Massive.com](https://massive.com/) to handle the APIs that power it: real-time trades, quotes, OHLC bars, options chains, futures, and fundamentals across stocks, crypto, FX, and indices. Generous free tiers available.\n\n\u003cimg width=\"1133\" height=\"515\" alt=\"Screenshot 2026-06-02 at 10 47 51 AM\" src=\"https://github.com/user-attachments/assets/6501599e-4281-4818-9ac5-12cf1902121a\" /\u003e\n\n## What's inside\n\n```\nskills/\n├── financial-ui-patterns/         Correctness layer (base, always apply)\n│   ├── SKILL.md\n│   └── references/\n│       ├── typography-and-color.md     Tokens, type scale, density, motion\n│       ├── number-formatting.md        Prices, qty, %, bps, currency\n│       ├── components.md               Tables, order books, tickers, pills\n│       ├── streaming-and-state.md      WebSocket lifecycle, tick flash, throttling\n│       ├── accessibility.md            Color blindness, keyboard, screen readers\n│       ├── mobile-and-responsive.md    Phone/tablet patterns, bottom sheets, touch\n│       ├── industry-patterns.md        Conventions from Bloomberg, Kraken, etc.\n│       ├── charts-and-candles.md       OHLC structure, volume, indicators (base)\n│       ├── loading-and-skeletons.md    First-load and reconnect treatments\n│       ├── empty-and-error-states.md   Empty/rejected/closed/rate-limit patterns\n│       ├── timestamps-and-timezones.md Trade times, \"as of\" stamps, multi-TZ\n│       ├── virtualization.md           Tables 100+ streaming rows, trades tape\n│       ├── chart-interactions.md       Crosshair, zoom/pan, drawing tools, animations\n│       ├── order-entry-and-lifecycle.md  Forms, types, preview, pending→filled states, T\u0026S\n│       ├── alerts-and-disclosures.md   Price alerts, escalation, PDT/wash-sale/options\n│       ├── data-sources-and-freshness.md  Real-time→delayed→stale chain, sources, multi-account\n│       └── heatmaps-and-density-viz.md  Sector heatmap, options color scale, IV surface, correlation\n└── financial-ui-styles/           Aesthetic layer (pick one)\n    ├── SKILL.md\n    └── references/\n        ├── modern-pro-dark.md          TradingView, Kraken Pro, Hyperliquid\n        ├── pro-terminal.md             Bloomberg Terminal, IBKR TWS, ThinkOrSwim\n        ├── tasty-pro.md                TastyTrade\n        ├── crypto-exchange.md          Coinbase Advanced, Binance, Bybit\n        ├── retail-polish-dark.md       Robinhood, Public\n        ├── retail-polish-light.md      Wise, Revolut, Cash App, Monzo\n        ├── editorial-financial.md      Financial Times, Bloomberg.com, WSJ\n        ├── api-dashboard.md            Massive, Stripe, Vercel, Linear\n        ├── defi-native.md              Uniswap, Jupiter, Aave, Phantom\n        ├── apple-native.md             iOS Stocks, macOS Stocks widget\n        └── charts-and-indicators.md    Per-style chart treatments\n```\n\u003cimg width=\"1130\" height=\"370\" alt=\"Screenshot 2026-06-02 at 11 04 37 AM\" src=\"https://github.com/user-attachments/assets/44bcc8d0-3105-44e3-992c-c7002f6d91f8\" /\u003e\n\n\n## How it composes\n\n```\nproduct-design                  general atomic decisions for any SaaS UI\nfinancial-ui-patterns           finance-specific correctness (mandatory)\nfinancial-ui-styles             pick exactly one visual aesthetic\n```\n\u003cimg width=\"1113\" height=\"645\" alt=\"Screenshot 2026-06-02 at 10 48 12 AM\" src=\"https://github.com/user-attachments/assets/b28875c1-1d18-45bc-9720-c029bc8b9224\" /\u003e\n\nUse the patterns layer always. Pick one style per product.\n\n## What it prevents\n\nWithout the skill, agents shipping financial UI typically produce:\n- Raw color values (`text-emerald-400`, `bg-zinc-950`) instead of semantic tokens\n- Numbers without `tabular-nums` so digits jitter on every update\n- Hard-coded dark theme that breaks light mode\n- Broken Tailwind dynamic classes (`bg-${color}-500/10`) that the JIT silently strips\n- Streaming prices that don't flash on tick\n- WebSocket UIs with no staleness, no connection-state indicator, no reconnect strategy\n- Red/green-only signals that fail for color-blind users\n- `toFixed(2)` for every price, breaking both BTC ($100K, no decimals) and SHIB ($0.00001, eight decimals)\n- Generic AI aesthetics that look identical to every other startup dashboard\n\nThe two skills capture the specific patterns Bloomberg, Kraken, TradingView, Coinbase, FT, Robinhood, and others actually ship.\n\n\u003cimg width=\"1117\" height=\"525\" alt=\"Screenshot 2026-06-02 at 10 48 17 AM\" src=\"https://github.com/user-attachments/assets/cb7e450b-68f9-4269-a20b-26e3ce890206\" /\u003e\n\n## Install\n\n**From GitHub:**\n\n```bash\ngit clone https://github.com/rgourley/financial-ui-suite.git\nclaude plugin marketplace add ./financial-ui-suite\n/plugin install financial-ui-suite@financial-ui-suite-dev\n```\n\n**From a local checkout:**\n\n```bash\nclaude plugin marketplace add /path/to/financial-ui-suite\n/plugin install financial-ui-suite@financial-ui-suite-dev\n```\n\nOnce installed, the skills auto-load when Claude detects financial UI work — anything with prices, P\u0026L, order books, tickers, holdings, charts, or streaming market data.\n\n## Scope\n\nCode examples target **React + Tailwind**. The rules (semantic tokens, `tabular-nums`, decimal alignment, tick flash, freshness chain, streaming/state lifecycle, accessibility) are framework-agnostic — translate the JSX/CSS to Svelte, Vue, Solid, or vanilla as needed. Token definitions in CSS variables work everywhere.\n\n\u003cimg width=\"1135\" height=\"566\" alt=\"Screenshot 2026-06-02 at 10 48 24 AM\" src=\"https://github.com/user-attachments/assets/92c2d543-f177-4944-839c-8e9ac2caa09f\" /\u003e\n\n## Usage\n\nAfter installing, no special invocation needed. Triggers:\n\n- *\"build a portfolio holdings table\"* → loads `financial-ui-patterns`\n- *\"design an options chain in TradingView style\"* → loads both skills + `modern-pro-dark` reference\n- *\"make it look like Bloomberg terminal\"* → loads `pro-terminal` reference\n- *\"render an FT-style market wrap\"* → loads `editorial-financial` reference\n\n## Verification\n\nTwo layers:\n\n1. **Agent self-check** — every reference and SKILL.md ships a checklist the agent runs against the produced UI (tabular nums, semantic tokens, tick flash, light theme, etc.).\n2. **Script check** — `scripts/verify-financial-ui.sh \u003cpath\u003e` greps your codebase for the most common anti-patterns (raw `text-green-*`, dynamic Tailwind classes, `toFixed(2)` on prices, hardcoded hex colors, centered numeric columns). Exits 1 on hit.\n\n```bash\n./scripts/verify-financial-ui.sh ../my-app/src\n```\n\nThe skills themselves were built using TDD-for-documentation (see `superpowers:writing-skills`): tested against a baseline subagent rendering without the skill and verified against a subagent rendering with the skill loaded. Verified-distinct output across styles.\n\n## Status\n\nSee [CHANGELOG.md](./CHANGELOG.md) for version history.\n\n## Trademark notice\n\nBrand and product names referenced throughout this project (Bloomberg, TradingView, Kraken, Coinbase, Binance, Robinhood, Public, Financial Times, Wise, Revolut, Cash App, Massive, Stripe, Vercel, Linear, TastyTrade, Uniswap, Apple, and others) are used for illustrative, descriptive, and educational purposes only — to ground each style in a concrete reference. This project is not affiliated with, endorsed by, sponsored by, or in any way officially connected to any of those companies. All trademarks, service marks, and trade names are the property of their respective owners.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frgourley%2Ffinancial-ui-suite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frgourley%2Ffinancial-ui-suite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frgourley%2Ffinancial-ui-suite/lists"}