context-ui-design

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.

$ 安裝

git clone https://github.com/stars-end/affordabot /tmp/affordabot && cp -r /tmp/affordabot/.claude/skills/context-ui-design ~/.claude/skills/affordabot

// tip: Run this command in your terminal to install the skill

SKILL.md

View on GitHub →

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