fix: Add mobile app rules covering hybrid frontend (React Native).

2-common/common-mobile-app.md

@@ -0,0 +1 @@
+

6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-1-architecture-rules.mdc

@@ -0,0 +1,154 @@
+---
+description: USE WHEN designing frontend architecture, implementing design patterns, organizing code structure, or discussing architectural decisions for creating maintainable, scalable component architectures
+globs: ["**/*"]
+alwaysApply: false
+---
+# Hybrid Development Architecture Rules
+
+## SOLID Principles in Components
+
+### Single Responsibility Principle (SOLID - S)
+- Each component must have ONE clear, well-defined purpose across all target platforms
+- Split components that handle multiple concerns into smaller, focused units
+- Name components based on their single responsibility (Button, Modal, UserCard)
+- If component description uses "AND", consider splitting it
+- Keep business logic separate from platform-specific rendering logic
+
+### Open/Closed Principle (SOLID - O)
+- Design components for extension without modification across platforms
+- Use composition patterns over inheritance
+- Leverage props/attributes/parameters for cross-platform configuration
+- Implement plugin patterns for platform-specific extensibility
+- Use platform-agnostic styling approaches for customization
+
+### Liskov Substitution Principle (SOLID - L)
+- Components should be replaceable with their implementations without breaking functionality on any platform
+- Ensure consistent behavior across component variants and platforms
+- Maintain compatible interfaces when extending components across different environments
+- Avoid breaking contracts in component inheritance chains
+- Test component substitutability across different platforms and contexts
+
+### Interface Segregation Principle (SOLID - I)
+- Create focused, minimal interfaces rather than large, monolithic ones
+- Split complex prop/parameter interfaces into smaller, platform-specific contracts
+- Avoid forcing components to depend on platform-specific props they don't use
+- Use composition to combine focused interfaces when needed
+- Keep component APIs lean and purposeful across platforms
+
+### Dependency Inversion (SOLID - D)
+- Depend on abstractions, not platform-specific implementations
+- Inject dependencies through props, context, or dependency injection containers
+- Abstract API calls behind service interfaces that work across platforms
+- Use dependency injection for external services and platform-specific features
+
+## Component Structure & Organization
+
+### File Organization
+- One component per file with descriptive filename
+- Co-locate related files (styles, tests, types, platform-specific implementations) in component folders
+- Use consistent naming conventions across the project and platforms
+- Group related components in feature/domain folders
+- Keep shared/common components in dedicated cross-platform directory
+
+### Component Interface Design
+- Define clear, minimal interfaces that work across platforms
+- Use descriptive, semantic property names
+- Distinguish between required and optional parameters
+- Provide sensible defaults for optional parameters
+- Document platform-specific behaviors and limitations
+
+### Composition Patterns
+- Favor composition over inheritance for cross-platform component reuse
+- Use compound component patterns for complex UI that adapts to different platforms
+- Implement render props or equivalent patterns for behavior sharing
+- Create higher-order components for cross-cutting concerns
+- Use slots/children/content projection for platform-appropriate content injection
+
+## Component Data Flow
+
+### Component Communication
+- Pass data down through props, attributes, or parameters
+- Use callback functions or event systems for upward communication
+- Implement clear interfaces between parent and child components
+- Avoid deep prop drilling through component hierarchies
+- Use context, state management, or dependency injection for cross-cutting data
+
+## Component Lifecycle & Side Effects
+
+### Effect Management
+- Handle side effects in appropriate lifecycle hooks or equivalent mechanisms
+- Clean up subscriptions and event listeners across platforms
+- Avoid memory leaks from uncleaned references
+- Implement proper error boundaries or equivalent error handling
+- Use cancellation tokens for async operations
+
+### Event Handling
+- Use consistent naming for event handlers across platforms
+- Handle events at the appropriate component level
+- Prevent event bubbling when necessary and supported
+- Implement proper input event handling (keyboard, touch, mouse)
+- Clean up event listeners on component destruction
+
+## Component Optimization
+
+### Component Design for Performance
+- Design components with minimal re-render impact across platforms
+- Use proper component boundaries to isolate updates
+- Implement efficient composition patterns that work across different rendering engines
+- Design reusable components with cross-platform performance in mind
+
+## Error Handling
+
+### Component Error Boundaries
+- Implement error boundaries at strategic component levels where supported
+- Provide fallback UI for component errors appropriate to each platform
+- Log errors with sufficient context for debugging across platforms
+- Allow graceful error recovery when possible
+- Avoid cascading failures through proper error isolation
+
+### Input Validation
+- Validate props/parameters at component boundaries
+- Use type systems for compile-time checking where available
+- Implement runtime validation for external data
+- Provide clear error messages for invalid inputs appropriate to each platform
+- Handle edge cases gracefully across platforms
+- Validate data at all entry points
+- Use schema validation for complex data structures
+- Provide immediate feedback on invalid input using platform-appropriate UI patterns
+- Sanitize user input before processing
+- Implement client-side validation as UX enhancement, not security
+
+## Component Structure Standards
+
+### Platform-Appropriate Structure
+- Build components with proper structural foundation for each platform
+- Follow semantic principles appropriate to each target platform
+- Ensure components generate accessible output where supported
+
+## Testing Architecture
+
+### Testable Design
+- Design components with testing in mind across platforms
+- Use dependency injection for external services
+- Keep business logic in pure functions separate from platform-specific code
+- Avoid testing implementation details
+- Focus on component behavior and outputs across different platforms
+
+### Test Organization
+- Co-locate tests with components
+- Use descriptive test names that explain behavior
+- Group related tests logically
+- Test component integration across platforms, not just units
+- Mock external dependencies and platform-specific APIs appropriately
+
+## 12-Factor App Principles for Hybrid Development
+
+### Configuration Management (12-Factor III)
+- Externalize configuration through environment variables or platform-appropriate configuration systems
+- Separate development, staging, and production configurations across all platforms
+- Avoid hardcoding environment-specific values in source code
+- Use configuration objects injected at runtime for each platform
+
+### Development and Production Parity (12-Factor X)
+- Maintain consistent API contracts across environments and platforms
+- Use feature flags instead of environment-specific or platform-specific code branches

