ui-design
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
View on GitHubTable of content
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Installation
npx claude-plugins install @wshobson/claude-code-workflows/ui-design
Contents
Folders: agents, commands, skills
Files: README.md
Documentation
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
/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
Included Skills
This plugin includes 5 skill definitions:
accessibility-compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
View skill definition
Accessibility Compliance
Master accessibility implementation to create inclusive experiences that work for everyone, including users with disabilities.
When to Use This Skill
- Implementing WCAG 2.2 Level AA or AAA compliance
- Building screen reader accessible interfaces
- Adding keyboard navigation to interactive components
- Implementing focus management and focus trapping
- Creating accessible forms with proper labeling
- Supporting reduced motion and high contrast preferences
- Building mobile accessibility features (iOS VoiceOver, Android TalkBack)
- Conducting accessibility audits and fixing violations
Core Capabilities
1. WCAG 2.2 Guidelines
- Perceivable: Content must be presentable in different ways
- Operable: Interface must be navigable with keyboard and assistive tech
- Understandable: Content and operation must be clear
- Robust: Content must work with current and future assistive technologies
2. ARIA Patterns
- Roles: Define element purpose (button, dialog, navigation)
- States: Indicate current condition (expanded, selected, disabled)
- Properties: Describe relationships and additional info (labelledby, describedby)
- Live regions: Announce dynamic content changes
3. Keyboard Navigation
- Focus order and tab sequence
- Focus indicators and visible focus states
- Keyboard shortcuts and hotkeys
- Focus trapping for modals and dialogs
4. Screen Reader Support
- Semantic HTML structure
- Alternative text for images
- Proper head
…(truncated)
design-system-patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
View skill definition
Design System Patterns
Master design system architecture to create consistent, maintainable, and scalable UI foundations across web and mobile applications.
When to Use This Skill
- Creating design tokens for colors, typography, spacing, and shadows
- Implementing light/dark theme switching with CSS custom properties
- Building multi-brand theming systems
- Architecting component libraries with consistent APIs
- Establishing design-to-code workflows with Figma tokens
- Creating semantic token hierarchies (primitive, semantic, component)
- Setting up design system documentation and guidelines
Core Capabilities
1. Design Tokens
- Primitive tokens (raw values: colors, sizes, fonts)
- Semantic tokens (contextual meaning: text-primary, surface-elevated)
- Component tokens (specific usage: button-bg, card-border)
- Token naming conventions and organization
- Multi-platform token generation (CSS, iOS, Android)
2. Theming Infrastructure
- CSS custom properties architecture
- Theme context providers in React
- Dynamic theme switching
- System preference detection (prefers-color-scheme)
- Persistent theme storage
- Reduced motion and high contrast modes
3. Component Architecture
- Compound component patterns
- Polymorphic components (as prop)
- Variant and size systems
- Slot-based composition
- Headless UI patterns
- Style props and responsive variants
4. Token Pipeline
- Figma to code synchronization
- Style Dictionary configuration
- Token transfo
…(truncated)
interaction-design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
View skill definition
Interaction Design
Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users.
When to Use This Skill
- Adding microinteractions to enhance user feedback
- Implementing smooth page and component transitions
- Designing loading states and skeleton screens
- Creating gesture-based interactions
- Building notification and toast systems
- Implementing drag-and-drop interfaces
- Adding scroll-triggered animations
- Designing hover and focus states
Core Principles
1. Purposeful Motion
Motion should communicate, not decorate:
- Feedback: Confirm user actions occurred
- Orientation: Show where elements come from/go to
- Focus: Direct attention to important changes
- Continuity: Maintain context during transitions
2. Timing Guidelines
| Duration | Use Case |
|---|---|
| 100-150ms | Micro-feedback (hovers, clicks) |
| 200-300ms | Small transitions (toggles, dropdowns) |
| 300-500ms | Medium transitions (modals, page changes) |
| 500ms+ | Complex choreographed animations |
3. Easing Functions
/* Common easings */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */
--ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */
--spring: cubic-bezier(0
...(truncated)
</details>
### mobile-android-design
> Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
<details>
<summary>View skill definition</summary>
# Android Mobile Design
Master Material Design 3 (Material You) and Jetpack Compose to build modern, adaptive Android applications that integrate seamlessly with the Android ecosystem.
## When to Use This Skill
- Designing Android app interfaces following Material Design 3
- Building Jetpack Compose UI and layouts
- Implementing Android navigation patterns (Navigation Compose)
- Creating adaptive layouts for phones, tablets, and foldables
- Using Material 3 theming with dynamic colors
- Building accessible Android interfaces
- Implementing Android-specific gestures and interactions
- Designing for different screen configurations
## Core Concepts
### 1. Material Design 3 Principles
**Personalization**: Dynamic color adapts UI to user's wallpaper
**Accessibility**: Tonal palettes ensure sufficient color contrast
**Large Screens**: Responsive layouts for tablets and foldables
**Material Components:**
- Cards, Buttons, FABs, Chips
- Navigation (rail, drawer, bottom nav)
- Text fields, Dialogs, Sheets
- Lists, Menus, Progress indicators
### 2. Jetpack Compose Layout System
**Column and Row:**
```kotlin
// Vertical arrangement with alignment
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(12.dp),
horizontalAlignment = Alignment.Start
) {
Text(
text = "Title",
style = MaterialTheme.typography.headlineSmall
)
Text(
text = "Subtitle",
style = MaterialTheme.typography.bodyMedium,
...(truncated)
</details>
### mobile-ios-design
> Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
<details>
<summary>View skill definition</summary>
# iOS Mobile Design
Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.
## When to Use This Skill
- Designing iOS app interfaces following Apple HIG
- Building SwiftUI views and layouts
- Implementing iOS navigation patterns (NavigationStack, TabView, sheets)
- Creating adaptive layouts for iPhone and iPad
- Using SF Symbols and system typography
- Building accessible iOS interfaces
- Implementing iOS-specific gestures and interactions
- Designing for Dynamic Type and Dark Mode
## Core Concepts
### 1. Human Interface Guidelines Principles
**Clarity**: Content is legible, icons are precise, adornments are subtle
**Deference**: UI helps users understand content without competing with it
**Depth**: Visual layers and motion convey hierarchy and enable navigation
**Platform Considerations:**
- **iOS**: Touch-first, compact displays, portrait orientation
- **iPadOS**: Larger canvas, multitasking, pointer support
- **visionOS**: Spatial computing, eye/hand input
### 2. SwiftUI Layout System
**Stack-Based Layouts:**
```swift
// Vertical stack with alignment
VStack(alignment: .leading, spacing: 12) {
Text("Title")
.font(.headline)
Text("Subtitle")
.font(.subheadline)
.foregroundStyle(.secondary)
}
// Horizontal stack with flexible spacing
HStack {
Image(systemName: "star.fill")
Text("Featured")
Spacer()
Text("View All")
.fore
...(truncated)
</details>
## Source
[View on GitHub](https://github.com/wshobson/agents)