ui-design — Claude Code plugin: what it does, how to install

# UI/UX Design Plugin for Claude Code

Comprehensive UI/UX design plugin covering mobile (iOS, Android, React Native) and web applications with modern design patterns, accessibility, and design systems.

## Features

### Core Capabilities

- **Design Systems**: Token architecture, theming, multi-brand systems
- **Accessibility**: WCAG 2.2 compliance, inclusive design patterns
- **Responsive Design**: Container queries, fluid layouts, breakpoints
- **Mobile Design**: iOS HIG, Material Design 3, React Native patterns
- **Web Components**: React/Vue/Svelte patterns, CSS-in-JS
- **Interaction Design**: Microinteractions, motion, transitions

## Skills

| Skill                       | Description                                      |
| --------------------------- | ------------------------------------------------ |
| `design-system-patterns`    | Design tokens, theming, component architecture   |
| `accessibility-compliance`  | WCAG 2.2, mobile a11y, inclusive design          |
| `responsive-design`         | Container queries, fluid layouts, breakpoints    |
| `mobile-ios-design`         | iOS Human Interface Guidelines, SwiftUI patterns |
| `mobile-android-design`     | Material Design 3, Jetpack Compose patterns      |
| `react-native-design`       | React Native styling, navigation, animations     |
| `web-component-design`      | React/Vue/Svelte component patterns, CSS-in-JS   |
| `interaction-design`        | Microinteractions, motion design, transitions    |
| `visual-design-foundations` | Typography, color theory, spacing, iconography   |

## Agents

| Agent                     | Description                                                  |
| ------------------------- | ------------------------------------------------------------ |
| `ui-designer`             | Proactive UI design, component creation, layout optimization |
| `accessibility-expert`    | A11y analysis, WCAG compliance, remediation                  |
| `design-system-architect` | Design token systems, component libraries, theming           |

## Commands

| Command                          | Description                                    |
| -------------------------------- | ---------------------------------------------- |
| `/ui-design:design-review`       | Review existing UI for issues and improvements |
| `/ui-design:create-component`    | Guided component creation with proper patterns |
| `/ui-design:accessibility-audit` | Audit UI code for WCAG compliance              |
| `/ui-design:design-system-setup` | Initialize a design system with tokens         |

## Installation

```bash
/plugin install ui-design
```

## Usage Examples

### Design Review

```
/ui-design:design-review --file src/components/Button.tsx
```

### Create Component

```
/ui-design:create-component Card --platform react
```

### Accessibility Audit

```
/ui-design:accessibility-audit --level AA
```

### Design System Setup

```
/ui-design:design-system-setup --name "Acme Design System"
```

## Key Technologies Covered

### Web

- CSS Grid, Flexbox, Container Queries
- Tailwind CSS, CSS-in-JS (Styled Components, Emotion)
- React, Vue, Svelte component patterns
- Framer Motion, GSAP animations

### Mobile

- **iOS**: SwiftUI, UIKit, Human Interface Guidelines
- **Android**: Jetpack Compose, Material Design 3
- **React Native**: StyleSheet, Reanimated, React Navigation

### Design Systems

- Design tokens (Style Dictionary, Figma Variables)
- Component libraries (Storybook documentation)
- Multi-brand theming

### Accessibility

- WCAG 2.2 AA/AAA compliance
- ARIA patterns and semantic HTML
- Screen reader compatibility
- Keyboard navigation

## Generated Artifacts

The plugin creates artifacts in `.ui-design/`:

```
.ui-design/
├── design-system.config.json    # Design system configuration
├── component_specs/             # Generated component specifications
├── audit_reports/               # Accessibility audit reports
└── tokens/                      # Generated design tokens
```

## Requirements

- Claude Code CLI
- Node.js 18+ (for design token generation)

## License

MIT License