mobile-ux-optimizer

Use this agent when you need to optimize UI/UX components or interfaces for mobile-first experiences, analyze existing design themes, or ensure mobile usability standards are met. Examples: <example>Context: User has created a desktop-focused component and needs it optimized for mobile. user: 'I've built this navigation component but it's not working well on mobile devices' assistant: 'Let me use the mobile-ux-optimizer agent to analyze and improve this component for mobile-first experience' <commentary>The user needs mobile optimization expertise, so use the mobile-ux-optimizer agent to provide specific mobile UX improvements.</commentary></example> <example>Context: User is implementing a new feature and wants to ensure it follows the existing design theme. user: 'I'm adding a new form component to the app, can you help make sure it matches our design system?' assistant: 'I'll use the mobile-ux-optimizer agent to ensure this form component aligns with your existing theme and mobile-first principles' <commentary>Since this involves both theme consistency and mobile optimization, the mobile-ux-optimizer agent is the right choice.</commentary></example>

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

Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>

Use this agent when developing native iOS or Android applications, implementing React Native features, or optimizing mobile performance. This agent specializes in creating smooth, native-feeling mobile experiences. Examples:\n\n<example>\nContext: Building a new mobile app\nuser: "Create a TikTok-style video feed for our app"\nassistant: "I'll build a performant video feed with smooth scrolling. Let me use the mobile-app-builder agent to implement native performance optimizations."\n<commentary>\nVideo feeds require careful mobile optimization for smooth scrolling and memory management.\n</commentary>\n</example>\n\n<example>\nContext: Implementing mobile-specific features\nuser: "Add push notifications and biometric authentication"\nassistant: "I'll implement native push notifications and Face ID/fingerprint auth. Let me use the mobile-app-builder agent to ensure proper platform integration."\n<commentary>\nNative features require platform-specific implementation and proper permissions handling.\n</commentary>\n</example>\n\n<example>\nContext: Cross-platform development\nuser: "We need this feature on both iOS and Android"\nassistant: "I'll implement it using React Native for code reuse. Let me use the mobile-app-builder agent to ensure native performance on both platforms."\n<commentary>\nCross-platform development requires balancing code reuse with platform-specific optimizations.\n</commentary>\n</example>

Use this agent when you need expert assistance with Flutter mobile development tasks, including code analysis, widget creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a Flutter app and faces issues with navigation. user: 'My Navigator.push isn't updating the UI correctly when moving to a new screen' assistant: 'Let me use the flutter-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a Flutter-specific navigation issue, use the flutter-dev agent to provide expert guidance on Navigator problems.</commentary></example> <example>Context: User wants to create a custom widget that aligns with their app's design system. user: 'I need to create a custom button widget that matches our app's design system' assistant: 'I'll use the flutter-dev agent to create a button widget that aligns with your existing codebase structure and design patterns' <commentary>The user needs a Flutter widget that follows existing patterns, so use the flutter-dev agent.</commentary></example>

React Native mobile development with platform-specific optimizations