6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-2-ui-patterns-rules.mdc

@@ -0,0 +1,161 @@
+---
+description: USE WHEN implementing UI patterns and user interactions to create interfaces that are intuitive, accessible, and performant across all devices and user capabilities
+globs: ["**/*"]
+alwaysApply: false
+---
+
+# Hybrid UI/UX Patterns Rules
+
+## Responsive Design Patterns
+
+### Mobile-First Development (Progressive Enhancement)
+- Start all layouts with mobile viewport constraints
+- Use relative units (rem, em, %, vw, vh) over fixed pixels
+- Design touch-friendly interfaces from the ground up
+- Implement progressive enhancement for larger screens
+
+### Flexible Layout Systems
+- Use layout primitives that adapt across platforms (View, ScrollView, etc.)
+- Avoid fixed widths on container elements
+- Implement fluid spacing with token-based design systems
+- Design components to reflow gracefully at any screen size
+
+### Breakpoint Management
+- Define semantic layout breakpoints for key devices (mobile, tablet, desktop)
+- Use consistent breakpoint logic across platform-specific styles
+- Avoid magic numbers in responsive rules
+- Create utility classes or tokens for responsive behavior
+- Document breakpoint decisions in comments
+
+## User Interface Patterns
+
+### Consistent Interaction States
+- Define press, focus, active, and disabled states for all interactive elements
+- Use consistent timing for state transitions (150-300ms)
+- Provide immediate visual feedback for user actions
+- Implement loading states for async operations
+- Maintain state consistency across similar components
+
+### Visual Hierarchy
+- Use size, color, and spacing to establish clear hierarchy
+- Apply consistent spacing scale throughout the interface
+- Ensure important elements have sufficient visual weight
+- Group related content with proximity and visual cues
+- Use typography scale to reinforce content hierarchy
+
+### Empty and Error State Design
+- Show skeleton screens for better perceived performance
+- Provide progress feedback for multi-step processes
+- Design meaningful empty states with clear actions
+- Design error states with clear recovery actions
+
+## Form Design Patterns
+
+### Input Design
+- Label all form inputs clearly and descriptively
+- Use appropriate input types for data (email, tel, date)
+- Implement placeholder text as hints, not replacements for labels
+- Group related fields with visual sections
+- Show input format requirements upfront
+
+### Form Validation and Accessibility
+- Show inline validation feedback near relevant fields
+- Use clear, actionable error messages for form validation
+- Validate on blur for individual fields
+- Preserve user input when showing validation errors
+- Highlight form fields that need attention with visual indicators
+- Associate labels with form controls programmatically
+- Provide clear instructions before form fields
+- Mark required fields clearly and consistently
+
+### Progressive Disclosure
+- Show only essential fields initially
+- Reveal additional options contextually
+- Use progressive steps for complex forms
+- Implement collapsible sections for optional areas
+- Keep forms as concise as possible
+
+## Animation and Motion Patterns
+
+### Performance-Conscious Animation (Performance First)
+- Use GPU-accelerated transitions (translate, scale, opacity)
+- Avoid layout-triggering animations (top/left/width)
+- Keep animation duration under 300ms for UI feedback
+- Use easing curves that feel natural (ease-out for entrances)
+- Provide reduced-motion alternatives
+
+### Meaningful Motion
+- Use animation to guide user attention to important changes
+- Animate state transitions smoothly to maintain context
+- Keep animations subtle and purposeful
+- Ensure animations enhance rather than distract from content
+- Provide clear entry and exit animations for overlays
+
+## Touch and Gesture Patterns
+
+### Touch Target Optimization
+- Make interactive elements at least 44x44 units
+- Add sufficient padding around touchable items
+- Account for thumb reach zones on mobile devices
+- Prevent accidental touches with spacing and alignment
+- Use visual feedback for touch interactions
+
+### Gesture Support
+- Support common touch gestures (tap, swipe, long press)
+- Provide visual feedback during gesture recognition
+- Don't rely solely on gestures for core functionality
+- Implement gesture fallbacks where needed
+
+## Navigation Patterns
+
+### Clear Navigation Hierarchy
+- Implement consistent navigation patterns across screens
+- Use breadcrumbs or back buttons for deep navigation structures
+- Provide clear indicators for current location
+- Ensure navigation is accessible across devices
+- Structure navigation with clear visual hierarchy
+
+### Menu and Dropdown Patterns
+- Support both touch and keyboard navigation where applicable
+- Implement proper focus or highlight management for menus
+- Provide clear visual indicators for expandable items
+- Handle menu positioning for edge cases (viewport boundaries)
+
+## Content Patterns
+
+### Typography and Readability
+- Use adequate line height (1.4-1.6) for body text
+- Implement proper content hierarchy with heading levels
+- Ensure sufficient color contrast for all text
+- Use consistent text alignment and spacing
+- Support user font size preferences
+
+### Image and Media Handling
+- Implement responsive images across device types
+- Use lazy loading where possible
+- Provide alternative text for all meaningful images
+- Optimize image formats and sizes for mobile delivery
+- Handle loading and error states for media content
+
+## Accessibility-First Patterns
+
+### Screen Reader Optimization
+- Add descriptive labels for interactive elements
+- Announce dynamic content changes with live regions or alerts
+- Provide context for complex interactions
+- Design interfaces that work well with assistive technologies
+
+## Performance UI Patterns
+
+### Perceived Performance
+- Show content immediately, even if incomplete
+- Use optimistic UI updates for user actions
+- Implement skeleton screens during data loading
+- Provide immediate feedback for user interactions
+- Use progressive enhancement for non-critical features
+
+### Efficient Updates
+- Minimize layout thrashing and unnecessary re-renders
+- Use virtualization for large lists or scrolls
+- Batch state updates where possible
+- Optimize rendering performance with memoization or pure components