Agent skill

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.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/context-ui-design

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results