trading-terminal

Generates Bloomberg-style dark trading terminal design system guidance with tokens and component rules.

Updated Jun 20, 2026
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill trading-terminal-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trading-terminal
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/trading-terminal
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill trading-terminal-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a professional financial trading terminal interface requires consistent dark-only surfaces, color-coded buy/sell signals, and dense tabular layouts; this Skill provides an authoritative design system so engineers and designers produce consistent, implementation-ready UI without inventing ad-hoc styles. ## Core Features & Use Cases - Design Tokens & Foundations: Provides the full palette (#0D0D0D background, #00D4AA buy, #FF4757 sell), typography scale (JetBrains Mono for data, Inter for labels), and spacing tokens as CSS variables. - Component Rules: Defines order book rows, price cards, and ticker bars with explicit states, grid layouts, and flat border-based elevation. - Accessibility & QA Gates: Enforces WCAG 2.2 AA, keyboard-first interactions, testable acceptance criteria, and a code-review QA checklist. - Use Case: When building a market monitoring dashboard, use this Skill to generate component-level guidance so every price change is monospace, color-coded, and readable at a glance. ## Quick Start Use the trading-terminal skill to generate design-system guidance for a dark, data-dense crypto price dashboard with an order book and ticker bar.

Frequently Asked Questions about trading-terminal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a Bloomberg-style trading terminal UI?▼

Use dark-only surfaces (#0D0D0D background, #141414 panels), monospace fonts for all numeric data, and cyan (#00D4AA) for gains versus coral (#FF4757) for losses. Keep layouts tabular with sharp corners and border-based panel separation instead of shadows.

What colors should I use for buy and sell signals in a trading dashboard?▼

Use #00D4AA (cyan-green) for buy signals and positive price movement, and #FF4757 (coral-red) for sell signals and losses. Always pair color with a directional icon or label so meaning never depends on color alone.

Which fonts work best for financial data tables?▼

JetBrains Mono is recommended for all numeric data, prices, and timestamps because tabular figures align in columns. Inter is used for headings and uppercase labels to keep metadata visually distinct from data.

Does a trading terminal design system support light mode?▼

No. This system is dark-only by design because trading terminals operate in dim environments for focus, and dark surfaces reduce eye strain during long monitoring sessions. No breakpoints alter the dark-only constraint.

How should trading terminal layouts behave on mobile screens?▼

Layouts target desktop-first at 1280px and above. On narrower viewports, columns collapse from rightmost to leftmost prioritizing price and change data, and below 768px the layout becomes a single-column stack with horizontal scroll for overflow.