Claude Code Plugins

Community-maintained marketplace

Feedback

context-ui-design

@stars-end/affordabot
1
0

|

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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