skills.rest
zhu637882-stack
zhu637882-stackCOMMUNITY
Explore all skills by this author →
GitHub

trading-ui-design

Creates finance-trading UI designs for professional desktop and mobile interfaces.

1|Updated Apr 6, 2026
Search Tags:#ui-design#design-system#responsive-design#color-tokens#dark-theme#trading-ui#kline-chart
One-click install
npx skills add https://github.com/zhu637882-stack/jiaoyi --skill trading-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trading-ui-design
Source: https://github.com/zhu637882-stack/jiaoyi/tree/main/.qoder/skills/trading-ui-design
Command: npx skills add https://github.com/zhu637882-stack/jiaoyi --skill trading-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a cohesive design system and practical patterns for building finance-trading user interfaces, ensuring visual consistency, accessible contrast, and efficient collaboration across teams.

Core Features & Use Cases

  • Dark-theme color tokens for backgrounds, surfaces, text, and semantic indicators (up/down, warning, info).
  • Standardized UI components: cards, glass panels, data tables, and badges tailored for trading workflows.
  • Layout and chart guidance for trading dashboards (three-column desktop layout, mobile stacking, K-line charts, order books, and depth panels).

Quick Start

Apply the design system tokens and component patterns to create a consistent trading UI for a new dashboard prototype.

Frequently Asked Questions about trading-ui-design

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

FAQPage Schema
How do I design a professional trading dashboard UI with K-line charts?▼

To design a professional trading dashboard UI, use a cohesive design system featuring dark-theme color tokens, standardized components, and responsive three-column layouts configured for K-line charts and order books.

What color tokens are needed for a finance trading interface?▼

A finance trading interface requires dark-theme color tokens for backgrounds, surfaces, text, and semantic indicators like up/down market movements, warnings, and info to ensure accessible contrast and visual consistency.

Can I use this trading UI design system for responsive mobile dashboards?▼

Yes, the trading UI design system supports responsive mobile dashboards by applying responsive breakpoints and mobile stacking patterns while maintaining visual consistency across desktop and mobile trading interfaces.

What are the standard UI components for a crypto or stock trading dashboard?▼

Standard UI components for a trading dashboard include cards, glass panels, data tables, and badges tailored for trading workflows, ensuring efficient collaboration and cohesive design across teams.

How do I ensure accessible contrast in a dark theme trading UI?▼

Ensure accessible contrast in a dark theme trading UI by applying predefined semantic color tokens for backgrounds, surfaces, and text, which satisfy design-system requirements for professional finance dashboards.

Does this design pattern support order books and depth panels?▼

Yes, this design pattern supports order books and depth panels by providing specific layout and chart guidance for trading dashboards, integrating seamlessly with charting libraries for desktop and mobile interfaces.

Related Skills

Explore More Design & Creative Skills→
JaylaelikeJaylaelike

premium-ui-systems

Codify design tokens for spacing, radii, color, and typography into reusable UI guidelines.

Community
Advanced
TairitsuaTairitsua
13

mo-ui-design

Create interactive HTML prototypes for MudBlazor/Blazor UI designs.

Community
Intermediate
TickDBTickDB
652

tickdb-market-data

Retrieve real-time and historical market data across multiple asset classes via one API.

Community
Advanced
modus-bimodus-bi

bi-visualization-expert

Identify optimal chart types and dashboard layouts for BI analytics.

Official
Advanced