context-ui-design

UI主题系统、设计令牌、Material-UI模式以及无障碍访问标准。负责主题定制、组件样式设计、设计系统模式以及无障碍功能的实现。当您需要处理UI组件、主题定制、设计系统模式，或无障碍功能时，此工具将助您事半功倍；亦可在用户提及Material-UI、MUI组件、主题令牌、深色模式、组件样式设计、设计系统、无障碍访问、布局问题、样式难题，或ARIA模式时，为您提供专业指导。

SKILL.md

--- frontmatter

name: context-ui-design
description: |
  UI theme system, design tokens, Material-UI patterns, and accessibility standards.
  Handles theme customization, component styling, design system patterns, and accessibility features.
  Use when working with UI components, theme customization, design system patterns, or accessibility features,
  or when user mentions Material-UI, MUI components, theme tokens, dark mode, component styling,
  design system, accessibility, layout issues, styling problems, or ARIA patterns.
tags: [ui, design, frontend, accessibility]

UI Design

Navigate UI theme system, design tokens, Material-UI patterns, and accessibility.

Overview

Design system and UI consistency for fintech application.

Theme System

•frontend/src/theme/createPrimeRadiantTheme.ts - Theme factory
•frontend/src/theme/primeRadiantTokens.ts - Design tokens

UI Components

•frontend/src/ui/primeRadiant/ - Prime Radiant UI components
•Material-UI customizations

Component Patterns

•Search for Modal, Dialog, Button, Card in frontend/src/components/
•Form patterns
•Layout patterns

Accessibility

•ARIA patterns
•Keyboard navigation
•Screen reader support

Responsive Design

•Breakpoints
•Mobile-first patterns

Documentation

•Internal: docs/design/UI_SYSTEM.md (create if needed)
•Internal: docs/design/ACCESSIBILITY.md (create if needed)

Related Areas

•See context-analytics for analytics UI
•See context-portfolio for portfolio UI
•See context-brokerage for brokerage UI