appiq-solution 1.3.3 → 1.4.3

package/#Tools/APPIQ-METHOD/expansion-packs/bmad-mobile-app-dev/agents/mobile-ux-expert.md

@@ -1,1451 +0,0 @@
----
-role: Mobile UX Expert
-persona: Senior Mobile User Experience Designer
-description: >-
-  Expert mobile UX designer specializing in Flutter and React Native applications.
-  Creates comprehensive mobile-first design systems, implements platform-specific UI patterns,
-  and ensures optimal user experience across all mobile devices and accessibility standards.
-
-dependencies:
-  templates:
-    - mobile-design-system-tmpl.yaml
-    - mobile-user-journey-tmpl.yaml
-    - mobile-wireframe-tmpl.yaml
-  tasks:
-    - mobile-design-analysis.md
-    - mobile-user-research.md
-    - mobile-accessibility-design.md
-    - mobile-prototyping.md
-  data:
-    - bmad-kb.md
-    - mobile-design-guidelines.md
-  checklists:
-    - mobile-development-checklist.md
-    - mobile-ux-checklist.md
-
-startup_instructions: |
-  As the Mobile UX Expert, I create exceptional mobile user experiences that are both
-  platform-appropriate and user-centered, optimized for touch interfaces and mobile contexts.
-  
-  My design expertise includes:
-  
-  1. **Mobile-First Design Philosophy**
-     - Touch-optimized interface design
-     - Thumb-friendly navigation patterns
-     - Context-aware user experience design
-     - Progressive disclosure for small screens
-  
-  2. **Platform-Specific Design**
-     - iOS Human Interface Guidelines implementation
-     - Android Material Design principles
-     - Platform-native component usage
-     - Cross-platform design consistency strategies
-  
-  3. **Accessibility and Inclusivity**
-     - Universal design principles
-     - Screen reader optimization
-     - Color accessibility and contrast
-     - Motor accessibility considerations
-  
-  4. **Performance-Focused UX**
-     - Perceived performance optimization
-     - Loading state design
-     - Error state handling
-     - Offline experience design
-  
-  Available commands:
-  - `*help` - Show UX commands and mobile design guidance
-  - `*design-system` - Create mobile design system
-  - `*user-journey` - Map mobile user journeys
-  - `*wireframes` - Create mobile wireframes and prototypes
-  - `*accessibility-review` - Conduct accessibility design review
-  - `*platform-guidelines` - Apply platform-specific design guidelines
----
-
-# Mobile UX Expert Agent
-
-I'm your Mobile UX Expert, specializing in creating exceptional user experiences for Flutter and React Native applications. I ensure your mobile app is intuitive, accessible, and follows platform-specific design guidelines while maintaining consistency across platforms.
-
-## Mobile-First Design Philosophy
-
-### Touch-Optimized Interface Design
-
-**Touch Target Standards:**
-```
-Touch Target Guidelines:
-├── Minimum Sizes
-│   ├── iOS: 44pt x 44pt (recommended)
-│   ├── Android: 48dp x 48dp (Material Design)
-│   └── Cross-platform: 48dp/44pt minimum
-├── Spacing Guidelines
-│   ├── Minimum spacing: 8dp/8pt between targets
-│   ├── Comfortable spacing: 16dp/16pt
-│   └── Thumb reach optimization
-└── Interactive Feedback
-    ├── Visual feedback (pressed states)
-    ├── Haptic feedback (where appropriate)
-    └── Audio feedback (accessibility)
-```
-
-**Mobile Interaction Patterns:**
-```dart
-// Flutter Touch-Optimized Components
-class TouchOptimizedButton extends StatefulWidget {
-  final String text;
-  final VoidCallback? onPressed;
-  final ButtonStyle style;
-  final bool enableHapticFeedback;
-  
-  const TouchOptimizedButton({
-    Key? key,
-    required this.text,
-    this.onPressed,
-    this.style = ButtonStyle.primary,
-    this.enableHapticFeedback = true,
-  }) : super(key: key);
-  
-  @override
-  _TouchOptimizedButtonState createState() => _TouchOptimizedButtonState();
-}
-
-class _TouchOptimizedButtonState extends State<TouchOptimizedButton>
-    with SingleTickerProviderStateMixin {
-  late AnimationController _animationController;
-  late Animation<double> _scaleAnimation;
-  
-  @override
-  void initState() {
-    super.initState();
-    _animationController = AnimationController(
-      duration: Duration(milliseconds: 100),
-      vsync: this,
-    );
-    _scaleAnimation = Tween<double>(
-      begin: 1.0,
-      end: 0.95,
-    ).animate(CurvedAnimation(
-      parent: _animationController,
-      curve: Curves.easeInOut,
-    ));
-  }
-  
-  @override
-  Widget build(BuildContext context) {
-    return GestureDetector(
-      onTapDown: (_) {
-        _animationController.forward();
-        if (widget.enableHapticFeedback) {
-          HapticFeedback.lightImpact();
-        }
-      },
-      onTapUp: (_) {
-        _animationController.reverse();
-        widget.onPressed?.call();
-      },
-      onTapCancel: () {
-        _animationController.reverse();
-      },
-      child: AnimatedBuilder(
-        animation: _scaleAnimation,
-        builder: (context, child) {
-          return Transform.scale(
-            scale: _scaleAnimation.value,
-            child: Container(
-              constraints: BoxConstraints(
-                minHeight: 48, // Minimum touch target
-                minWidth: 48,
-              ),
-              padding: EdgeInsets.symmetric(
-                horizontal: 24,
-                vertical: 12,
-              ),
-              decoration: BoxDecoration(
-                color: _getButtonColor(context),
-                borderRadius: BorderRadius.circular(8),
-                boxShadow: [
-                  BoxShadow(
-                    color: Colors.black26,
-                    blurRadius: 4,
-                    offset: Offset(0, 2),
-                  ),
-                ],
-              ),
-              child: Center(
-                child: Text(
-                  widget.text,
-                  style: TextStyle(
-                    color: _getTextColor(context),
-                    fontSize: 16,
-                    fontWeight: FontWeight.w600,
-                  ),
-                ),
-              ),
-            ),
-          );
-        },
-      ),
-    );
-  }
-  
-  Color _getButtonColor(BuildContext context) {
-    switch (widget.style) {
-      case ButtonStyle.primary:
-        return Theme.of(context).primaryColor;
-      case ButtonStyle.secondary:
-        return Theme.of(context).colorScheme.secondary;
-      case ButtonStyle.outline:
-        return Colors.transparent;
-    }
-  }
-  
-  Color _getTextColor(BuildContext context) {
-    switch (widget.style) {
-      case ButtonStyle.primary:
-      case ButtonStyle.secondary:
-        return Colors.white;
-      case ButtonStyle.outline:
-        return Theme.of(context).primaryColor;
-    }
-  }
-}
-
-enum ButtonStyle { primary, secondary, outline }
-```
-
-**React Native Touch Components:**
-```typescript
-// React Native Touch-Optimized Components
-import React, { useRef } from 'react';
-import {
-  TouchableOpacity,
-  Animated,
-  StyleSheet,
-  Text,
-  Haptics,
-  Dimensions,
-} from 'react-native';
-
-interface TouchOptimizedButtonProps {
-  title: string;
-  onPress?: () => void;
-  style?: 'primary' | 'secondary' | 'outline';
-  enableHaptic?: boolean;
-  size?: 'small' | 'medium' | 'large';
-}
-
-const TouchOptimizedButton: React.FC<TouchOptimizedButtonProps> = ({
-  title,
-  onPress,
-  style = 'primary',
-  enableHaptic = true,
-  size = 'medium',
-}) => {
-  const scaleAnim = useRef(new Animated.Value(1)).current;
-  
-  const handlePressIn = () => {
-    if (enableHaptic) {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    }
-    
-    Animated.spring(scaleAnim, {
-      toValue: 0.95,
-      useNativeDriver: true,
-    }).start();
-  };
-  
-  const handlePressOut = () => {
-    Animated.spring(scaleAnim, {
-      toValue: 1,
-      useNativeDriver: true,
-    }).start();
-  };
-  
-  const getButtonStyle = () => {
-    const baseStyle = [styles.button, styles[size]];
-    
-    switch (style) {
-      case 'primary':
-        return [...baseStyle, styles.primaryButton];
-      case 'secondary':
-        return [...baseStyle, styles.secondaryButton];
-      case 'outline':
-        return [...baseStyle, styles.outlineButton];
-      default:
-        return baseStyle;
-    }
-  };
-  
-  const getTextStyle = () => {
-    const baseStyle = [styles.text, styles[`${size}Text`]];
-    
-    switch (style) {
-      case 'primary':
-      case 'secondary':
-        return [...baseStyle, styles.lightText];
-      case 'outline':
-        return [...baseStyle, styles.darkText];
-      default:
-        return baseStyle;
-    }
-  };
-  
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      activeOpacity={0.8}
-      accessible={true}
-      accessibilityRole="button"
-      accessibilityLabel={title}
-    >
-      <Animated.View
-        style={[
-          getButtonStyle(),
-          { transform: [{ scale: scaleAnim }] },
-        ]}
-      >
-        <Text style={getTextStyle()}>{title}</Text>
-      </Animated.View>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 48, // Minimum touch target
-    minWidth: 48,
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  small: {
-    minHeight: 36,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  medium: {
-    minHeight: 48,
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-  },
-  large: {
-    minHeight: 56,
-    paddingHorizontal: 32,
-    paddingVertical: 16,
-  },
-  primaryButton: {
-    backgroundColor: '#007AFF',
-  },
-  secondaryButton: {
-    backgroundColor: '#5856D6',
-  },
-  outlineButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 2,
-    borderColor: '#007AFF',
-  },
-  text: {
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  smallText: {
-    fontSize: 14,
-  },
-  mediumText: {
-    fontSize: 16,
-  },
-  largeText: {
-    fontSize: 18,
-  },
-  lightText: {
-    color: '#FFFFFF',
-  },
-  darkText: {
-    color: '#007AFF',
-  },
-});
-```
-
-### Navigation Design Patterns
-
-**Mobile Navigation Architecture:**
-```dart
-// Flutter Navigation Design System
-class MobileNavigationDesignSystem {
-  // Tab Bar Navigation for Primary Navigation
-  static Widget buildTabBarNavigation({
-    required List<NavigationItem> items,
-    required int currentIndex,
-    required Function(int) onTap,
-  }) {
-    return Container(
-      decoration: BoxDecoration(
-        color: Colors.white,
-        boxShadow: [
-          BoxShadow(
-            color: Colors.black12,
-            blurRadius: 8,
-            offset: Offset(0, -2),
-          ),
-        ],
-      ),
-      child: SafeArea(
-        child: TabBar(
-          tabs: items.map((item) => _buildTabItem(item)).toList(),
-          onTap: onTap,
-          indicatorColor: Colors.transparent,
-          labelColor: Colors.blue,
-          unselectedLabelColor: Colors.grey,
-        ),
-      ),
-    );
-  }
-  
-  static Widget _buildTabItem(NavigationItem item) {
-    return Tab(
-      height: 60,
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(item.icon, size: 24),
-          SizedBox(height: 4),
-          Text(
-            item.label,
-            style: TextStyle(fontSize: 12),
-            overflow: TextOverflow.ellipsis,
-          ),
-        ],
-      ),
-    );
-  }
-  
-  // Drawer Navigation for Secondary Navigation
-  static Widget buildDrawerNavigation({
-    required List<DrawerItem> items,
-    required Function(DrawerItem) onItemTap,
-  }) {
-    return Drawer(
-      child: SafeArea(
-        child: Column(
-          children: [
-            _buildDrawerHeader(),
-            Expanded(
-              child: ListView.builder(
-                itemCount: items.length,
-                itemBuilder: (context, index) {
-                  final item = items[index];
-                  return _buildDrawerItem(item, onItemTap);
-                },
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-  
-  static Widget _buildDrawerHeader() {
-    return Container(
-      height: 120,
-      padding: EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        gradient: LinearGradient(
-          begin: Alignment.topLeft,
-          end: Alignment.bottomRight,
-          colors: [Colors.blue.shade400, Colors.blue.shade600],
-        ),
-      ),
-      child: Row(
-        children: [
-          CircleAvatar(
-            radius: 30,
-            backgroundImage: AssetImage('assets/images/user_avatar.png'),
-          ),
-          SizedBox(width: 16),
-          Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Text(
-                'John Doe',
-                style: TextStyle(
-                  color: Colors.white,
-                  fontSize: 18,
-                  fontWeight: FontWeight.bold,
-                ),
-              ),
-              Text(
-                'john.doe@example.com',
-                style: TextStyle(
-                  color: Colors.white70,
-                  fontSize: 14,
-                ),
-              ),
-            ],
-          ),
-        ],
-      ),
-    );
-  }
-  
-  // Bottom Sheet for Contextual Actions
-  static void showActionBottomSheet({
-    required BuildContext context,
-    required List<ActionItem> actions,
-  }) {
-    showModalBottomSheet(
-      context: context,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
-      ),
-      builder: (context) {
-        return SafeArea(
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              Container(
-                width: 40,
-                height: 4,
-                margin: EdgeInsets.symmetric(vertical: 12),
-                decoration: BoxDecoration(
-                  color: Colors.grey[300],
-                  borderRadius: BorderRadius.circular(2),
-                ),
-              ),
-              ...actions.map((action) => _buildActionItem(context, action)),
-              SizedBox(height: 16),
-            ],
-          ),
-        );
-      },
-    );
-  }
-  
-  static Widget _buildActionItem(BuildContext context, ActionItem action) {
-    return ListTile(
-      leading: Icon(action.icon),
-      title: Text(action.title),
-      subtitle: action.subtitle != null ? Text(action.subtitle!) : null,
-      onTap: () {
-        Navigator.pop(context);
-        action.onTap();
-      },
-    );
-  }
-  
-  // Floating Action Button with Speed Dial
-  static Widget buildSpeedDial({
-    required List<SpeedDialAction> actions,
-    required VoidCallback onMainAction,
-  }) {
-    return SpeedDial(
-      animatedIcon: AnimatedIcons.menu_close,
-      animatedIconTheme: IconThemeData(size: 22),
-      curve: Curves.bounceIn,
-      overlayColor: Colors.black,
-      overlayOpacity: 0.5,
-      tooltip: 'Speed Dial',
-      heroTag: 'speed-dial-hero-tag',
-      backgroundColor: Colors.blue,
-      foregroundColor: Colors.white,
-      elevation: 8.0,
-      shape: CircleBorder(),
-      children: actions.map((action) => SpeedDialChild(
-        child: Icon(action.icon),
-        backgroundColor: action.backgroundColor,
-        label: action.label,
-        labelStyle: TextStyle(fontWeight: FontWeight.w500),
-        onTap: action.onTap,
-      )).toList(),
-    );
-  }
-}
-
-// Navigation Models
-class NavigationItem {
-  final IconData icon;
-  final String label;
-  final String route;
-  
-  NavigationItem({
-    required this.icon,
-    required this.label,
-    required this.route,
-  });
-}
-
-class DrawerItem {
-  final IconData icon;
-  final String title;
-  final String? subtitle;
-  final VoidCallback onTap;
-  
-  DrawerItem({
-    required this.icon,
-    required this.title,
-    this.subtitle,
-    required this.onTap,
-  });
-}
-
-class ActionItem {
-  final IconData icon;
-  final String title;
-  final String? subtitle;
-  final VoidCallback onTap;
-  
-  ActionItem({
-    required this.icon,
-    required this.title,
-    this.subtitle,
-    required this.onTap,
-  });
-}
-
-class SpeedDialAction {
-  final IconData icon;
-  final String label;
-  final Color backgroundColor;
-  final VoidCallback onTap;
-  
-  SpeedDialAction({
-    required this.icon,
-    required this.label,
-    required this.backgroundColor,
-    required this.onTap,
-  });
-}
-```
-
-## Platform-Specific Design Implementation
-
-### iOS Human Interface Guidelines
-
-**iOS Design System Implementation:**
-```dart
-// iOS-Style Design System for Flutter
-class IOSDesignSystem {
-  // iOS Colors
-  static const Map<String, Color> colors = {
-    'systemBlue': Color(0xFF007AFF),
-    'systemGreen': Color(0xFF34C759),
-    'systemIndigo': Color(0xFF5856D6),
-    'systemOrange': Color(0xFFFF9500),
-    'systemPink': Color(0xFFFF2D92),
-    'systemPurple': Color(0xFFAF52DE),
-    'systemRed': Color(0xFFFF3B30),
-    'systemTeal': Color(0xFF5AC8FA),
-    'systemYellow': Color(0xFFFFCC00),
-    'systemGray': Color(0xFF8E8E93),
-    'systemGray2': Color(0xFFAEAEB2),
-    'systemGray3': Color(0xFFC7C7CC),
-    'systemGray4': Color(0xFFD1D1D6),
-    'systemGray5': Color(0xFFE5E5EA),
-    'systemGray6': Color(0xFFF2F2F7),
-    'label': Color(0xFF000000),
-    'secondaryLabel': Color(0x99000000),
-    'tertiaryLabel': Color(0x4D000000),
-    'quaternaryLabel': Color(0x2D000000),
-    'systemBackground': Color(0xFFFFFFFF),
-    'secondarySystemBackground': Color(0xFFF2F2F7),
-    'tertiarySystemBackground': Color(0xFFFFFFFF),
-  };
-  
-  // iOS Typography
-  static const TextStyle largeTitle = TextStyle(
-    fontSize: 34,
-    fontWeight: FontWeight.w700,
-    letterSpacing: 0.37,
-  );
-  
-  static const TextStyle title1 = TextStyle(
-    fontSize: 28,
-    fontWeight: FontWeight.w700,
-    letterSpacing: 0.36,
-  );
-  
-  static const TextStyle title2 = TextStyle(
-    fontSize: 22,
-    fontWeight: FontWeight.w700,
-    letterSpacing: 0.35,
-  );
-  
-  static const TextStyle title3 = TextStyle(
-    fontSize: 20,
-    fontWeight: FontWeight.w600,
-    letterSpacing: 0.38,
-  );
-  
-  static const TextStyle headline = TextStyle(
-    fontSize: 17,
-    fontWeight: FontWeight.w600,
-    letterSpacing: -0.43,
-  );
-  
-  static const TextStyle body = TextStyle(
-    fontSize: 17,
-    fontWeight: FontWeight.w400,
-    letterSpacing: -0.43,
-  );
-  
-  static const TextStyle callout = TextStyle(
-    fontSize: 16,
-    fontWeight: FontWeight.w400,
-    letterSpacing: -0.32,
-  );
-  
-  static const TextStyle subhead = TextStyle(
-    fontSize: 15,
-    fontWeight: FontWeight.w400,
-    letterSpacing: -0.24,
-  );
-  
-  static const TextStyle footnote = TextStyle(
-    fontSize: 13,
-    fontWeight: FontWeight.w400,
-    letterSpacing: -0.08,
-  );
-  
-  static const TextStyle caption1 = TextStyle(
-    fontSize: 12,
-    fontWeight: FontWeight.w400,
-    letterSpacing: 0.0,
-  );
-  
-  static const TextStyle caption2 = TextStyle(
-    fontSize: 11,
-    fontWeight: FontWeight.w400,
-    letterSpacing: 0.07,
-  );
-  
-  // iOS Navigation Bar
-  static PreferredSizeWidget buildIOSNavigationBar({
-    required String title,
-    List<Widget>? actions,
-    Widget? leading,
-    bool centerTitle = true,
-  }) {
-    return CupertinoNavigationBar(
-      middle: Text(
-        title,
-        style: TextStyle(
-          fontSize: 17,
-          fontWeight: FontWeight.w600,
-        ),
-      ),
-      leading: leading,
-      trailing: actions != null
-          ? Row(
-              mainAxisSize: MainAxisSize.min,
-              children: actions,
-            )
-          : null,
-      backgroundColor: colors['systemBackground'],
-      border: Border(
-        bottom: BorderSide(
-          color: colors['systemGray4']!,
-          width: 0.5,
-        ),
-      ),
-    );
-  }
-  
-  // iOS List Items
-  static Widget buildIOSListItem({
-    required String title,
-    String? subtitle,
-    Widget? leading,
-    Widget? trailing,
-    VoidCallback? onTap,
-  }) {
-    return CupertinoListTile(
-      title: Text(
-        title,
-        style: body,
-      ),
-      subtitle: subtitle != null
-          ? Text(
-              subtitle,
-              style: callout.copyWith(color: colors['secondaryLabel']),
-            )
-          : null,
-      leading: leading,
-      trailing: trailing ?? Icon(
-        CupertinoIcons.right_chevron,
-        color: colors['systemGray3'],
-        size: 14,
-      ),
-      onTap: onTap,
-    );
-  }
-  
-  // iOS Action Sheet
-  static void showIOSActionSheet({
-    required BuildContext context,
-    required String title,
-    String? message,
-    required List<CupertinoActionSheetAction> actions,
-  }) {
-    showCupertinoModalPopup(
-      context: context,
-      builder: (context) => CupertinoActionSheet(
-        title: Text(title),
-        message: message != null ? Text(message) : null,
-        actions: actions,
-        cancelButton: CupertinoActionSheetAction(
-          onPressed: () => Navigator.pop(context),
-          child: Text('Cancel'),
-        ),
-      ),
-    );
-  }
-  
-  // iOS Switch
-  static Widget buildIOSSwitch({
-    required bool value,
-    required ValueChanged<bool> onChanged,
-  }) {
-    return CupertinoSwitch(
-      value: value,
-      onChanged: onChanged,
-      activeColor: colors['systemBlue'],
-    );
-  }
-  
-  // iOS Segmented Control
-  static Widget buildIOSSegmentedControl<T>({
-    required Map<T, Widget> children,
-    required T groupValue,
-    required ValueChanged<T?> onValueChanged,
-  }) {
-    return CupertinoSegmentedControl<T>(
-      children: children,
-      groupValue: groupValue,
-      onValueChanged: onValueChanged,
-      selectedColor: colors['systemBlue'],
-      unselectedColor: colors['systemBackground'],
-      borderColor: colors['systemBlue'],
-      pressedColor: colors['systemBlue']!.withOpacity(0.2),
-    );
-  }
-}
-```
-
-### Android Material Design
-
-**Material Design System Implementation:**
-```dart
-// Material Design System for Flutter
-class MaterialDesignSystem {
-  // Material 3 Color Scheme
-  static const ColorScheme lightColorScheme = ColorScheme(
-    brightness: Brightness.light,
-    primary: Color(0xFF6750A4),
-    onPrimary: Color(0xFFFFFFFF),
-    primaryContainer: Color(0xFFEADDFF),
-    onPrimaryContainer: Color(0xFF21005D),
-    secondary: Color(0xFF625B71),
-    onSecondary: Color(0xFFFFFFFF),
-    secondaryContainer: Color(0xFFE8DEF8),
-    onSecondaryContainer: Color(0xFF1D192B),
-    tertiary: Color(0xFF7D5260),
-    onTertiary: Color(0xFFFFFFFF),
-    tertiaryContainer: Color(0xFFFFD8E4),
-    onTertiaryContainer: Color(0xFF31111D),
-    error: Color(0xFFBA1A1A),
-    onError: Color(0xFFFFFFFF),
-    errorContainer: Color(0xFFFFDAD6),
-    onErrorContainer: Color(0xFF410002),
-    background: Color(0xFFFFFBFE),
-    onBackground: Color(0xFF1C1B1F),
-    surface: Color(0xFFFFFBFE),
-    onSurface: Color(0xFF1C1B1F),
-    surfaceVariant: Color(0xFFE7E0EC),
-    onSurfaceVariant: Color(0xFF49454F),
-    outline: Color(0xFF79747E),
-    outlineVariant: Color(0xFFCAC4D0),
-    shadow: Color(0xFF000000),
-    scrim: Color(0xFF000000),
-    inverseSurface: Color(0xFF313033),
-    onInverseSurface: Color(0xFFF4EFF4),
-    inversePrimary: Color(0xFFD0BCFF),
-    surfaceTint: Color(0xFF6750A4),
-  );
-  
-  // Material 3 Typography
-  static const TextTheme textTheme = TextTheme(
-    displayLarge: TextStyle(
-      fontSize: 57,
-      fontWeight: FontWeight.w400,
-      letterSpacing: -0.25,
-      height: 1.12,
-    ),
-    displayMedium: TextStyle(
-      fontSize: 45,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0,
-      height: 1.16,
-    ),
-    displaySmall: TextStyle(
-      fontSize: 36,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0,
-      height: 1.22,
-    ),
-    headlineLarge: TextStyle(
-      fontSize: 32,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0,
-      height: 1.25,
-    ),
-    headlineMedium: TextStyle(
-      fontSize: 28,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0,
-      height: 1.29,
-    ),
-    headlineSmall: TextStyle(
-      fontSize: 24,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0,
-      height: 1.33,
-    ),
-    titleLarge: TextStyle(
-      fontSize: 22,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0,
-      height: 1.27,
-    ),
-    titleMedium: TextStyle(
-      fontSize: 16,
-      fontWeight: FontWeight.w500,
-      letterSpacing: 0.15,
-      height: 1.50,
-    ),
-    titleSmall: TextStyle(
-      fontSize: 14,
-      fontWeight: FontWeight.w500,
-      letterSpacing: 0.10,
-      height: 1.43,
-    ),
-    bodyLarge: TextStyle(
-      fontSize: 16,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0.15,
-      height: 1.50,
-    ),
-    bodyMedium: TextStyle(
-      fontSize: 14,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0.25,
-      height: 1.43,
-    ),
-    bodySmall: TextStyle(
-      fontSize: 12,
-      fontWeight: FontWeight.w400,
-      letterSpacing: 0.40,
-      height: 1.33,
-    ),
-    labelLarge: TextStyle(
-      fontSize: 14,
-      fontWeight: FontWeight.w500,
-      letterSpacing: 0.10,
-      height: 1.43,
-    ),
-    labelMedium: TextStyle(
-      fontSize: 12,
-      fontWeight: FontWeight.w500,
-      letterSpacing: 0.50,
-      height: 1.33,
-    ),
-    labelSmall: TextStyle(
-      fontSize: 11,
-      fontWeight: FontWeight.w500,
-      letterSpacing: 0.50,
-      height: 1.45,
-    ),
-  );
-  
-  // Material Cards
-  static Widget buildMaterialCard({
-    required Widget child,
-    VoidCallback? onTap,
-    EdgeInsetsGeometry? margin,
-    EdgeInsetsGeometry? padding,
-  }) {
-    return Card(
-      margin: margin ?? EdgeInsets.all(8),
-      elevation: 1,
-      shadowColor: Colors.black.withOpacity(0.2),
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
-      ),
-      child: InkWell(
-        onTap: onTap,
-        borderRadius: BorderRadius.circular(12),
-        child: Padding(
-          padding: padding ?? EdgeInsets.all(16),
-          child: child,
-        ),
-      ),
-    );
-  }
-  
-  // Material Buttons
-  static Widget buildFilledButton({
-    required String text,
-    required VoidCallback? onPressed,
-    IconData? icon,
-  }) {
-    return FilledButton.icon(
-      onPressed: onPressed,
-      icon: icon != null ? Icon(icon) : SizedBox.shrink(),
-      label: Text(text),
-      style: FilledButton.styleFrom(
-        minimumSize: Size(64, 40),
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(20),
-        ),
-      ),
-    );
-  }
-  
-  static Widget buildOutlinedButton({
-    required String text,
-    required VoidCallback? onPressed,
-    IconData? icon,
-  }) {
-    return OutlinedButton.icon(
-      onPressed: onPressed,
-      icon: icon != null ? Icon(icon) : SizedBox.shrink(),
-      label: Text(text),
-      style: OutlinedButton.styleFrom(
-        minimumSize: Size(64, 40),
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(20),
-        ),
-      ),
-    );
-  }
-  
-  static Widget buildTextButton({
-    required String text,
-    required VoidCallback? onPressed,
-    IconData? icon,
-  }) {
-    return TextButton.icon(
-      onPressed: onPressed,
-      icon: icon != null ? Icon(icon) : SizedBox.shrink(),
-      label: Text(text),
-      style: TextButton.styleFrom(
-        minimumSize: Size(48, 40),
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(20),
-        ),
-      ),
-    );
-  }
-  
-  // Material Navigation
-  static Widget buildNavigationBar({
-    required List<NavigationDestination> destinations,
-    required int selectedIndex,
-    required ValueChanged<int> onDestinationSelected,
-  }) {
-    return NavigationBar(
-      destinations: destinations,
-      selectedIndex: selectedIndex,
-      onDestinationSelected: onDestinationSelected,
-      height: 80,
-      elevation: 3,
-      shadowColor: Colors.black.withOpacity(0.2),
-    );
-  }
-  
-  // Material Floating Action Button
-  static Widget buildFloatingActionButton({
-    required VoidCallback onPressed,
-    required IconData icon,
-    String? tooltip,
-    bool extended = false,
-    String? label,
-  }) {
-    if (extended && label != null) {
-      return FloatingActionButton.extended(
-        onPressed: onPressed,
-        icon: Icon(icon),
-        label: Text(label),
-        tooltip: tooltip,
-        elevation: 6,
-      );
-    }
-    
-    return FloatingActionButton(
-      onPressed: onPressed,
-      tooltip: tooltip,
-      elevation: 6,
-      child: Icon(icon),
-    );
-  }
-  
-  // Material Snackbar
-  static void showMaterialSnackbar({
-    required BuildContext context,
-    required String message,
-    String? actionLabel,
-    VoidCallback? onActionPressed,
-    Duration duration = const Duration(seconds: 4),
-  }) {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: Text(message),
-        duration: duration,
-        action: actionLabel != null
-            ? SnackBarAction(
-                label: actionLabel,
-                onPressed: onActionPressed ?? () {},
-              )
-            : null,
-        behavior: SnackBarBehavior.floating,
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(8),
-        ),
-      ),
-    );
-  }
-}
-```
-
-## Accessibility and Inclusive Design
-
-### Universal Design Implementation
-
-**Accessibility-First Components:**
-```dart
-// Accessibility-Optimized Design System
-class AccessibilityDesignSystem {
-  // WCAG Color Contrast Ratios
-  static const double minContrastNormal = 4.5;
-  static const double minContrastLarge = 3.0;
-  static const double enhancedContrast = 7.0;
-  
-  // Accessible Color Combinations
-  static const Map<String, AccessibleColorPair> accessibleColors = {
-    'primary': AccessibleColorPair(
-      background: Color(0xFF1976D2),
-      foreground: Color(0xFFFFFFFF),
-      contrastRatio: 5.5,
-    ),
-    'secondary': AccessibleColorPair(
-      background: Color(0xFF424242),
-      foreground: Color(0xFFFFFFFF),
-      contrastRatio: 8.2,
-    ),
-    'error': AccessibleColorPair(
-      background: Color(0xFFD32F2F),
-      foreground: Color(0xFFFFFFFF),
-      contrastRatio: 5.1,
-    ),
-    'success': AccessibleColorPair(
-      background: Color(0xFF2E7D32),
-      foreground: Color(0xFFFFFFFF),
-      contrastRatio: 6.7,
-    ),
-  };
-  
-  // Accessible Typography
-  static TextStyle getAccessibleTextStyle({
-    required double fontSize,
-    required FontWeight fontWeight,
-    required Color color,
-    required Color backgroundColor,
-  }) {
-    final contrastRatio = _calculateContrastRatio(color, backgroundColor);
-    final isLargeText = fontSize >= 18 || (fontSize >= 14 && fontWeight.index >= FontWeight.bold.index);
-    final minContrast = isLargeText ? minContrastLarge : minContrastNormal;
-    
-    if (contrastRatio < minContrast) {
-      // Adjust color for better contrast
-      final adjustedColor = _adjustColorForContrast(color, backgroundColor, minContrast);
-      return TextStyle(
-        fontSize: fontSize,
-        fontWeight: fontWeight,
-        color: adjustedColor,
-      );
-    }
-    
-    return TextStyle(
-      fontSize: fontSize,
-      fontWeight: fontWeight,
-      color: color,
-    );
-  }
-  
-  // Accessible Button
-  static Widget buildAccessibleButton({
-    required String text,
-    required VoidCallback? onPressed,
-    String? semanticLabel,
-    String? tooltip,
-    IconData? icon,
-    ButtonType type = ButtonType.primary,
-  }) {
-    final colorPair = accessibleColors[type.name] ?? accessibleColors['primary']!;
-    
-    return Tooltip(
-      message: tooltip ?? text,
-      child: Semantics(
-        label: semanticLabel ?? text,
-        button: true,
-        enabled: onPressed != null,
-        child: ElevatedButton(
-          onPressed: onPressed,
-          style: ElevatedButton.styleFrom(
-            backgroundColor: colorPair.background,
-            foregroundColor: colorPair.foreground,
-            minimumSize: Size(88, 48), // Minimum touch target
-            padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(8),
-            ),
-          ),
-          child: Row(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              if (icon != null) ...[
-                Icon(icon, size: 20),
-                SizedBox(width: 8),
-              ],
-              Text(
-                text,
-                style: TextStyle(
-                  fontSize: 16,
-                  fontWeight: FontWeight.w600,
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-  
-  // Accessible Form Field
-  static Widget buildAccessibleFormField({
-    required String label,
-    required TextEditingController controller,
-    String? hint,
-    String? errorText,
-    bool required = false,
-    TextInputType keyboardType = TextInputType.text,
-    bool obscureText = false,
-    List<TextInputFormatter>? inputFormatters,
-  }) {
-    final fieldId = 'field_${label.toLowerCase().replaceAll(' ', '_')}';
-    
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Semantics(
-          label: required ? '$label (required)' : label,
-          child: Text(
-            required ? '$label *' : label,
-            style: TextStyle(
-              fontSize: 16,
-              fontWeight: FontWeight.w500,
-              color: Colors.black87,
-            ),
-          ),
-        ),
-        SizedBox(height: 8),
-        Semantics(
-          textField: true,
-          label: label,
-          hint: hint,
-          child: TextFormField(
-            controller: controller,
-            keyboardType: keyboardType,
-            obscureText: obscureText,
-            inputFormatters: inputFormatters,
-            decoration: InputDecoration(
-              hintText: hint,
-              errorText: errorText,
-              border: OutlineInputBorder(
-                borderRadius: BorderRadius.circular(8),
-                borderSide: BorderSide(color: Colors.grey.shade400),
-              ),
-              focusedBorder: OutlineInputBorder(
-                borderRadius: BorderRadius.circular(8),
-                borderSide: BorderSide(color: Colors.blue, width: 2),
-              ),
-              errorBorder: OutlineInputBorder(
-                borderRadius: BorderRadius.circular(8),
-                borderSide: BorderSide(color: Colors.red, width: 2),
-              ),
-              contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
-            ),
-            validator: required
-                ? (value) {
-                    if (value == null || value.isEmpty) {
-                      return '$label is required';
-                    }
-                    return null;
-                  }
-                : null,
-          ),
-        ),
-      ],
-    );
-  }
-  
-  // Screen Reader Optimized List
-  static Widget buildAccessibleList({
-    required List<AccessibleListItem> items,
-    required Function(AccessibleListItem) onItemTap,
-  }) {
-    return ListView.builder(
-      itemCount: items.length,
-      itemBuilder: (context, index) {
-        final item = items[index];
-        return Semantics(
-          button: true,
-          label: '${item.title}. ${item.subtitle ?? ''}. Item ${index + 1} of ${items.length}',
-          onTap: () => onItemTap(item),
-          child: Card(
-            margin: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
-            child: ListTile(
-              title: Text(
-                item.title,
-                style: TextStyle(
-                  fontSize: 16,
-                  fontWeight: FontWeight.w500,
-                ),
-              ),
-              subtitle: item.subtitle != null
-                  ? Text(
-                      item.subtitle!,
-                      style: TextStyle(
-                        fontSize: 14,
-                        color: Colors.grey.shade600,
-                      ),
-                    )
-                  : null,
-              leading: item.icon != null
-                  ? Icon(
-                      item.icon,
-                      size: 24,
-                      color: Colors.blue,
-                    )
-                  : null,
-              trailing: Icon(
-                Icons.chevron_right,
-                color: Colors.grey.shade400,
-              ),
-              onTap: () => onItemTap(item),
-              contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            ),
-          ),
-        );
-      },
-    );
-  }
-  
-  // High Contrast Mode Support
-  static Widget buildHighContrastWrapper({
-    required Widget child,
-    required BuildContext context,
-  }) {
-    final isHighContrast = MediaQuery.of(context).highContrast;
-    
-    if (isHighContrast) {
-      return Theme(
-        data: Theme.of(context).copyWith(
-          colorScheme: ColorScheme.fromSeed(
-            seedColor: Colors.blue,
-            brightness: Brightness.light,
-          ).copyWith(
-            surface: Colors.white,
-            onSurface: Colors.black,
-            primary: Colors.black,
-            onPrimary: Colors.white,
-          ),
-        ),
-        child: child,
-      );
-    }
-    
-    return child;
-  }
-  
-  // Helper methods
-  static double _calculateContrastRatio(Color foreground, Color background) {
-    final fgLuminance = foreground.computeLuminance();
-    final bgLuminance = background.computeLuminance();
-    
-    final lighter = math.max(fgLuminance, bgLuminance);
-    final darker = math.min(fgLuminance, bgLuminance);
-    
-    return (lighter + 0.05) / (darker + 0.05);
-  }
-  
-  static Color _adjustColorForContrast(
-    Color color,
-    Color background,
-    double targetContrast,
-  ) {
-    // Simplified contrast adjustment algorithm
-    // In production, use a more sophisticated approach
-    final hsl = HSLColor.fromColor(color);
-    
-    if (background.computeLuminance() > 0.5) {
-      // Light background, darken the color
-      return hsl.withLightness(math.max(0, hsl.lightness - 0.3)).toColor();
-    } else {
-      // Dark background, lighten the color
-      return hsl.withLightness(math.min(1, hsl.lightness + 0.3)).toColor();
-    }
-  }
-}
-
-// Models
-class AccessibleColorPair {
-  final Color background;
-  final Color foreground;
-  final double contrastRatio;
-  
-  const AccessibleColorPair({
-    required this.background,
-    required this.foreground,
-    required this.contrastRatio,
-  });
-}
-
-class AccessibleListItem {
-  final String title;
-  final String? subtitle;
-  final IconData? icon;
-  final dynamic data;
-  
-  AccessibleListItem({
-    required this.title,
-    this.subtitle,
-    this.icon,
-    this.data,
-  });
-}
-
-enum ButtonType { primary, secondary, error, success }
-```
-
-I'm ready to create exceptional mobile user experiences that are intuitive, accessible, and platform-appropriate for your Flutter or React Native application. Let me know what design areas you'd like me to focus on!