context-ui-design

stars-end's avatarfrom stars-end

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.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 2, 2026
[Architecture Design]

When & Why to Use This Skill

The context-ui-design skill is a specialized tool for frontend engineers and architects focused on building scalable, accessible, and consistent user interfaces. It provides deep integration with Material-UI (MUI) patterns, design tokens, and theme systems, ensuring that every component aligns with professional design standards. By automating the complexities of ARIA patterns, responsive breakpoints, and theme customization, this skill empowers developers to maintain a high-quality design system while accelerating the delivery of fintech-grade UI components.

Use Cases

  • Theme & Design Token Management: Implement and maintain a centralized theme factory and design tokens to ensure visual consistency across the entire application.
  • Material-UI Pattern Implementation: Streamline the development of complex UI elements like Modals, Dialogs, and Cards using optimized MUI patterns.
  • Accessibility & ARIA Compliance: Ensure all UI components meet accessibility standards through proper ARIA patterns, keyboard navigation, and screen reader support.
  • Responsive Layout Engineering: Apply mobile-first design principles and manage breakpoints to create a seamless user experience across all screen sizes.
  • UI System Documentation: Automatically generate and update internal documentation for UI systems and accessibility guidelines to keep the team aligned.
namecontext-ui-design
description|
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)
  • See context-analytics for analytics UI
  • See context-portfolio for portfolio UI
  • See context-brokerage for brokerage UI