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 GitHub
Author Seth Hobson
Namespace @wshobson/claude-code-workflows
Category development
Version 1.0.1
Stars 27,261
Downloads 5
self.md verified
Table 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

Skills

SkillDescription
design-system-patternsDesign tokens, theming, component architecture
accessibility-complianceWCAG 2.2, mobile a11y, inclusive design
responsive-designContainer queries, fluid layouts, breakpoints
mobile-ios-designiOS Human Interface Guidelines, SwiftUI patterns
mobile-android-designMaterial Design 3, Jetpack Compose patterns
react-native-designReact Native styling, navigation, animations
web-component-designReact/Vue/Svelte component patterns, CSS-in-JS
interaction-designMicrointeractions, motion design, transitions
visual-design-foundationsTypography, color theory, spacing, iconography

Agents

AgentDescription
ui-designerProactive UI design, component creation, layout optimization
accessibility-expertA11y analysis, WCAG compliance, remediation
design-system-architectDesign token systems, component libraries, theming

Commands

CommandDescription
/ui-design:design-reviewReview existing UI for issues and improvements
/ui-design:create-componentGuided component creation with proper patterns
/ui-design:accessibility-auditAudit UI code for WCAG compliance
/ui-design:design-system-setupInitialize 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

Mobile

Design Systems

Accessibility

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

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

Core Capabilities

1. WCAG 2.2 Guidelines

2. ARIA Patterns

3. Keyboard Navigation

4. Screen Reader Support

…(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

Core Capabilities

1. Design Tokens

2. Theming Infrastructure

3. Component Architecture

4. Token Pipeline

…(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

Core Principles

1. Purposeful Motion

Motion should communicate, not decorate:

2. Timing Guidelines

DurationUse Case
100-150msMicro-feedback (hovers, clicks)
200-300msSmall transitions (toggles, dropdowns)
300-500msMedium 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)