| name | terminal-product-design |
| description | Use when designing or implementing the web interface for this project, especially when the goal is a trading-terminal aesthetic that still feels welcoming, readable, and simple for everyday users, and when agent outputs must be presented clearly inside the product. |
Terminal Product Design
Use this skill when shaping the UI, layout, or interaction model for the product.
Design target
The product should feel like a sharp sports intelligence terminal:
- dense but readable,
- dramatic but not gimmicky,
- technical-looking but easy to learn,
- fast to scan during live events.
UI principles
- Lead with the decision, not decoration.
- Make the most important recommendation obvious within seconds.
- Use panels, grids, status rails, and command-center typography.
- Keep navigation shallow and actions guided.
- Use motion sparingly to emphasize change, not distract.
Suggested visual language
- Dark control-room palette with strong contrast.
- Accent colors tied to state: confidence, risk, freshness, alert.
- Monospaced support typography plus a distinct display face.
- Card surfaces that resemble telemetry panels, not generic SaaS cards.
Required UX elements
- recommendation summary,
- evidence panel,
- confidence and risk indicators,
- last-updated freshness markers,
- change log or diff view,
- clear path to alternative squads or picks.
Anti-patterns
- Do not make users parse raw agent chatter by default.
- Do not overload the landing view with every metric.
- Do not sacrifice mobile usability for terminal aesthetics.
- Do not use "hacker" styling that lowers legibility.
