ui-design_skill

Overview

This skill teaches how to design premium dark-mode user interfaces for a Rust application using egui. It focuses on a financial, professional aesthetic, practical component patterns, and performance-conscious rendering. The guidance covers colors, layout patterns, card styling, and where UI code should live.

How this skill works

The skill inspects and prescribes UI structure and visual rules to implement in egui-based views and components. It provides concrete patterns: where to place components, how to compose layouts with egui helpers, and a reusable card/frame style for content surfaces. It also enforces separation of rendering from business logic and gives thread-safety recommendations for long-running tasks.

When to use it

• Creating new egui views or reusable components for the app
• Refactoring or extending existing layouts to match the theme
• Applying consistent dark-mode styling across windows, panels, and cards
• Improving UX details like hover feedback, spacing, and hierarchy
• Ensuring UI code follows performance and threading best practices

Best practices

• Keep UI components in src/interfaces/ and pass minimal data to render functions
• Use egui layout helpers: horizontal, vertical, Grid, and allocate_ui for sizing
• Implement a reusable Card pattern with egui::Frame for consistent surfaces
• Do not block the UI thread; delegate heavy work to agents or channels
• Avoid hardcoding colors everywhere—use style visuals or central constants
• Use ui.add_enabled and ui.push_id to handle interactivity and ID collisions

Example use cases

• Add a new strategy dashboard panel using the Card pattern and Grid for aligned metrics
• Refactor the trading control toolbar to ui.horizontal with clear hover states
• Create a responsive order entry form using allocate_ui and consistent margins
• Theme all panels to the premium dark palette and verify contrast and readability
• Replace a blocking calculation in update() with an async agent and channel