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.
npx skills add rgourley/financial-ui-suite --skill financial-ui-patternsgit clone --depth 1 https://github.com/rgourley/financial-ui-suiteWrote 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.
[](https://agentmods.dev/skills/rgourley/financial-ui-suite/financial-ui-patterns)<a href="https://agentmods.dev/skills/rgourley/financial-ui-suite/financial-ui-patterns"><img src="https://agentmods.dev/badge/skills/rgourley/financial-ui-suite/financial-ui-patterns/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/rgourley/financial-ui-suite/financial-ui-patterns"><img src="https://agentmods.dev/badge/skills/rgourley/financial-ui-suite/financial-ui-patterns.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00061 | $0.03412 |
| Opus 5 | $0.00030 | $0.01706 |
| Sonnet 5 | $0.00012 | $0.00682 |
| Haiku 4.5 | $0.00006 | $0.00341 |
Grade A, and why
financial-ui-patterns 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 10d 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.
How it starts
The opening of the file, as written. The whole thing — 269 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Financial UI Patterns
Overview
Generic AI output for financial UIs fails in predictable ways: raw color values instead of design tokens, jittery non-tabular numbers, no decimal alignment, missing tick-flash on updates, hard-coded dark theme, broken Tailwind dynamic classes, no streaming/staleness states, no accessibility for color-blind users.
This skill codifies the patterns that production trading UIs (Kraken, Coinbase, TradingView, Bloomberg Terminal, Robinhood, Binance) actually ship.
Core principle: numbers must be legible, aligned, and trustworthy. Color is a signal, not decoration. Latency must be visible. Every digit shift is a failure.
When to Use
- Tables with prices, P&L, holdings, positions, orders, fills, trades
- Order books, depth charts, ladders
- Watchlists, tickers, market overviews
- Streaming/live data of any kind
- Portfolio screens, transaction history
- Charts with OHLC, candlesticks, sparklines
- Any UI showing money, percentages, basis points, or quantities
Don't use for: marketing pages, blog posts, generic product UI without numbers.
Quick Reference
| Concern | Rule |
|---|---|
| Number rendering | Always tabular-nums. Never let digits reflow. |
| Number alignment | Right-align in tables. Decimal-align when precision varies. |
| Ticker/ID display | Use font-mono (JetBrains Mono, Roboto Mono, IBM Plex Mono). |
| Colors | Semantic tokens only (text-positive, text-negative). Never text-green-500. |
| Theme | Light + dark via CSS variables. Never hard-code surface colors. |
| Tick flash | 300-500ms tinted background on price update. CSS only, no JS animation. |
| P&L sign | Always show + for positive returns. - is automatic on negatives. |
| Tailwind dynamic | NEVER bg-${color}-500/10. Use static class maps. |
| Streaming state | Show connecting / live / stale / disconnected explicitly. |
| Accessibility | Pair color with icon, position, or shape. Never color alone. |
| Decimals | Crypto: dynamic precision by price magnitude. Stocks: 2 dp. FX: 4-5 dp. |
| Large numbers | Compact notation (1.2B, 847M) for caps/volume, not for prices/balances. |
| Density | Default to compact. 32-40px row height in tables. 24-28px in order books. |
What ships with it
17 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.
- references/accessibility.md 6.6 KB
- references/alerts-and-disclosures.md 3.6 KB
- references/chart-interactions.md 3.1 KB
- references/charts-and-candles.md 7.3 KB
- references/components.md 16 KB
- references/data-sources-and-freshness.md 3.4 KB
- references/empty-and-error-states.md 3.0 KB
- references/heatmaps-and-density-viz.md 3.6 KB
- references/industry-patterns.md 7.7 KB
- references/loading-and-skeletons.md 2.0 KB
- references/mobile-and-responsive.md 12 KB
- references/number-formatting.md 5.6 KB
- references/order-entry-and-lifecycle.md 3.8 KB
- references/streaming-and-state.md 9.0 KB
- references/timestamps-and-timezones.md 2.7 KB
- references/typography-and-color.md 7.8 KB
- references/virtualization.md 2.9 KB
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.
- 10d ago First seen · 269 lines · 61 tokens per session scan A f7053d235a03
financial-ui-patterns is a skill published in the GitHub repository rgourley/financial-ui-suite (6 stars, last pushed 27d ago), licensed MIT. It adds 61 tokens to every session and 3,412 once invoked, about $0.0003 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-31.
Other skills, from other repositories
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
business-design
Read financials, map competitive landscapes, and argue design decisions in the language of value. Use when defending design to commercial stakeholders. For the live negotiation itself, use design-negotiation (designer-toolkit).
fundraising-and-investor-relations
Raises capital and manages the relationship afterward — deciding how much and why, understanding what dilution and preferences actually cost, running a process with real competitive tension, preparing for diligence before it starts, and reporting to investors and a board in a way that keeps support when results are…
chief-financial-officer
Owns the financial position: planning, budgeting, forecasting, unit economics, cash, and the numbers the business is run and reported on. Use this to build or challenge a budget, model a decision's financial consequence, assess unit economics or runway, evaluate an investment or spend request, set financial controls…
internal-controls-and-audit
Designs and tests controls over financial reporting — segregation of duties, approval limits, evidence, and preparing for audit. Use this to design controls for a process, prepare for an external audit, respond to an audit finding, set approval thresholds, or assess where a small team's segregation of duties is…
capital-structure-and-covenants
Decides how the business is financed and what that financing then requires of it — debt versus equity, weighted average cost of capital as a hurdle rate, how much leverage cash flow can carry, and the financial, affirmative and negative covenants, definitions, test dates and cure rights that come attached. Use this to…