diff --git a/2-common/common-mobile-app.md b/2-common/common-mobile-app.md
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/2-common/common-mobile-app.md
@@ -0,0 +1 @@
+
diff --git a/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-1-architecture-rules.mdc b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-1-architecture-rules.mdc
new file mode 100644
index 0000000..6be9692
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-2-ui-patterns-rules.mdc b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-2-ui-patterns-rules.mdc
new file mode 100644
index 0000000..170ede2
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-3-data-state-rules.mdc b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-3-data-state-rules.mdc
new file mode 100644
index 0000000..2bed387
--- /dev/null
+++ b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-3-data-state-rules.mdc
@@ -0,0 +1,78 @@
+---
+description: USE WHEN handling application state and data flow for efficient, predictable data and state management
+globs: ["**/*"]
+alwaysApply: false
+---
+
+# Hybrid Frontend Data & State Management Rules
+
+## 12-Factor App Principles for Hybrid Frontend
+
+### Stateless Components (12-Factor VI)
+- Design components to be stateless when possible
+- Store session state in client-side or shared backing services (localStorage, SecureStore, etc.)
+- Avoid storing session data in the memory of a single front-end instance
+- Make components work regardless of previous interactions
+- Handle component state restoration gracefully
+
+## State Management Principles
+
+### State Ownership and Boundaries (Single Responsibility)
+- Keep state as close to its usage as possible
+- Lift state up only when multiple components genuinely need access
+- Avoid prop drilling beyond 2-3 component levels
+- Clearly define state ownership at component boundaries
+- Use context or state management libraries for deeply nested sharing
+
+### Immutability Patterns (Functional Programming)
+- Treat all state as immutable - never mutate existing state objects
+- Use spread operators for shallow object/array updates
+- Implement pure update functions for state transformations
+- Use immutability helper libraries for complex nested updates
+- Return new references when state changes
+
+### State Types and Separation
+- Distinguish between UI state and business/domain state
+- Separate local component state from global application state
+- Handle server state differently from client state
+- Compute derived state rather than storing it
+- Keep state structure flat to avoid nested update complexity
+
+## Data Flow Architecture
+
+### Unidirectional Data Flow
+- Data flows down through props/attributes
+- Events and actions flow up through callbacks
+- Avoid two-way data binding patterns when possible
+- Make data flow explicit and traceable
+- Use event emitters or observable patterns for complex communications
+
+### Action Patterns
+- Use descriptive action names that explain intent
+- Keep actions pure and predictable
+- Separate action creators from business logic
+- Handle async operations with consistent patterns
+- Implement proper error handling for actions
+
+## State Persistence
+
+### Local Storage Management
+- Persist critical user state across sessions (use appropriate storage API like AsyncStorage)
+- Serialize and deserialize state properly
+- Handle storage quota limits gracefully
+- Clear sensitive data appropriately
+
+### Session Management
+- Clear sensitive data on logout
+- Handle session expiration gracefully
+- Restore appropriate state after app reload
+- Implement proper state hydration
+- Handle authentication state changes
+
+## Data Validation
+
+### State Integrity
+- Ensure state transitions are valid
+- Prevent invalid state combinations
+- Log state violations for debugging
+- Implement state invariants
\ No newline at end of file
diff --git a/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-4-api-integration-service-layer.mdc b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-4-api-integration-service-layer.mdc
new file mode 100644
index 0000000..0fcdb2d
--- /dev/null
+++ b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-4-api-integration-service-layer.mdc
@@ -0,0 +1,33 @@
+---
+description: USE WHEN intergrating APIs
+globs: ["**/*"]
+alwaysApply: false
+---
+# Hybrid API Integration and Service Layer
+
+### Service Abstraction
+- Create abstraction layer for all API interactions
+- Handle errors at service boundaries, not in components
+- Transform API responses to match application models
+- Implement consistent request/response patterns
+- Use proper HTTP methods and status code handling
+
+### Loading State Management
+- Track loading state for all async operations
+- Handle concurrent requests appropriately
+- Show appropriate UI feedback during loading
+- Implement request cancellation for cleanup (e.g., using AbortController or cancellation tokens if supported)
+- Use loading state to prevent duplicate requests
+
+### Error Handling Strategies
+- Catch and handle errors at appropriate levels
+- Provide meaningful error messages to users
+- Implement retry mechanisms for transient failures
+- Log errors with sufficient context for debugging
+- Handle network failures gracefully
+
+### Subscription Lifecycle
+- Unsubscribe from data sources on component cleanup
+- Prevent memory leaks from active subscriptions
+- Implement proper cleanup in useEffect or lifecycle equivalents
+- Handle subscription errors gracefully
\ No newline at end of file
diff --git a/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-5-performance-rules.mdc b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-5-performance-rules.mdc
new file mode 100644
index 0000000..3dbc916
--- /dev/null
+++ b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-5-performance-rules.mdc
@@ -0,0 +1,107 @@
+---
+description: USE WHEN optimizing for speed, efficiency, and user experience while maintaining the performance optimization principles
+globs: ["**/*"]
+alwaysApply: false
+---
+# Hybrid Frontend Performance Optimization Rules
+
+## Bundle and Asset Optimization
+
+### Code Splitting Strategies (Lazy Loading)
+- Split code by routes and features to reduce initial bundle size
+- Use dynamic imports for components not needed immediately
+- Create separate chunks for vendor libraries and dependencies
+- Implement lazy loading for conditional features and routes
+- Load components on demand based on user interactions
+
+### Tree Shaking and Dead Code Elimination
+- Import only specific functions from libraries, avoid default imports
+- Use ES modules for better tree shaking support
+- Remove unused code and dead branches regularly
+- Avoid importing entire utility libraries when only using specific functions
+
+### Asset Optimization
+- Compress and optimize images before bundling
+- Use modern image formats (WebP) with fallbacks where supported
+- Implement responsive images where applicable
+- Use vector icons or icon libraries for small graphics
+- Minimize and compress CSS and JavaScript files
+
+## Runtime Performance Optimization
+
+### Rendering Optimization (Performance First)
+- Minimize component re-renders through proper state management
+- Use memoization strategically for expensive computations
+- Implement proper key props for list rendering
+- Avoid creating objects and functions during render
+- Use virtualization for large lists and tables
+
+### Memory Management
+- Remove object references when components unmount
+- Manage memory usage in hybrid apps to prevent performance drops
+
+### Efficient UI Operations
+- Batch UI updates to reduce rendering overhead
+- Avoid frequent style changes that trigger layout
+- Optimize views rendered off-screen
+
+## Network and Loading Optimization
+
+### Resource Loading Strategies
+- Preload critical resources if supported
+- Implement progressive enhancement patterns
+- Optimize critical rendering path
+- Use offline support and caching mechanisms
+
+### Caching Strategies
+- Use appropriate hybrid storage solutions for caching
+- Cache API responses with proper invalidation
+- Version static assets for cache busting
+
+### Request Optimization
+- Batch multiple API calls when possible
+- Implement request deduplication for concurrent requests
+- Use efficient data fetching patterns
+- Compress request and response payloads
+
+## Initial Load Performance
+
+### Critical UI Optimization
+- Prioritize loading of essential UI components
+- Defer non-critical assets and modules
+- Remove unused CSS and JS where possible
+
+### JavaScript Loading Optimization
+- Defer non-critical logic until after initial load
+- Load third-party modules efficiently
+- Implement loading strategies based on user interaction
+
+## User Experience Performance
+
+### Perceived Performance
+- Show skeleton loaders or placeholders during data fetch
+- Implement optimistic UI updates
+- Provide immediate feedback for user actions
+- Use progressive loading for images and assets
+
+### Smooth Interactions
+- Keep main thread free for user input
+- Respond to user actions within 100ms
+- Implement instant touch feedback
+- Debounce expensive operations triggered by user input
+
+## Performance Monitoring (DevOps)
+
+### Performance Budgets
+- Track key metrics during development
+- Add performance logging for hybrid render paths
+
+### Development Performance Practices
+- Use profiling tools to measure component render times
+- Add comments documenting performance decisions
+
+## Performance Testing
+
+### Performance Test Implementation
+- Write tests to ensure performance budgets are met
+- Measure and assert key render and interaction times
\ No newline at end of file
diff --git a/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-6-security-rules.mdc b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-6-security-rules.mdc
new file mode 100644
index 0000000..a1f67c8
--- /dev/null
+++ b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-6-security-rules.mdc
@@ -0,0 +1,96 @@
+---
+description: USE WHEN securing frontend applications that protect both your users and your systems from common web security threats protect your applications and users from common security vulnerabilities
+globs: ["**/*"]
+alwaysApply: false
+---
+# Hybrid Frontend Security Rules
+
+## Input Security and Data Validation (Defense in Depth)
+
+### User Input Sanitization
+- Sanitize all user input before rendering or processing
+- Escape HTML entities in dynamic content to prevent XSS
+- Validate input on both client and server sides
+- Use allowlists instead of blocklists for input validation
+- Never trust data from external sources without validation
+
+### XSS Prevention (Defense in Depth)
+- Use framework-provided safe rendering methods
+- Avoid unsafe HTML rendering for user-generated content
+- Apply appropriate content restrictions in hybrid environments
+- Encode data based on context (HTML, URL, JavaScript)
+- Use rendering mechanisms that automatically escape content
+
+### Form Security
+- Implement proper input validation
+- Use secure transport for all form submissions (HTTPS or native secure handlers)
+- Validate file uploads thoroughly
+- Implement rate limiting for form submissions
+- Use anti-automation techniques when applicable
+
+## Authentication and Session Security (Defense in Depth)
+
+### Secure Token Handling
+- Store authentication tokens securely (prefer secure storage mechanisms like SecureStore)
+- Avoid localStorage or sessionStorage for sensitive tokens
+- Implement proper token expiration and refresh handling
+- Use platform-specific secure attributes where applicable
+- Clear tokens on logout and session expiration
+
+### Session Management
+- Handle session expiration gracefully
+- Implement logout functionality that clears all sensitive data
+- Clear sensitive data on session end
+- Log session events securely
+- Handle app lifecycle events (pause, background, close)
+
+## API Security
+
+### Secure API Communication
+- Use HTTPS for all API communications
+- Implement proper error handling without leaking sensitive info
+- Validate API responses before use
+- Handle API rate limiting gracefully
+- Never expose API keys or sensitive configuration
+
+### Data Protection
+- Encrypt sensitive data before storage
+- Use secure communication protocols
+- Implement proper CORS-like access control where needed
+- Validate all data from external sources
+- Handle PII data with care
+
+## Client-Side Security
+
+### Content Security Strategy
+- Restrict content execution from untrusted sources
+- Avoid inline scripts where possible
+- Restrict resource loading to trusted domains
+- Monitor security violations where applicable
+- Review policies when adding third-party dependencies
+
+### Dependency Security
+- Use lockfiles for consistent dependency versions
+
+### Error Handling and Information Disclosure
+- Handle errors gracefully without exposing internal logic
+- Log errors securely
+- Provide user-friendly error messages
+- Implement proper fallback mechanisms
+- Track security-related error patterns
+
+## Third-Party Integration Security
+
+### External Service Integration
+- Validate all third-party scripts before loading
+- Use integrity checks for external resources when possible
+- Isolate untrusted content where possible
+- Handle third-party service failures gracefully
+- Prepare fallback logic for failed integrations
+
+### Data Validation from External Sources
+- Never trust external data without validation
+- Implement schema validation for received data
+- Sanitize external data
+- Use type checking
+- Implement timeouts for external requests
\ No newline at end of file
diff --git a/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-7-accessibility-rules.mdc b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-7-accessibility-rules.mdc
new file mode 100644
index 0000000..f4a6967
--- /dev/null
+++ b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-7-accessibility-rules.mdc
@@ -0,0 +1,115 @@
+---
+description: USE WHEN creating inclusive, accessible web applications to ensure application work for all users, including those with disabilities
+globs: ["**/*"]
+alwaysApply: false
+---
+# Hybrid Frontend Accessibility Rules
+
+## Semantic HTML Foundation (Web Standards)
+
+### Proper Element Usage
+- Use appropriate components or native elements for semantic purpose
+- Choose UI elements based on meaning, not appearance
+- Maintain logical structure for accessibility tools
+- Use accessible equivalents for lists and headings
+- Implement accessible regions for navigation structure
+
+### Heading Hierarchy
+- Start with accessible title component or heading for main page title
+- Use heading levels sequentially without skipping where possible
+- Don’t use headings solely for styling
+- Ensure headings describe section content accurately
+- Use accessibility attributes to associate headings with regions
+
+### List Structures
+- Use accessible list components for ordered/unordered content
+- Avoid lists for non-list content
+- Ensure proper list item nesting and semantics
+
+## ARIA Implementation (WCAG)
+
+### Labels and Descriptions
+- Use accessibility labels (e.g., accessibilityLabel) for elements without visible text
+- Use accessibilityHint or descriptions for additional context
+- Avoid redundant roles or labels where native components provide semantics
+- Keep labels concise and purposeful
+
+### Roles and States
+- Apply roles to enhance semantic clarity where needed
+- Use accessibilityState for dynamic changes (expanded, checked)
+- Update accessibility state when UI changes
+- Hide decorative elements from accessibility tree
+- Use live regions to announce dynamic content
+
+### Live Regions
+- Use accessibilityLiveRegion for content that updates dynamically
+- Choose appropriate announcement levels
+- Ensure whole message is read when needed
+- Use status role for updates
+- Announce loading and progress indicators
+
+## Keyboard Navigation (WCAG)
+
+### Focus Management
+- Ensure all interactive elements are keyboard accessible
+- Maintain logical tab order
+- Provide visible and styled focus indicators
+- Manage focus during dynamic UI changes
+- Use skip links or equivalents for navigation
+
+### Keyboard Interaction Patterns
+- Support arrow key navigation in lists/menus
+- Use Enter and Space for activations
+- Escape to close modals or popups
+- Provide shortcut support for key actions
+- Handle Home/End navigation for elements
+
+### Skip Links and Shortcuts
+- Provide skip links or accessibility actions for quick navigation
+- Make skip links visible when focused
+- Use access keys or gestures where appropriate
+- Document supported keyboard and gesture actions
+
+## Visual Accessibility
+
+### Color and Contrast
+- Ensure WCAG-compliant contrast ratios
+- Don’t use color alone for conveying meaning
+- Support dark/light mode themes
+- Use visual cues alongside colors
+
+### Typography and Spacing
+- Use scalable units (rem, em) for font sizing
+- Support 200% zoom readability
+- Maintain readable line height and element spacing
+- Respect user preferences for text sizing
+
+## Accessible Form Interactions
+
+### Advanced Form Accessibility
+- Use accessibilityRole and accessibilityLabel for form controls
+- Announce form state changes using alerts or live regions
+- Support keyboard and screen reader navigation
+- Provide real-time validation feedback
+
+## Component-Specific Accessibility
+
+### Modal and Dialog Patterns
+- Trap focus inside modal while open
+- Return focus to invoking element on close
+- Use role="dialog" and appropriate labeling
+- Implement Escape key to dismiss modal
+- Provide accessible close button
+
+### Table Accessibility
+- Use semantic table structure with headers
+- Define relationships using accessibility attributes
+- Provide captions or summaries for context
+- Ensure responsive tables retain accessibility features
+- Indicate sort order using ARIA where needed
+
+## Testing and Validation
+
+### Accessibility Testing
+- Use accessibility validation tools and emulators
+- Verify ARIA usage and state changes are announced properly
\ No newline at end of file
diff --git a/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-8-testing-rules.mdc b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-8-testing-rules.mdc
new file mode 100644
index 0000000..5d4c807
--- /dev/null
+++ b/6-mobile-app/javascript/hybrid-frontend/hybrid-frontend-8-testing-rules.mdc
@@ -0,0 +1,86 @@
+---
+description: USE WHEN writing test for ensuring testing and quality principles to build reliable, maintainable frontend applications with comprehensive test coverage and robust error handling
+globs: ["**/*"]
+alwaysApply: false
+---
+# Hybrid Frontend Testing & Quality Rules
+
+## Testing Strategy and Organization
+
+### Test Pyramid Structure (Testing Pyramid)
+- Write more unit tests than integration tests, more integration than e2e tests
+- Focus unit tests on business logic and pure functions
+- Use integration tests for component interactions
+- Reserve e2e tests for critical user flows only
+- Keep tests focused and isolated
+
+### Test Organization and Structure
+- Co-locate tests with source code files or components
+- Use descriptive test names explaining expected behavior
+- Group related tests using describe blocks
+- Follow Arrange-Act-Assert structure
+- Minimize and clarify test setup
+
+## Component Testing Best Practices
+
+### Testing User Interactions (User-Centric Testing)
+- Test components from a user perspective
+- Focus on behavior rather than implementation details
+- Use accessibility-focused queries (e.g., getByRole, getByLabelText)
+- Test user interactions and resulting state changes
+- Validate visual feedback and side effects
+
+### Mocking and Test Isolation
+- Mock dependencies such as services or storage access
+- Keep mocks simple and aligned to test goals
+- Reset mocks between each test
+- Choose mock level based on usage (function, module, network)
+- Use dependency injection or providers for flexible mocking
+
+## Integration Testing
+
+### Component Integration
+- Validate how components interact and share data
+- Test context consumers and their dependencies
+- Test navigation flows between views
+- Validate hybrid form handling and submission flow
+
+### API Integration Testing
+- Use mocked endpoints or native HTTP mocks
+- Validate request and response logic
+- Test edge cases and error handling
+- Confirm transformation logic works correctly
+- Ensure proper states for loading and errors
+
+## Code Quality Standards
+
+### Code Organization and Structure (Single Responsibility)
+- Follow consistent file/folder naming patterns
+- Group logically related functionality
+- Keep functions/component logic scoped and focused
+- Name variables and functions descriptively
+- Handle all errors and edge cases in logic
+
+### Type Safety and Validation
+- Use TypeScript or PropTypes for type safety
+- Validate parameters and return types where necessary
+- Document expected interfaces
+- Apply runtime validation for critical flows
+- Use schema validation for data coming from APIs
+
+## Error Handling and Debugging
+
+### Comprehensive Error Handling
+- Use error boundaries or hybrid equivalents for UI-level errors
+- Handle async errors and rejections gracefully
+- Display user-friendly error messages
+- Log sufficient context for debugging issues
+- Provide UI fallbacks for error states
+
+### Systematic Logging and Debugging
+- Implement unified logging strategies across environments
+- Log state transitions and key user interactions
+- Use structured log messages
+- Support debug mode toggles for testing environments
+- Write utilities to trace and profile components
+- Use clear naming and consistent commenting for debuggability
\ No newline at end of file
diff --git a/6-mobile-app/javascript/react-native/react-native-1-architecture-rules.mdc b/6-mobile-app/javascript/react-native/react-native-1-architecture-rules.mdc
new file mode 100644
index 0000000..4008d5c
--- /dev/null
+++ b/6-mobile-app/javascript/react-native/react-native-1-architecture-rules.mdc
@@ -0,0 +1,382 @@
+---
+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
+---
+# React Native Architecture Rules
+
+## SOLID Principles in React Native Components
+
+### Single Responsibility Principle (SOLID - S)
+
+- Each React Native component must have ONE clear, well-defined purpose
+- Split components that handle multiple concerns into smaller, focused units
+- Name components based on their single responsibility (Button, Modal, UserCard)
+- Keep business logic separate from UI rendering logic
+
+```tsx
+// Good: Single responsibility
+export const UserAvatar: React.FC<UserAvatarProps> = ({ user, size = 'md' }) => {
+  return (
+    <Image
+      source={{ uri: user.avatar }}
+      accessibilityLabel={`${user.name} avatar`}
+      style={[styles.avatar, sizeStyles[size]]}
+    />
+  );
+};
+```
+
+### Open/Closed Principle (SOLID - O)
+
+- Design React Native components for extension without modification
+- Use composition patterns over inheritance
+- Leverage props and children for configuration
+
+```tsx
+interface ButtonProps {
+  variant?: 'primary' | 'secondary';
+  children: React.ReactNode;
+  leftIcon?: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  children,
+  leftIcon,
+  ...props
+}) => (
+  <TouchableOpacity style={[styles.base, styles[variant]]} {...props}>
+    {leftIcon && <View style={styles.icon}>{leftIcon}</View>}
+    <Text>{children}</Text>
+  </TouchableOpacity>
+);
+```
+
+### Liskov Substitution Principle (SOLID - L)
+
+- React Native components should be replaceable with their implementations without breaking functionality
+- Ensure consistent behavior across component variants
+
+```tsx
+interface BaseInputProps {
+  value: string;
+  onChangeText: (value: string) => void;
+  editable?: boolean;
+}
+
+export const TextInputField: React.FC<BaseInputProps> = (props) => (
+  <TextInput {...props} />
+);
+
+export const EmailInputField: React.FC<BaseInputProps> = (props) => (
+  <TextInput keyboardType="email-address" {...props} />
+);
+```
+
+### Interface Segregation Principle (SOLID - I)
+
+- Create focused, minimal prop interfaces rather than large, monolithic ones
+- Split complex prop interfaces into smaller, specific contracts
+
+```tsx
+interface BaseComponentProps {
+  style?: ViewStyle;
+  children?: React.ReactNode;
+}
+
+interface TouchableProps {
+  onPress: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+}
+
+interface FormFieldProps {
+  name: string;
+  label: string;
+  error?: string;
+}
+
+type TouchableButton = BaseComponentProps & TouchableProps;
+```
+
+### Dependency Inversion (SOLID - D)
+
+- Depend on abstractions, not concrete implementations
+- Inject dependencies through props or context
+
+```tsx
+interface UserService {
+  fetchUser: (id: string) => Promise<User>;
+  updateUser: (user: User) => Promise<User>;
+}
+
+interface UserProfileProps {
+  userId: string;
+  userService: UserService;
+}
+
+export const UserProfile: React.FC<UserProfileProps> = ({ userId, userService }) => {
+  const { data: user, loading } = useQuery(['user', userId], () => userService.fetchUser(userId));
+  // Component implementation
+};
+```
+
+## React Native Component Structure & Organization
+
+### Atomic Design with React Native
+
+- **Atoms**: Basic React Native components (Button, Input, Icon)
+- **Molecules**: Combinations of atoms (SearchBox, FormField)
+- **Organisms**: Complex UI sections (Header, UserForm, ProductList)
+- **Templates**: Page layouts with placeholder content
+- **Screens**: Complete route components with real data
+
+```tsx
+// Atom
+export const Button: React.FC<ButtonProps> = ({ children, ...props }) => (
+  <TouchableOpacity {...props}><Text>{children}</Text></TouchableOpacity>
+);
+
+// Molecule
+export const SearchBox: React.FC<SearchBoxProps> = ({ onSearch }) => (
+  <View style={styles.container}>
+    <TextInput placeholder="Search..." style={styles.input} />
+    <Button onPress={onSearch}>Search</Button>
+  </View>
+);
+```
+
+### File Organization
+
+- Use PascalCase for component files: `UserProfile.tsx`
+- Co-locate related files in component folders
+- Export components as named exports, not default exports
+
+```
+/components
+  /atoms
+    /Button
+      - Button.tsx
+      - Button.test.tsx
+      - index.ts
+  /molecules
+  /organisms
+```
+
+### Component Interface Design
+
+- Define props interfaces with descriptive names ending in "Props"
+- Use strict TypeScript typing for all props
+
+```tsx
+interface UserCardProps {
+  user: User;
+  onEdit?: (user: User) => void;
+  showActions?: boolean;
+  style?: ViewStyle;
+}
+
+export const UserCard: React.FC<UserCardProps> = ({
+  user,
+  onEdit,
+  showActions = true,
+  style
+}) => {
+  // Component implementation
+};
+```
+
+## React Native Data Flow Architecture
+
+### Component Communication
+
+- Pass data down through props
+- Use callback functions for upward communication
+- Avoid deep prop drilling beyond 2-3 levels
+- Use React Context for cross-cutting concerns
+
+```tsx
+interface TodoListProps {
+  todos: Todo[];
+  onToggle: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+export const TodoList: React.FC<TodoListProps> = ({ todos, onToggle, onDelete }) => (
+  <FlatList
+    data={todos}
+    keyExtractor={item => item.id}
+    renderItem={({ item }) => (
+      <TodoItem
+        todo={item}
+        onToggle={() => onToggle(item.id)}
+        onDelete={() => onDelete(item.id)}
+      />
+    )}
+  />
+);
+```
+
+### Custom Hooks for Logic Reuse
+
+- Extract reusable stateful logic into custom hooks
+- Prefix custom hook names with "use"
+- Keep custom hooks focused on single responsibility
+
+```tsx
+interface UseApiResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export const useApi = <T>(url: string): UseApiResult<T> => {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await fetch(url);
+      const result = await response.json();
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  }, [url]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, refetch: fetchData };
+};
+```
+
+## React Native Component Lifecycle & Side Effects
+
+### Effect Management with Hooks
+
+- Use `useEffect` for side effects and lifecycle events
+- Always include dependency arrays in `useEffect`
+- Clean up subscriptions and event listeners
+
+```tsx
+export const UserProfile: React.FC<{ userId: string }> = ({ userId }) => {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    const fetchUser = async () => {
+      try {
+        const response = await fetch(`/api/users/${userId}`, {
+          signal: abortController.signal
+        });
+        const userData = await response.json();
+        setUser(userData);
+      } catch (error: any) {
+        if (error.name !== 'AbortError') {
+          console.error('Failed to fetch user:', error);
+        }
+      }
+    };
+
+    fetchUser();
+    return () => abortController.abort();
+  }, [userId]);
+
+  return user ? <Text>{user.name}</Text> : <Text>Loading...</Text>;
+};
+```
+
+## React Native Error Handling
+
+### Error Boundaries
+
+- Implement Error Boundaries at strategic component levels
+- Provide fallback UI for component errors
+
+```tsx
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends React.Component<
+  React.PropsWithChildren<{}>,
+  ErrorBoundaryState
+> {
+  constructor(props: React.PropsWithChildren<{}>) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Component error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <View style={styles.errorFallback}>
+          <Text>Something went wrong.</Text>
+          <Button onPress={() => this.setState({ hasError: false })}>
+            Try again
+          </Button>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+```
+
+## Testing Architecture
+
+### Testable React Native Component Design
+
+- Design components with testing in mind
+- Use dependency injection for external services
+- Keep business logic in custom hooks
+
+```tsx
+interface UserListProps {
+  userService: UserService;
+}
+
+export const UserList: React.FC<UserListProps> = ({ userService }) => {
+  const { data: users, loading, error } = useUsers(userService);
+
+  if (loading) return <Text>Loading...</Text>;
+  if (error) return <Text>Error: {error}</Text>;
+
+  return (
+    <FlatList
+      data={users}
+      keyExtractor={user => user.id}
+      renderItem={({ item }) => <Text>{item.name}</Text>}
+    />
+  );
+};
+
+// Test
+it('UserList displays users when loaded', async () => {
+  const mockUserService = {
+    fetchUsers: jest.fn().mockResolvedValue([{ id: '1', name: 'John' }])
+  };
+
+  const { findByText } = render(<UserList userService={mockUserService} />);
+
+  expect(await findByText('John')).toBeTruthy();
+});
+```
diff --git a/6-mobile-app/javascript/react-native/react-native-2-ui-patterns-rules.mdc b/6-mobile-app/javascript/react-native/react-native-2-ui-patterns-rules.mdc
new file mode 100644
index 0000000..a7e0940
--- /dev/null
+++ b/6-mobile-app/javascript/react-native/react-native-2-ui-patterns-rules.mdc
@@ -0,0 +1,331 @@
+---
+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
+---
+
+# React Native UI/UX Patterns Rules
+
+```tsx
+// Required imports for the examples below
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+} from "react-native";
+```
+
+## React Native Responsive Design Patterns
+
+### Mobile-First Components
+
+- Design components for mobile viewports by default
+- Use `Dimensions` or `useWindowDimensions` for layout-based decisions
+- Implement props to conditionally render layout variations
+
+```tsx
+import { useWindowDimensions } from "react-native";
+
+interface ResponsiveCardProps {
+  title: string;
+  content: string;
+  layout?: "mobile" | "desktop" | "auto";
+}
+
+export const ResponsiveCard: React.FC<ResponsiveCardProps> = ({
+  title,
+  content,
+  layout = "auto",
+}) => {
+  const { width } = useWindowDimensions();
+  const isMobile = layout === "mobile" || (layout === "auto" && width < 768);
+
+  return (
+    <View style={[styles.card, isMobile ? styles.column : styles.row]}>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.content}>{content}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: { padding: 16, borderWidth: 1, borderRadius: 8 },
+  row: { flexDirection: "row" },
+  column: { flexDirection: "column" },
+  title: { fontSize: 18, fontWeight: "600", marginBottom: 8 },
+  content: { flex: 1 },
+});
+```
+
+### Flexible Layout Components
+
+- Use Flexbox layout for responsive spacing and alignment
+- Create reusable layout components with props for direction and spacing
+
+```tsx
+interface FlexLayoutProps {
+  children: React.ReactNode;
+  direction?: "row" | "column";
+  justify?: "flex-start" | "center" | "flex-end" | "space-between";
+  gap?: number;
+}
+
+export const FlexLayout: React.FC<FlexLayoutProps> = ({
+  children,
+  direction = "row",
+  justify = "flex-start",
+  spacing = 8,
+}) => (
+  <View style={{ flexDirection: direction, justifyContent: justify, gap }}>
+    {children}
+  </View>
+);
+```
+
+## React Native User Interface Patterns
+
+### Interactive State Management
+
+- Handle interactive states using React state
+
+```tsx
+interface InteractiveButtonProps {
+  children: React.ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  variant?: "primary" | "secondary" | "danger";
+}
+
+export const InteractiveButton: React.FC<InteractiveButtonProps> = ({
+  children,
+  onPress,
+  disabled = false,
+  loading = false,
+  variant = "primary",
+}) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const backgroundColor = {
+    primary: "#3B82F6",
+    secondary: "#E5E7EB",
+    danger: "#EF4444",
+  }[variant];
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled || loading}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+      style={{
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 6,
+        backgroundColor,
+        opacity: disabled ? 0.5 : 1,
+        transform: [{ scale: isPressed ? 0.95 : 1 }],
+      }}
+    >
+      {loading ? <ActivityIndicator color="#fff" /> : children}
+    </TouchableOpacity>
+  );
+};
+```
+
+### Loading and Empty States
+
+- Create components for loading and empty views
+
+```tsx
+interface LoadingStateProps {
+  text?: string;
+}
+
+export const LoadingState: React.FC<LoadingStateProps> = ({ text }) => (
+  <View style={{ alignItems: "center", justifyContent: "center" }}>
+    <ActivityIndicator size="large" color="#3B82F6" />
+    {text && <Text style={{ marginTop: 8 }}>{text}</Text>}
+  </View>
+);
+
+interface EmptyStateProps {
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    onPress: () => void;
+  };
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  title,
+  description,
+  action,
+}) => (
+  <View style={{ alignItems: "center", padding: 32 }}>
+    <Text style={{ fontSize: 18, fontWeight: "600" }}>{title}</Text>
+    {description && <Text style={{ marginVertical: 12 }}>{description}</Text>}
+    {action && (
+      <TouchableOpacity
+        onPress={action.onPress}
+        style={{ backgroundColor: "#3B82F6", padding: 12, borderRadius: 6 }}
+      >
+        <Text style={{ color: "#fff" }}>{action.label}</Text>
+      </TouchableOpacity>
+    )}
+  </View>
+);
+```
+
+## React Native Form Design Patterns
+
+### Controlled Form Components
+
+```tsx
+interface FormFieldProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  secureTextEntry?: boolean;
+}
+
+export const FormField: React.FC<FormFieldProps> = ({
+  label,
+  value,
+  onChange,
+  error,
+  secureTextEntry = false,
+}) => (
+  <View style={{ marginBottom: 16 }}>
+    <Text style={{ marginBottom: 4 }}>{label}</Text>
+    <TextInput
+      value={value}
+      onChangeText={onChange}
+      secureTextEntry={secureTextEntry}
+      style={{
+        borderWidth: 1,
+        borderColor: error ? "red" : "#ccc",
+        padding: 8,
+        borderRadius: 4,
+      }}
+    />
+    {error && <Text style={{ color: "red", marginTop: 4 }}>{error}</Text>}
+  </View>
+);
+```
+
+## React Native Touch and Gesture Patterns
+
+### Touch-Friendly Components
+
+- Ensure components are at least 44x44 for accessibility
+- Handle touch gestures using `PanResponder` or state-based logic
+
+```tsx
+import { GestureResponderEvent } from "react-native";
+
+interface TouchableCardProps {
+  children: React.ReactNode;
+  onTap?: () => void;
+}
+
+export const TouchableCard: React.FC<TouchableCardProps> = ({
+  children,
+  onTap,
+}) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <TouchableOpacity
+      onPress={onTap}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+      style={{
+        padding: 12,
+        borderRadius: 6,
+        transform: [{ scale: isPressed ? 0.95 : 1 }],
+        backgroundColor: "#fff",
+      }}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};
+```
+
+## React Native Navigation Patterns
+
+### Navigation Components
+
+- Use `@react-navigation/native` for navigation
+- Use active state based on route name or focus status
+
+```tsx
+import { useNavigation, useRoute } from "@react-navigation/native";
+
+interface NavigationItem {
+  name: string;
+  label: string;
+  onPress: () => void;
+}
+
+interface NavigationProps {
+  items: NavigationItem[];
+}
+
+export const Navigation: React.FC<NavigationProps> = ({ items }) => {
+  const route = useRoute();
+
+  return (
+    <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
+      {items.map((item) => {
+        const isActive = route.name === item.name;
+        return (
+          <TouchableOpacity key={item.name} onPress={item.onPress}>
+            <Text style={{ color: isActive ? "#3B82F6" : "#444" }}>
+              {item.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+```
+
+## React Native Performance UI Patterns
+
+### Virtual Scrolling for Large Lists
+
+- Use FlatList with `initialNumToRender` and `windowSize` for performance
+
+```tsx
+interface User {
+  name: string;
+}
+
+export const UserList: React.FC<{ users: User[] }> = ({ users }) => {
+  return (
+    <FlatList
+      data={users}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item }) => (
+        <View
+          style={{ padding: 12, borderBottomWidth: 1, borderColor: "#ddd" }}
+        >
+          <Text>{item.name}</Text>
+        </View>
+      )}
+      initialNumToRender={10}
+      windowSize={5}
+    />
+  );
+};
+```
diff --git a/6-mobile-app/javascript/react-native/react-native-3-data-state-rules.mdc b/6-mobile-app/javascript/react-native/react-native-3-data-state-rules.mdc
new file mode 100644
index 0000000..94153e5
--- /dev/null
+++ b/6-mobile-app/javascript/react-native/react-native-3-data-state-rules.mdc
@@ -0,0 +1,374 @@
+---
+description: USE WHEN handling application state and data flow for efficient, predictable data and state management
+globs: ["**/*"]
+alwaysApply: false
+---
+
+# React Native Data & State Management Rules
+
+## React State Management Principles
+
+### State Ownership and Boundaries
+
+- Keep state as close to its usage as possible with `useState`
+- Lift state up only when multiple components genuinely need access
+- Avoid prop drilling beyond 2-3 component levels
+- Use React Context for deeply nested sharing, custom hooks for logic reuse
+
+```tsx
+// Good: State close to usage
+const TodoItem = ({ todo, onToggle }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <Pressable
+      onPressIn={() => setIsHovered(true)}
+      onPressOut={() => setIsHovered(false)}
+    >
+      <CheckBox
+        value={todo.completed}
+        onValueChange={() => onToggle(todo.id)}
+      />
+      <Text>{todo.text}</Text>
+      {isHovered && <Button title="Delete" onPress={() => {}} />}
+    </Pressable>
+  );
+};
+
+// Good: Lifted state for sharing
+const TodoApp = () => {
+  const [todos, setTodos] = useState([]);
+
+  const toggleTodo = (id) => {
+    setTodos((currentTodos) =>
+      currentTodos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo
+      )
+    );
+  };
+
+  return (
+    <View>
+      <TodoList todos={todos} onToggle={toggleTodo} />
+      <TodoStats todos={todos} />
+    </View>
+  );
+};
+```
+
+### Immutability Patterns with React State
+
+- Always use functional updates with `useState` and `useReducer`
+- Never mutate existing state objects directly
+- Use spread operators for updates
+
+```tsx
+const UserProfile = () => {
+  const [user, setUser] = useState({
+    name: "",
+    email: "",
+    preferences: { theme: "light", notifications: true },
+  });
+
+  const updateName = (name) => {
+    setUser((prevUser) => ({ ...prevUser, name }));
+  };
+
+  const updatePreferences = (newPreferences) => {
+    setUser((prevUser) => ({
+      ...prevUser,
+      preferences: { ...prevUser.preferences, ...newPreferences },
+    }));
+  };
+
+  const toggleNotifications = () => {
+    setUser((prevUser) => ({
+      ...prevUser,
+      preferences: {
+        ...prevUser.preferences,
+        notifications: !prevUser.preferences.notifications,
+      },
+    }));
+  };
+
+  return (
+    <View>
+      <TextInput value={user.name} onChangeText={updateName} />
+      <Button
+        title={user.preferences.notifications ? "Disable" : "Enable"}
+        onPress={toggleNotifications}
+      />
+    </View>
+  );
+};
+```
+
+### State Types and Separation
+
+- Distinguish between UI state and business/domain state
+- Use local state for UI concerns, global state for shared data
+- Handle server state with React Query/TanStack Query
+- Compute derived state with `useMemo`
+
+```tsx
+// UI State - local to component
+const SearchBox = ({ onSearch }) => {
+  const [query, setQuery] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <TextInput
+      value={query}
+      onChangeText={setQuery}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      onSubmitEditing={() => onSearch(query)}
+    />
+  );
+};
+
+// Business State - shared across components
+const useUserPreferences = () => {
+  const [preferences, setPreferences] = useState(defaultPreferences);
+
+  useEffect(() => {
+    (async () => {
+      const saved = await AsyncStorage.getItem("userPreferences");
+      if (saved) setPreferences(JSON.parse(saved));
+    })();
+  }, []);
+
+  const updatePreferences = useCallback((updates) => {
+    setPreferences((prev) => {
+      const newPreferences = { ...prev, ...updates };
+      AsyncStorage.setItem("userPreferences", JSON.stringify(newPreferences));
+      return newPreferences;
+    });
+  }, []);
+
+  return { preferences, updatePreferences };
+};
+```
+
+## React Data Flow Architecture
+
+### Unidirectional Data Flow with Hooks
+
+- Data flows down through props
+- Events flow up through callback props
+- Use custom hooks to encapsulate stateful logic
+
+```tsx
+const useTodos = () => {
+  const [todos, setTodos] = useState([]);
+
+  const addTodo = useCallback((text) => {
+    const newTodo = {
+      id: Date.now().toString(),
+      text,
+      completed: false,
+      createdAt: new Date(),
+    };
+    setTodos((prev) => [...prev, newTodo]);
+  }, []);
+
+  const toggleTodo = useCallback((id) => {
+    setTodos((prev) =>
+      prev.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo
+      )
+    );
+  }, []);
+
+  const deleteTodo = useCallback((id) => {
+    setTodos((prev) => prev.filter((todo) => todo.id !== id));
+  }, []);
+
+  return {
+    todos,
+    addTodo,
+    toggleTodo,
+    deleteTodo,
+  };
+};
+```
+
+### Complex State with useReducer
+
+- Use `useReducer` for complex state with multiple actions
+- Implement action creators for type safety
+- Keep reducer functions pure and predictable
+
+```tsx
+const todoReducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TODO":
+      return {
+        ...state,
+        todos: [
+          ...state.todos,
+          {
+            id: Date.now().toString(),
+            text: action.payload.text,
+            completed: false,
+            createdAt: new Date(),
+          },
+        ],
+      };
+
+    case "TOGGLE_TODO":
+      return {
+        ...state,
+        todos: state.todos.map((todo) =>
+          todo.id === action.payload.id
+            ? { ...todo, completed: !todo.completed }
+            : todo
+        ),
+      };
+
+    default:
+      return state;
+  }
+};
+
+const useTodoReducer = () => {
+  const [state, dispatch] = useReducer(todoReducer, {
+    todos: [],
+    filter: "all",
+  });
+
+  const addTodo = (text) => dispatch({ type: "ADD_TODO", payload: { text } });
+  const toggleTodo = (id) => dispatch({ type: "TOGGLE_TODO", payload: { id } });
+
+  return { state, addTodo, toggleTodo };
+};
+```
+
+## React Context for Global State
+
+### Context Provider Pattern
+
+- Use React Context for truly global state
+- Create typed context with custom hooks
+- Split contexts by concern to avoid unnecessary re-renders
+
+```tsx
+const AuthContext = createContext();
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const login = async (email, password) => {
+    setIsLoading(true);
+    try {
+      const response = await authApi.login({ email, password });
+      setUser(response.user);
+      await AsyncStorage.setItem("authToken", response.token);
+    } catch (err) {
+      setError(err.message || "Login failed");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logout = () => {
+    setUser(null);
+    AsyncStorage.removeItem("authToken");
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, isLoading, error }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+```
+
+## React State Persistence
+
+### Local Storage with React Hooks
+
+- Use `AsyncStorage` for state persistence
+
+```tsx
+const useAsyncStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(initialValue);
+
+  useEffect(() => {
+    const loadValue = async () => {
+      const item = await AsyncStorage.getItem(key);
+      if (item) setStoredValue(JSON.parse(item));
+    };
+    loadValue();
+  }, [key]);
+
+  const setValue = async (value) => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setStoredValue(valueToStore);
+    await AsyncStorage.setItem(key, JSON.stringify(valueToStore));
+  };
+
+  return [storedValue, setValue];
+};
+```
+
+### Session Management with React
+
+- Handle session state with `AsyncStorage` and context
+
+```tsx
+const useSessionManagement = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(null);
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = await AsyncStorage.getItem("authToken");
+      if (!token) {
+        setIsAuthenticated(false);
+        return;
+      }
+      try {
+        const response = await authApi.verifyToken(token);
+        setUser(response.user);
+        setIsAuthenticated(true);
+      } catch {
+        await AsyncStorage.removeItem("authToken");
+        setIsAuthenticated(false);
+      }
+    };
+    checkAuth();
+  }, []);
+
+  const login = async (credentials) => {
+    const response = await authApi.login(credentials);
+    await AsyncStorage.setItem("authToken", response.token);
+    setUser(response.user);
+    setIsAuthenticated(true);
+  };
+
+  const logout = () => {
+    AsyncStorage.removeItem("authToken");
+    setUser(null);
+    setIsAuthenticated(false);
+  };
+
+  return {
+    isAuthenticated,
+    user,
+    login,
+    logout,
+    isLoading: isAuthenticated === null,
+  };
+};
+```
diff --git a/6-mobile-app/javascript/react-native/react-native-4-api-integration-rules.mdc b/6-mobile-app/javascript/react-native/react-native-4-api-integration-rules.mdc
new file mode 100644
index 0000000..0bcab1f
--- /dev/null
+++ b/6-mobile-app/javascript/react-native/react-native-4-api-integration-rules.mdc
@@ -0,0 +1,300 @@
+---
+description: USE WHEN integrating APIs
+globs: ["**/*"]
+alwaysApply: false
+---
+
+# React Native API Integration and Service Layer Rules
+
+## React Query/TanStack Query Integration
+
+### Service Layer Architecture
+
+- Create abstraction layer for all API interactions
+- Handle errors at service boundaries, not in components
+- Transform API responses to match application models
+- Implement consistent request/response patterns
+
+```tsx
+interface ApiResponse<T> {
+  data: T;
+  status: number;
+  message?: string;
+}
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  avatar?: string;
+}
+
+interface CreateUserRequest {
+  email: string;
+  firstName: string;
+  lastName: string;
+  password: string;
+}
+
+class UserService {
+  private baseURL = `${Config.API_HOST}/users`;
+
+  async getUsers(): Promise<User[]> {
+    const response = await fetch(this.baseURL);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch users: ${response.statusText}`);
+    }
+    const apiResponse: ApiResponse<User[]> = await response.json();
+    return apiResponse.data;
+  }
+
+  async getUsersPaginated(
+    page: number = 0,
+    limit: number = 20
+  ): Promise<User[]> {
+    const params = new URLSearchParams({
+      page: page.toString(),
+      limit: limit.toString(),
+    });
+
+    const response = await fetch(`${this.baseURL}?${params}`);
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch paginated users: ${response.statusText}`
+      );
+    }
+    const apiResponse: ApiResponse<User[]> = await response.json();
+    return apiResponse.data;
+  }
+
+  async getUser(id: string): Promise<User> {
+    const response = await fetch(`${this.baseURL}/${id}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch user: ${response.statusText}`);
+    }
+    const apiResponse: ApiResponse<User> = await response.json();
+    return apiResponse.data;
+  }
+
+  async createUser(userData: CreateUserRequest): Promise<User> {
+    const response = await fetch(this.baseURL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(userData),
+    });
+
+    if (!response.ok) {
+      let detail = "Failed to create user";
+      try {
+        const body = await response.json();
+        detail = body?.message ?? detail;
+      } catch (_) {
+        // non-JSON body – keep default detail
+      }
+      throw new Error(detail);
+    }
+
+    const apiResponse: ApiResponse<User> = await response.json();
+    return apiResponse.data;
+  }
+
+  async updateUser(id: string, userData: Partial<User>): Promise<User> {
+    const response = await fetch(`${this.baseURL}/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(userData),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to update user: ${response.statusText}`);
+    }
+
+    const apiResponse: ApiResponse<User> = await response.json();
+    return apiResponse.data;
+  }
+}
+
+export const userService = new UserService();
+```
+
+### React Query Hooks
+
+- Use React Query for server state management
+- Implement proper loading, error, and success states
+- Use optimistic updates for better UX
+
+```tsx
+import {
+  useQuery,
+  useMutation,
+  useQueryClient,
+  useInfiniteQuery,
+} from "@tanstack/react-query";
+
+export const useUsers = () => {
+  return useQuery({
+    queryKey: ["users"],
+    queryFn: () => userService.getUsers(),
+    staleTime: 5 * 60 * 1000,
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+  });
+};
+
+export const useUser = (userId: string) => {
+  return useQuery({
+    queryKey: ["users", userId],
+    queryFn: () => userService.getUser(userId),
+    enabled: !!userId,
+    staleTime: 5 * 60 * 1000,
+  });
+};
+
+export const useCreateUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userData: CreateUserRequest) =>
+      userService.createUser(userData),
+    onSuccess: (newUser) => {
+      queryClient.setQueryData(["users"], (oldUsers: User[] | undefined) => {
+        return oldUsers ? [...oldUsers, newUser] : [newUser];
+      });
+      queryClient.invalidateQueries(["users"]);
+    },
+  });
+};
+
+export const useUpdateUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, userData }: { id: string; userData: Partial<User> }) =>
+      userService.updateUser(id, userData),
+    onMutate: async ({ id, userData }) => {
+      await queryClient.cancelQueries(["users", id]);
+      const previousUser = queryClient.getQueryData(["users", id]);
+      queryClient.setQueryData(["users", id], (old: User | undefined) => {
+        return old ? { ...old, ...userData } : undefined;
+      });
+      return { previousUser };
+    },
+    onError: (error, { id }, context) => {
+      if (context?.previousUser) {
+        queryClient.setQueryData(["users", id], context.previousUser);
+      }
+    },
+    onSettled: (data, error, { id }) => {
+      queryClient.invalidateQueries(["users", id]);
+      queryClient.invalidateQueries(["users"]);
+    },
+  });
+};
+```
+
+## Error Handling Strategies
+
+### Comprehensive Error Handling
+
+- Catch and handle errors at appropriate levels
+- Provide meaningful error messages to users
+- Implement retry mechanisms for transient failures
+
+```tsx
+import { useEffect, useState, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+
+export const useApiError = () => {
+  const [error, setError] = useState<string | null>(null);
+
+  const handleError = useCallback((error: unknown) => {
+    if (error instanceof Error) {
+      setError(error.message);
+    } else {
+      setError("An unexpected error occurred");
+    }
+  }, []);
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  return { error, handleError, clearError };
+};
+
+export const useNetworkAwareQuery = <T,>(
+  queryKey: string[],
+  queryFn: () => Promise<T>,
+  options: { retries?: number; retryDelay?: number } = {}
+) => {
+  const [isOnline, setIsOnline] = useState(true);
+
+  useEffect(() => {
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => setIsOnline(false);
+
+    const unsubscribe = NetInfo.addEventListener((state) =>
+      setIsOnline(state.isConnected ?? true)
+    );
+
+    return unsubscribe;
+  }, []);
+
+  return useQuery({
+    queryKey,
+    queryFn,
+    enabled: isOnline,
+    retry: (failureCount, error) => {
+      if (!isOnline) return false;
+      if (error instanceof Error && error.message.includes("Network")) {
+        return failureCount < (options.retries || 3);
+      }
+      return false;
+    },
+    retryDelay: options.retryDelay || 1000,
+  });
+};
+```
+
+## Request Optimization
+
+### Request Deduplication and Batching
+
+- Implement request deduplication for concurrent requests
+- Batch multiple API calls when possible
+
+```tsx
+class RequestDeduplicator {
+  private pendingRequests = new Map<string, Promise<unknown>>();
+
+  async dedupe<T>(key: string, requestFn: () => Promise<T>, timeoutMs = 15000): Promise<T> {
+    if (this.pendingRequests.has(key)) {
+      return this.pendingRequests.get(key)!;
+    }
+
+    const timeout = new Promise<never>((_, reject) =>
++      setTimeout(() => reject(new Error(`Request timed out after ${timeoutMs}ms`)), timeoutMs)
++    );
++    const request = Promise.race([requestFn(), timeout])
++      .finally(() => this.pendingRequests.delete(key)) as Promise<T>;
+
+    this.pendingRequests.set(key, request);
+    return request;
+  }
+}
+
+const requestDeduplicator = new RequestDeduplicator();
+
+export const useInfiniteUsers = (pageSize: number = 20) => {
+  return useInfiniteQuery({
+    queryKey: ["users", "infinite"],
+    queryFn: ({ pageParam = 0 }) =>
+      userService.getUsersPaginated(pageParam, pageSize),
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.length === pageSize ? allPages.length : undefined;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+};
+```
diff --git a/6-mobile-app/javascript/react-native/react-native-5-performance-rules.mdc b/6-mobile-app/javascript/react-native/react-native-5-performance-rules.mdc
new file mode 100644
index 0000000..de28f03
--- /dev/null
+++ b/6-mobile-app/javascript/react-native/react-native-5-performance-rules.mdc
@@ -0,0 +1,260 @@
+---
+description: USE WHEN optimizing for speed, efficiency, and user experience while maintaining the performance optimization principles
+globs: ["**/*"]
+alwaysApply: false
+---
+# React Native Performance Optimization Rules
+
+## React Component Optimization
+
+### Rendering Optimization with React.memo and Hooks
+- Use `React.memo` for components that receive stable props
+- Implement `useMemo` and `useCallback` for expensive computations
+- Avoid creating objects and functions during render
+- Use proper key props for list rendering
+
+```tsx
+interface UserCardProps {
+  user: User;
+  onEdit: (user: User) => void;
+  isSelected: boolean;
+}
+
+const UserCard = React.memo(({ user, onEdit, isSelected }: UserCardProps) => {
+  const formattedData = useMemo(() => {
+    return {
+      fullName: `${user.firstName} ${user.lastName}`,
+      memberSince: new Date(user.createdAt).getFullYear(),
+      initials: `${user.firstName[0]}${user.lastName[0]}`
+    };
+  }, [user.firstName, user.lastName, user.createdAt]);
+
+  const handleEdit = useCallback(() => {
+    onEdit(user);
+  }, [onEdit, user]);
+
+  return (
+    <View style={[styles.userCard, isSelected && styles.selected]}>
+      <View style={styles.avatar}><Text>{formattedData.initials}</Text></View>
+      <View>
+        <Text style={styles.name}>{formattedData.fullName}</Text>
+        <Text>Member since {formattedData.memberSince}</Text>
+      </View>
+      <Button title="Edit" onPress={handleEdit} />
+    </View>
+  );
+}, (prevProps, nextProps) => {
+  return (
+    prevProps.user.id === nextProps.user.id &&
+    prevProps.user.firstName === nextProps.user.firstName &&
+    prevProps.user.lastName === nextProps.user.lastName &&
+    prevProps.isSelected === nextProps.isSelected &&
+    prevProps.onEdit === nextProps.onEdit
+  );
+});
+
+UserCard.displayName = 'UserCard';
+
+interface UserListProps {
+  users: User[];
+  selectedIds: Set<string>;
+  onEditUser: (user: User) => void;
+}
+
+export const UserList: React.FC<UserListProps> = ({ users, selectedIds, onEditUser }) => {
+  const memoizedOnEdit = useCallback((user: User) => {
+    onEditUser(user);
+  }, [onEditUser]);
+
+  return (
+    <FlatList
+      data={users}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item }) => (
+        <UserCard
+          user={item}
+          isSelected={selectedIds.has(item.id)}
+          onEdit={memoizedOnEdit}
+        />
+      )}
+    />
+  );
+};
+```
+
+### Avoiding Common Performance Anti-patterns
+- Don't create objects or functions in render
+- Don't use array indices as keys for dynamic lists
+- Avoid unnecessary useEffect dependencies
+
+```tsx
+// Bad
+const BadComponent: React.FC<{ user: User }> = ({ user }) => {
+  return (
+    <UserProfile
+      user={user}
+      style={{ padding: 16, margin: 8 }}
+      onSave={() => saveUser(user)}
+    />
+  );
+};
+
+// Good
+const GoodComponent: React.FC<{ user: User }> = ({ user }) => {
+  const style = useMemo(() => ({ padding: 16, margin: 8 }), []);
+  const handleSave = useCallback(() => saveUser(user), [user]);
+
+  return (
+    <UserProfile
+      user={user}
+      style={style}
+      onSave={handleSave}
+    />
+  );
+};
+
+// Bad
+const BadList: React.FC<{ items: Item[] }> = ({ items }) => (
+  <FlatList
+    data={items}
+    renderItem={({ item, index }) => <Text key={index}>{item.name}</Text>}
+  />
+);
+
+// Good
+const GoodList: React.FC<{ items: Item[] }> = ({ items }) => (
+  <FlatList
+    data={items}
+    keyExtractor={(item) => item.id}
+    renderItem={({ item }) => <Text>{item.name}</Text>}
+  />
+);
+```
+
+## Code Splitting and Lazy Loading
+
+### Dynamic Imports
+- Use `React.lazy` and `Suspense` for dynamic imports (React Native Web only)
+- Use conditional rendering and `import()` inside handlers for features/components
+
+```tsx
+// Dynamic import hook
+const useDynamicImport = <T>(importFunc: () => Promise<{ default: T }>) => {
+  const [component, setComponent] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const loadComponent = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const module = await importFunc();
+      setComponent(module.default);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to load component'));
+    } finally {
+      setLoading(false);
+    }
+  }, [importFunc]);
+
+  return { component, loading, error, loadComponent };
+};
+```
+
+## Large List Optimization
+
+### FlatList Optimization
+- Use `FlatList` for large lists
+- Use `getItemLayout`, `initialNumToRender`, `windowSize`, and `removeClippedSubviews` appropriately
+
+```tsx
+<FlatList
+  data={users}
+  keyExtractor={(item) => item.id}
+  renderItem={({ item }) => <UserCard user={item} />}
+  initialNumToRender={10}
+  maxToRenderPerBatch={10}
+  windowSize={5}
+  removeClippedSubviews={true}
+/>
+```
+
+## Image Optimization
+
+### Lazy Loading with Placeholder
+- Use libraries like `react-native-fast-image` for performance
+- Use `onLoadEnd`, `onLoad`, and placeholder elements
+
+```tsx
+import FastImage from 'react-native-fast-image';
+
+export const LazyImage: React.FC<{ uri: string; style?: ViewStyle }> = ({ uri, style }) => {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <View style={style}>
+      {!loaded && <ActivityIndicator />}
+      <FastImage
+        source={{ uri }}
+        style={[style, !loaded && { display: 'none' }]}
+        onLoadEnd={() => setLoaded(true)}
+      />
+    </View>
+  );
+};
+```
+
+## State and Re-render Optimization
+
+### Context Optimization
+- Split context by concern
+- Memoize context values
+
+```tsx
+const UserContext = createContext<User | null>(null);
+const UserActionsContext = createContext<Actions | null>(null);
+
+export const UserProvider: React.FC = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+
+  const actions = useMemo(() => ({
+    updateUser: (updates: Partial<User>) => {
+      setUser(prev => prev ? { ...prev, ...updates } : null);
+    },
+    deleteUser: () => setUser(null)
+  }), []);
+
+  return (
+    <UserContext.Provider value={user}>
+      <UserActionsContext.Provider value={actions}>
+        {children}
+      </UserActionsContext.Provider>
+    </UserContext.Provider>
+  );
+};
+```
+
+## Performance Monitoring
+
+### Manual Logging
+- Add logging in development builds
+- Measure expensive computations
+
+```tsx
+const usePerformanceMonitor = (componentName: string) => {
+  const renderStart = useRef(Date.now());
+  const renderCount = useRef(0);
+
+  useEffect(() => {
+    renderCount.current++;
+    const renderTime = Date.now() - renderStart.current;
+    if (__DEV__) {
+      console.log(`${componentName} render #${renderCount.current} took ${renderTime}ms`);
+    }
+    renderStart.current = Date.now();
+  });
+
+  return renderCount.current;
+};
+```
diff --git a/6-mobile-app/javascript/react-native/react-native-6-security-rules.mdc b/6-mobile-app/javascript/react-native/react-native-6-security-rules.mdc
new file mode 100644
index 0000000..962e100
--- /dev/null
+++ b/6-mobile-app/javascript/react-native/react-native-6-security-rules.mdc
@@ -0,0 +1,337 @@
+---
+description: USE WHEN securing frontend applications to protect both your users and your systems from common security vulnerabilities and threats
+applications and users from common security vulnerabilities
+globs: ["**/*"]
+alwaysApply: false
+---
+
+# React Native Security Rules
+
+## Input Security and XSS Prevention
+
+### JSX and `dangerouslySetInnerHTML`
+
+- Not applicable in React Native (no HTML rendering)
+- Avoid HTML-based user-generated content entirely
+- Always validate and sanitize user inputs before rendering or processing
+
+### Input sanitization hook
+
+```tsx
+import { useState, useCallback } from "react";
+// Client-side sanitization in React Native should focus on basic input validation
+
+export const useSanitizedInput = (initialValue: string = "") => {
+  const [value, setValue] = useState(initialValue);
+
+  const updateValue = useCallback((newValue: string) => {
+    // Keep it simple in RN: trim control chars and normalize whitespace
+    const sanitized = newValue
+      .replace(/[\u0000-\u001F\u007F]/g, "")
+      .replace(/\s+/g, " ");
+    setValue(sanitized);
+  }, []);
+
+  return [value, updateValue] as const;
+};
+```
+
+### Safe Input Component
+
+```tsx
+import React from "react";
+import { TextInput } from "react-native";
+
+interface SafeInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  maxLength?: number;
+  allowedChars?: RegExp;
+}
+
+export const SafeInput: React.FC<SafeInputProps> = ({
+  value,
+  onChange,
+  placeholder,
+  maxLength = 500,
+  allowedChars = /^[a-zA-Z0-9\s\-_@.]+$/,
+}) => {
+  const handleChange = (text: string) => {
+    if (text.length > maxLength) return;
+    const filtered = text
+      .split("")
+      .filter((c) => allowedChars.test(c))
+      .join("");
+    onChange(filtered);
+  };
+
+  return (
+    <TextInput
+      value={value}
+      onChangeText={handleChange}
+      placeholder={placeholder}
+      maxLength={maxLength}
+    />
+  );
+};
+```
+
+## URL Safety
+
+- Validate URLs before opening
+- Prevent `javascript:` protocol
+
+```tsx
+import { Linking, Alert } from "react-native";
+
+// Note: URL constructor is only available on Hermes runtime or when polyfilled.
+// This implementation provides a fallback for apps running on JSC.
+export const isSafeUrl = (url: string): boolean => {
+  // Try using URL constructor if available
+  if (typeof URL === "function") {
+    try {
+      const parsedUrl = new URL(url);
+      const safeProtocols = ["http:", "https:", "mailto:"];
+      return safeProtocols.includes(parsedUrl.protocol);
+    } catch {
+      return false;
+    }
+  }
+
+  // Fallback for JSC: Basic protocol check using regex
+  try {
+    const protocolMatch = url.match(/^([^:]+):/);
+    if (!protocolMatch) return false;
+    const protocol = protocolMatch[0].toLowerCase();
+    return ["http:", "https:", "mailto:"].includes(protocol);
+  } catch {
+    return false;
+  }
+};
+
+export const openSafeLink = async (url: string) => {
+  if (!isSafeUrl(url)) {
+    Alert.alert("Unsafe link blocked");
+    return;
+  }
+
+  try {
+    const supported = await Linking.canOpenURL(url);
+    if (supported) {
+      await Linking.openURL(url);
+    } else {
+      Alert.alert("Cannot open URL");
+    }
+  } catch (e) {
+    Alert.alert("Failed to open URL");
+  }
+};
+```
+
+## Authentication and Authorization
+
+### Secure Token Handling
+
+```tsx
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+class SecureTokenStorage {
+  static readonly ACCESS_TOKEN_KEY = "access_token";
+
+  static async setTokens(accessToken: string) {
+    await AsyncStorage.setItem(this.ACCESS_TOKEN_KEY, accessToken);
+  }
+
+  static async getAccessToken(): Promise<string | null> {
+    return AsyncStorage.getItem(this.ACCESS_TOKEN_KEY);
+  }
+
+  static async clearTokens() {
+    await AsyncStorage.removeItem(this.ACCESS_TOKEN_KEY);
+  }
+}
+```
+
+### Auth Hook
+
+```tsx
+import { useState, useCallback } from "react";
+
+interface AuthState {
+  user: any;
+  accessToken: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+}
+
+export const useAuth = () => {
+  const [authState, setAuthState] = useState<AuthState>({
+    user: null,
+    accessToken: null,
+    isAuthenticated: false,
+    isLoading: false,
+  });
+
+  const login = useCallback(async (email: string, password: string) => {
+    setAuthState((prev) => ({ ...prev, isLoading: true }));
+    try {
+      const response = await fetch("https://example.com/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+      if (!response.ok) {
+        throw new Error(`Auth failed (${response.status})`);
+      }
+      const { accessToken, user } = await response.json().catch(() => {
+        throw new Error("Invalid auth response");
+      });
+      await SecureTokenStorage.setTokens(accessToken);
+
+      setAuthState({
+        user,
+        accessToken,
+        isAuthenticated: true,
+        isLoading: false,
+      });
+    } catch (err) {
+      setAuthState({
+        user: null,
+        accessToken: null,
+        isAuthenticated: false,
+        isLoading: false,
+      });
+    }
+  }, []);
+
+  const logout = useCallback(async () => {
+    await SecureTokenStorage.clearTokens();
+    setAuthState({
+      user: null,
+      accessToken: null,
+      isAuthenticated: false,
+      isLoading: false,
+    });
+  }, []);
+
+  return { ...authState, login, logout };
+};
+```
+
+## Form Security
+
+- Use input validation
+- Protect against excessive login attempts
+
+```tsx
+import { useState, useCallback, useMemo } from "react";
+
+export const useRateLimit = (maxAttempts = 5, windowMs = 15 * 60 * 1000) => {
+  const [attempts, setAttempts] = useState<number[]>([]);
+
+  const isRateLimited = useMemo(() => {
+    const now = Date.now();
+    return attempts.filter((t) => now - t < windowMs).length >= maxAttempts;
+  }, [attempts, windowMs, maxAttempts]);
+
+  const recordAttempt = useCallback(() => {
+    const now = Date.now();
+    setAttempts((prev) => [...prev.filter((t) => now - t < windowMs), now]);
+  }, [windowMs]);
+
+  const resetAttempts = useCallback(() => setAttempts([]), []);
+
+  return { isRateLimited, recordAttempt, resetAttempts };
+};
+```
+
+## Secure API Communication
+
+```tsx
+class SecureApiClient {
+  private baseURL: string;
+  private getAuthToken: () => Promise<string | null>;
+
+  constructor(baseURL: string, getAuthToken: () => Promise<string | null>) {
+    this.baseURL = baseURL;
+    this.getAuthToken = getAuthToken;
+  }
+
+  private async makeRequest<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<T> {
+    const token = await this.getAuthToken();
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 10000); // 10s
+    const config: RequestInit = {
+      ...options,
+      headers: {
+        "Content-Type": "application/json",
+        ...(token && { Authorization: `Bearer ${token}` }),
+        ...options.headers,
+      },
+      signal: controller.signal,
+    };
+
+    try {
+      const res = await fetch(`${this.baseURL}${endpoint}`, config);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const text = await res.text();
+      return text ? (JSON.parse(text) as T) : (undefined as unknown as T);
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+
+  async get<T>(endpoint: string): Promise<T> {
+    return this.makeRequest<T>(endpoint, { method: "GET" });
+  }
+
+  async post<T>(endpoint: string, data: any): Promise<T> {
+    return this.makeRequest<T>(endpoint, {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
+  }
+}
+```
+
+```tsx
+export const useSecureApi = () => {
+  const { accessToken } = useAuth();
+
+  const apiClient = useMemo(() => {
+    return new SecureApiClient(
+      "https://example.com/api",
+      async () => accessToken
+    );
+  }, [accessToken]);
+
+  return apiClient;
+};
+```
+
+```tsx
+export const useSensitiveData = () => {
+  const maskEmail = (email: string): string => {
+    if (!email.includes("@")) return email;
+    const [local, domain] = email.split("@");
+    if (!domain) return email;
+    return local.length > 2
+      ? `${local.slice(0, 2)}${"*".repeat(
+          Math.max(0, local.length - 2)
+        )}@${domain}`
+      : `${local}@${domain}`;
+  };
+
+  const maskCard = (card: string): string => {
+    const clean = card.replace(/\D/g, "");
+    if (clean.length <= 4) return clean;
+    return `${"*".repeat(clean.length - 4)}${clean.slice(-4)}`;
+  };
+
+  return { maskEmail, maskCard };
+};
+```
diff --git a/6-mobile-app/javascript/react-native/react-native-7-accessibility-rules.mdc b/6-mobile-app/javascript/react-native/react-native-7-accessibility-rules.mdc
new file mode 100644
index 0000000..da04e1c
--- /dev/null
+++ b/6-mobile-app/javascript/react-native/react-native-7-accessibility-rules.mdc
@@ -0,0 +1,203 @@
+---
+description: USE WHEN creating inclusive, accessible web applications to ensure application work for all users, including those with disabilities
+globs: ["**/*"]
+alwaysApply: false
+---
+
+# React Native Accessibility Rules
+
+## React Native Semantic Structure and ARIA-like Usage
+
+### Semantic UI Structure
+
+- Use `AccessibilityRole` to describe element purpose (e.g., "button", "header", "link")
+- Use `accessibilityLabel` to describe elements without visible text
+- Use `accessibilityHint` to describe the action/result of a control
+- Use `accessibilityElementsHidden` and `importantForAccessibility` to manage accessibility visibility
+
+```tsx
+// Good: Semantic usage with roles and labels
+import { View, Text, TouchableOpacity } from "react-native";
+
+export const ArticlePage = ({ article }) => (
+  <View accessibilityRole="main">
+    <View accessibilityRole="article">
+      <View accessibilityRole="header">
+        <Text accessibilityRole="header" aria-level={1}>
+          {article.title}
+        </Text>
+        <Text>
+          By {article.author} on {article.publishedDate}
+        </Text>
+      </View>
+
+      <View>
+        <Text accessibilityRole="header" aria-level={2}>
+          Introduction
+        </Text>
+        <Text>{article.introduction}</Text>
+      </View>
+
+      <View>
+        <Text accessibilityRole="header" aria-level={2}>
+          Main Content
+        </Text>
+        <Text>{article.content}</Text>
+      </View>
+    </View>
+
+    <View accessibilityRole="complementary">
+      <Text accessibilityRole="header" aria-level={2}>
+        Related Articles
+      </Text>
+      <View
+        accessibilityRole="navigation"
+        accessibilityLabel="Related articles"
+      >
+        {article.relatedArticles.map((related) => (
+          <TouchableOpacity
+            key={related.id}
+            accessibilityRole="link"
+            accessibilityLabel={related.title}
+            onPress={() => navigate(`/articles/${related.slug}`)}
+          >
+            <Text>{related.title}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  </View>
+);
+
+// Good: Buttons vs links
+export const ActionButtons = () => (
+  <View>
+    <TouchableOpacity
+      onPress={handleSave}
+      accessibilityRole="button"
+      accessibilityLabel="Save changes"
+    >
+      <Text>Save Changes</Text>
+    </TouchableOpacity>
+
+    <TouchableOpacity
+      onPress={handleDelete}
+      accessibilityRole="button"
+      accessibilityLabel="Delete item"
+    >
+      <Text>Delete Item</Text>
+    </TouchableOpacity>
+  </View>
+);
+```
+
+## React Native Keyboard Navigation
+
+### Focus Management
+
+- Use `accessibilityFocus()` method to shift focus
+- Use `focusable` prop to mark components as keyboard focusable
+- Use `onFocus`/`onBlur` for dynamic UI feedback
+
+```tsx
+// Focus management example
+import { useRef, useEffect } from "react";
+import { TextInput } from "react-native";
+
+export const FocusableInput = () => {
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <TextInput
+      ref={inputRef}
+      accessibilityLabel="Name input"
+      placeholder="Enter your name"
+    />
+  );
+};
+```
+
+## React Native Form Accessibility
+
+### Accessible Form Design
+
+- Associate labels using `accessibilityLabel`
+- Announce error messages using `accessibilityLiveRegion="polite"`
+- Group related inputs using `accessibilityRole="form"`
+
+```tsx
+// Accessible form field
+import { View, Text, TextInput } from "react-native";
+
+export const AccessibleFormField = ({
+  label,
+  value,
+  onChangeText,
+  error,
+  required,
+}) => (
+  <View>
+    <Text>
+      {label} {required && "*"}
+    </Text>
+    <TextInput
+      value={value}
+      onChangeText={onChangeText}
+      accessibilityLabel={label}
+      accessibilityHint={required ? "Required field" : undefined}
+      accessibilityState={{ invalid: !!error }}
+    />
+    {!!error && <Text accessibilityLiveRegion="polite">{error}</Text>}
+  </View>
+);
+```
+
+## React Native Screen Reader Optimization
+
+### Screen Reader Announcements
+
+- Use `accessibilityLiveRegion` for dynamic content
+- Use `accessibilityState` to represent loading/error states
+- Use hidden text (`accessible={false}` or `accessibilityElementsHidden`) for context management
+
+```tsx
+// Status message component
+import { View, Text } from "react-native";
+
+export const StatusMessage = ({ message, type }) => (
+  <View accessibilityLiveRegion="polite" accessibilityRole="status">
+    <Text>{message}</Text>
+  </View>
+);
+
+// Collapsible section
+import { useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+
+export const CollapsibleSection = ({ title, children }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => setIsExpanded(!isExpanded)}
+        accessibilityRole="button"
+        accessibilityLabel={`${title}, ${isExpanded ? "Collapse" : "Expand"}`}
+        accessibilityState={{ expanded: isExpanded }}
+      >
+        <Text>{title}</Text>
+      </TouchableOpacity>
+
+      {isExpanded && <View>{children}</View>}
+    </View>
+  );
+};
+```
+
+---
+
+Note: React Native does not support HTML/ARIA directly. Use accessibility props provided by React Native (e.g., `accessibilityRole`, `accessibilityLabel`, `accessibilityHint`, `accessibilityState`, `accessibilityLiveRegion`) to provide comparable semantics.
diff --git a/6-mobile-app/javascript/react-native/react-native-8-testing-rules.mdc b/6-mobile-app/javascript/react-native/react-native-8-testing-rules.mdc
new file mode 100644
index 0000000..36b6841
--- /dev/null
+++ b/6-mobile-app/javascript/react-native/react-native-8-testing-rules.mdc
@@ -0,0 +1,269 @@
+---
+description: USE WHEN writing test for ensuring testing and quality principles to build reliable, maintainable frontend applications with comprehensive test coverage and robust error handling
+globs: ["**/*"]
+alwaysApply: false
+---
+
+# React Native Testing & Quality Rules
+
+## React Native Testing Library Best Practices
+
+### User-Centric Testing with React Native Testing Library
+
+- Test components from the user's perspective
+- Use accessible queries (`getByRole`, `getByLabelText`, etc.)
+- Focus on behavior rather than implementation details
+- Test user interactions and state changes
+
+```tsx
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from "@testing-library/react-native";
+import { UserProfile } from "./UserProfile";
+import { mockUserService } from "../__mocks__/userService";
+
+describe("UserProfile", () => {
+  const defaultProps = {
+    userId: "user-123",
+    userService: mockUserService,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should display user information when loaded", async () => {
+    const mockUser = {
+      id: "user-123",
+      name: "John Doe",
+      email: "john.doe@example.com",
+    };
+
+    mockUserService.getUser.mockResolvedValue(mockUser);
+
+    render(<UserProfile {...defaultProps} />);
+
+    expect(screen.getByText(/loading/i)).toBeTruthy();
+
+    await waitFor(() => {
+      expect(screen.getByText("John Doe")).toBeTruthy();
+    });
+
+    expect(screen.getByText("john.doe@example.com")).toBeTruthy();
+    expect(mockUserService.getUser).toHaveBeenCalledWith("user-123");
+  });
+
+  it("should allow user to edit their profile", async () => {
+    const mockUser = {
+      id: "user-123",
+      name: "John Doe",
+      email: "john.doe@example.com",
+    };
+
+    mockUserService.getUser.mockResolvedValue(mockUser);
+    mockUserService.updateUser.mockResolvedValue({
+      ...mockUser,
+      name: "Jane Doe",
+    });
+
+    render(<UserProfile {...defaultProps} />);
+
+    await screen.findByText("John Doe");
+
+    const editButton = screen.getByRole("button", { name: /edit/i });
+    fireEvent.press(editButton);
+
+    expect(screen.getByTestId("edit-profile-form")).toBeTruthy();
+
+    const nameInput = screen.getByLabelText(/name/i);
+    fireEvent.changeText(nameInput, "Jane Doe");
+
+    const submitButton = screen.getByRole("button", { name: /save/i });
+    fireEvent.press(submitButton);
+
+    await waitFor(() => {
+      expect(mockUserService.updateUser).toHaveBeenCalledWith("user-123", {
+        name: "Jane Doe",
+      });
+    });
+  });
+
+  it("should display error message when loading fails", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
+    mockUserService.getUser.mockRejectedValue(new Error("Network error"));
+
+    render(<UserProfile {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        /failed to load user/i
+      );
+    });
+
+    expect(screen.getByRole("button", { name: /try again/i })).toBeTruthy();
+
+    consoleSpy.mockRestore();
+  });
+});
+```
+
+## Testing React Native Hooks
+
+### Test Custom Hooks in Isolation
+
+- Use `renderHook` from React Native Testing Library
+- Test hook state changes and side effects
+
+```tsx
+import { renderHook, act } from "@testing-library/react-native";
+import { useCounter } from "./useCounter";
+
+describe("useCounter", () => {
+  it("should initialize with default value", () => {
+    const { result } = renderHook(() => useCounter(0));
+
+    expect(result.current.count).toBe(0);
+  });
+
+  it("should increment counter", () => {
+    const { result } = renderHook(() => useCounter(0));
+
+    act(() => {
+      result.current.increment();
+    });
+
+    expect(result.current.count).toBe(1);
+  });
+});
+```
+
+## Component Integration Testing
+
+### Testing Component Interactions
+
+- Test how components work together
+- Test data flow between parent and child components
+- Test context providers and consumers
+
+```tsx
+import { render, screen, fireEvent } from "@testing-library/react-native";
+import { AuthProvider } from "../contexts/AuthContext";
+import { TodoApp } from "./TodoApp";
+
+const createWrapper = () => {
+  return ({ children }: { children: React.ReactNode }) => (
+    <AuthProvider>{children}</AuthProvider>
+  );
+};
+
+describe("TodoApp Integration", () => {
+  it("should allow user to create and delete todos", async () => {
+    render(<TodoApp />, { wrapper: createWrapper() });
+
+    const input = screen.getByPlaceholderText(/new todo/i);
+    const addButton = screen.getByText(/add/i);
+
+    fireEvent.changeText(input, "Test Todo");
+    fireEvent.press(addButton);
+
+    expect(await screen.findByText("Test Todo")).toBeTruthy();
+
+    const deleteButton = screen.getByText(/delete/i);
+    fireEvent.press(deleteButton);
+
+    expect(screen.queryByText("Test Todo")).toBeNull();
+  });
+});
+```
+
+## Testing Utilities and Helpers
+
+### Custom Testing Utilities
+
+- Create reusable testing utilities
+- Mock external dependencies consistently
+- Set up test data factories
+
+```tsx
+import { render } from "@testing-library/react-native";
+import { AuthProvider } from "../contexts/AuthContext";
+
+type User = {
+  id: string;
+  name: string;
+  email: string;
+};
+
+export const renderWithProviders = (ui: React.ReactElement) => {
+  return render(<AuthProvider>{ui}</AuthProvider>);
+};
+
+export const createMockUser = (overrides: Partial<User> = {}): User => ({
+  id: "user-123",
+  name: "John Doe",
+  email: "john.doe@example.com",
+  ...overrides,
+});
+```
+
+## Error Handling and Edge Cases
+
+### Error and Loading State Testing
+
+- Test error boundaries and error states
+- Test loading states and edge cases
+
+```tsx
+import { render, screen } from "@testing-library/react-native";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { Text } from "react-native";
+
+const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
+  if (shouldThrow) throw new Error("Test error");
+  return <Text>No error</Text>;
+};
+
+describe("ErrorBoundary", () => {
+  beforeEach(() => {
+    jest.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    (console.error as jest.Mock).mockRestore();
+  });
+
+  it("should display fallback on error", () => {
+    render(
+      <ErrorBoundary>
+        <ThrowError shouldThrow={true} />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText(/something went wrong/i)).toBeTruthy();
+  });
+});
+```
+
+## Performance Considerations
+
+### React Native Performance Testing
+
+- Monitor render performance and cleanup
+- Test re-renders and memory usage (limited in RN)
+
+```tsx
+// Performance testing (manual observation)
+import { render } from "@testing-library/react-native";
+
+describe("Component Performance", () => {
+  it("should render multiple times without crashing", () => {
+    for (let i = 0; i < 100; i++) {
+      const { unmount } = render(<HeavyComponent />);
+      unmount();
+    }
+  });
+});
+```
diff --git a/copy-cursor-rules.sh b/copy-cursor-rules.sh
index 85cb3a4..b907d02 100755
--- a/copy-cursor-rules.sh
+++ b/copy-cursor-rules.sh
@@ -10,13 +10,85 @@ NC='\033[0m' # No Color
 # Repository URL
 REPO_URL="https://github.com/tekdi/tekdi-cursor-rules.git"
 
-# Create temporary directory for cloning
-TMP_DIR=$(mktemp -d)
-SCRIPT_DIR="$TMP_DIR/tekdi-cursor-rules"
+# Global variables
+DEBUG_MODE=false
+SCRIPT_DIR=""
+
+# Create temporary directory for cloning (only if not in debug mode)
+TMP_DIR=""
+
+# Parse command line arguments
+parse_arguments() {
+    while [[ $# -gt 0 ]]; do
+        case $1 in
+            --debug|-d)
+                DEBUG_MODE=true
+                shift
+                ;;
+            --help|-h)
+                show_help
+                exit 0
+                ;;
+            *)
+                print_error "Unknown option: $1"
+                show_help
+                exit 1
+                ;;
+        esac
+    done
+}
+
+# Show help message
+show_help() {
+    echo "Usage: $0 [OPTIONS]"
+    echo ""
+    echo "Options:"
+    echo "  --debug, -d    Enable debug mode (use local files instead of cloning)"
+    echo "  --help, -h     Show this help message"
+    echo ""
+    echo "Debug mode:"
+    echo "  When debug mode is enabled, the script will use the local repository"
+    echo "  files instead of cloning from GitHub. Make sure you have the"
+    echo "  tekdi-cursor-rules repository cloned locally in the same directory"
+    echo "  as this script."
+}
+
+# Initialize directories based on mode
+initialize_directories() {
+    if [[ "$DEBUG_MODE" == true ]]; then
+        print_info "Debug mode enabled - using local files"
+        # Use local directory (assume script is in the repository or adjacent to it)
+        local current_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+        
+        # Check if we're inside the repository
+        if [[ -d "$current_dir/1-tekdi" ]]; then
+            SCRIPT_DIR="$current_dir"
+        # Check if repository is in the same parent directory
+        elif [[ -d "$current_dir/tekdi-cursor-rules" ]]; then
+            SCRIPT_DIR="$current_dir/tekdi-cursor-rules"
+        # Check if we're in a parent directory and repository is a subdirectory
+        elif [[ -d "$current_dir/../tekdi-cursor-rules" ]]; then
+            SCRIPT_DIR="$(cd "$current_dir/../tekdi-cursor-rules" && pwd)"
+        else
+            print_error "Local repository not found. Please ensure tekdi-cursor-rules repository is available locally."
+            print_error "Expected locations:"
+            print_error "  - Current directory: $current_dir"
+            print_error "  - Sibling directory: $current_dir/tekdi-cursor-rules"
+            print_error "  - Parent directory: $current_dir/../tekdi-cursor-rules"
+            exit 1
+        fi
+        
+        print_success "Using local repository at: $SCRIPT_DIR"
+    else
+        # Create temporary directory for cloning
+        TMP_DIR=$(mktemp -d)
+        SCRIPT_DIR="$TMP_DIR/tekdi-cursor-rules"
+    fi
+}
 
 # Cleanup function
 cleanup() {
-    if [[ -d "$TMP_DIR" ]]; then
+    if [[ -n "$TMP_DIR" && -d "$TMP_DIR" ]]; then
         print_info "Cleaning up temporary directory..."
         rm -rf "$TMP_DIR"
     fi
@@ -54,6 +126,11 @@ validate_path() {
 
 # Function to clone the repository
 clone_repository() {
+    if [[ "$DEBUG_MODE" == true ]]; then
+        print_info "Debug mode: Skipping repository clone, using local files"
+        return 0
+    fi
+    
     print_info "Cloning tekdi-cursor-rules repository..."
     
     # Check if git is installed
@@ -97,9 +174,10 @@ get_repo_path() {
 get_project_type() {
     while true; do
         echo
-        print_info "Is this a backend or frontend repository?"
+        print_info "Is this a backend, frontend, or mobile-app repository?"
         echo "1) backend"
         echo "2) frontend"
+        echo "3) mobile-app"
         read -r choice
         
         case $choice in
@@ -111,8 +189,12 @@ get_project_type() {
                 project_type="frontend"
                 return 0
                 ;;
+            3|mobile-app|mobile-app|Mobile-app|Mobile-app|MOBILE-APP|MOBILE-APP)
+                project_type="mobile-app"
+                return 0
+                ;;
             *)
-                print_error "Invalid input. Please enter 'backend' or 'frontend' (or 1/2)."
+                print_error "Invalid input. Please enter 'backend', 'frontend', or 'mobile-app' (or 1/2/3)."
                 ;;
         esac
     done
@@ -127,21 +209,86 @@ get_language() {
         print_info "Which programming language are you using?"
         
         if [[ "$proj_type" == "backend" ]]; then
-            echo "Supported languages: java, php, python, nodejs"
+            echo "1) java"
+            echo "2) php" 
+            echo "3) python"
+            echo "4) nodejs"
+        elif [[ "$proj_type" == "mobile-app" ]]; then
+            echo "1) kotlin"
+            echo "2) swift"
+            echo "3) dart"
+            echo "4) javascript"
         else
-            echo "Supported languages: javascript, html, css"
+            echo "1) javascript"
+            echo "2) html"
+            echo "3) css"
         fi
         
-        read -r language
+        read -r language_input
         
-        case $language in
-            java|php|python|nodejs|javascript|html|css)
-                return 0
-                ;;
-            *)
-                print_error "Invalid language. Please enter one of the supported languages."
-                ;;
-        esac
+        if [[ "$proj_type" == "backend" ]]; then
+            case $language_input in
+                1|java|Java|JAVA)
+                    language="java"
+                    return 0
+                    ;;
+                2|php|PHP|Php)
+                    language="php"
+                    return 0
+                    ;;
+                3|python|Python|PYTHON)
+                    language="python"
+                    return 0
+                    ;;
+                4|nodejs|node|Node|NodeJS|NODE|NODEJS)
+                    language="nodejs"
+                    return 0
+                    ;;
+                *)
+                    print_error "Invalid language. Please enter a number (1-4) or one of: java, php, python, nodejs"
+                    ;;
+            esac
+        elif [[ "$proj_type" == "mobile-app" ]]; then
+            case $language_input in
+                1|kotlin|Kotlin|KOTLIN)
+                    language="kotlin"
+                    return 0
+                    ;;
+                2|swift|Swift|SWIFT)
+                    language="swift"
+                    return 0
+                    ;;
+                3|dart|Dart|DART)
+                    language="dart"
+                    return 0
+                    ;;
+                4|javascript|js|JavaScript|JS|JAVASCRIPT)
+                    language="javascript"
+                    return 0
+                    ;;
+                *)
+                    print_error "Invalid language. Please enter a number (1-4) or one of: kotlin, swift, dart, javascript"
+                    ;;
+            esac
+        else
+            case $language_input in
+                1|javascript|js|JavaScript|JS|JAVASCRIPT)
+                    language="javascript"
+                    return 0
+                    ;;
+                2|html|HTML|Html)
+                    language="html"
+                    return 0
+                    ;;
+                3|css|CSS|Css)
+                    language="css"
+                    return 0
+                    ;;
+                *)
+                    print_error "Invalid language. Please enter a number (1-3) or one of: javascript, html, css"
+                    ;;
+            esac
+        fi
     done
 }
 
@@ -157,10 +304,38 @@ get_framework() {
     if [[ "$proj_type" == "backend" ]]; then
         case $lang in
             nodejs)
-                echo "Available frameworks: nestjs"
+                echo "Available frameworks:"
+                echo "1) nestjs"
                 ;;
             python)
-                echo "Available frameworks: fastapi, django"
+                echo "Available frameworks:"
+                echo "1) fastapi"
+                echo "2) django"
+                ;;
+            *)
+                echo "Available frameworks: (framework-specific rules may not be available)"
+                ;;
+        esac
+    elif [[ "$proj_type" == "mobile-app" ]]; then
+        case $lang in
+            javascript)
+                echo "Available frameworks:"
+                echo "1) react-native"
+                echo "2) ionic"
+                ;;
+            dart)
+                echo "Available frameworks:"
+                echo "1) flutter"
+                ;;
+            kotlin)
+                echo "Available frameworks:"
+                echo "1) android-native"
+                echo "2) compose"
+                ;;
+            swift)
+                echo "Available frameworks:"
+                echo "1) ios-native"
+                echo "2) swiftui"
                 ;;
             *)
                 echo "Available frameworks: (framework-specific rules may not be available)"
@@ -169,7 +344,9 @@ get_framework() {
     else
         case $lang in
             javascript)
-                echo "Available frameworks: reactjs, angular"
+                echo "Available frameworks:"
+                echo "1) reactjs"
+                echo "2) angular"
                 ;;
             *)
                 echo "Available frameworks: (framework-specific rules may not be available)"
@@ -177,7 +354,138 @@ get_framework() {
         esac
     fi
     
-    read -r framework
+    read -r framework_input
+    
+    # Handle framework selection based on project type and language
+    if [[ "$proj_type" == "backend" ]]; then
+        case $lang in
+            nodejs)
+                case $framework_input in
+                    1|nestjs|NestJS|NESTJS)
+                        framework="nestjs"
+                        ;;
+                    "")
+                        framework=""
+                        ;;
+                    *)
+                        framework="$framework_input"
+                        ;;
+                esac
+                ;;
+            python)
+                case $framework_input in
+                    1|fastapi|FastAPI|FASTAPI)
+                        framework="fastapi"
+                        ;;
+                    2|django|Django|DJANGO)
+                        framework="django"
+                        ;;
+                    "")
+                        framework=""
+                        ;;
+                    *)
+                        framework="$framework_input"
+                        ;;
+                esac
+                ;;
+            *)
+                framework="$framework_input"
+                ;;
+        esac
+    elif [[ "$proj_type" == "mobile-app" ]]; then
+        case $lang in
+            javascript)
+                case $framework_input in
+                    1|react-native|react_native|React-Native|React_Native|REACT-NATIVE|REACT_NATIVE)
+                        framework="react-native"
+                        ;;
+                    2|ionic|Ionic|IONIC)
+                        framework="ionic"
+                        ;;
+                    "")
+                        framework=""
+                        ;;
+                    *)
+                        framework="$framework_input"
+                        ;;
+                esac
+                ;;
+            dart)
+                case $framework_input in
+                    1|flutter|Flutter|FLUTTER)
+                        framework="flutter"
+                        ;;
+                    "")
+                        framework=""
+                        ;;
+                    *)
+                        framework="$framework_input"
+                        ;;
+                esac
+                ;;
+            kotlin)
+                case $framework_input in
+                    1|android-native|android_native|Android-Native|Android_Native|ANDROID-NATIVE|ANDROID_NATIVE)
+                        framework="android-native"
+                        ;;
+                    2|compose|Compose|COMPOSE)
+                        framework="compose"
+                        ;;
+                    "")
+                        framework=""
+                        ;;
+                    *)
+                        framework="$framework_input"
+                        ;;
+                esac
+                ;;
+            swift)
+                case $framework_input in
+                    1|ios-native|ios_native|iOS-Native|iOS_Native|IOS-NATIVE|IOS_NATIVE)
+                        framework="ios-native"
+                        ;;
+                    2|swiftui|SwiftUI|SWIFTUI)
+                        framework="swiftui"
+                        ;;
+                    "")
+                        framework=""
+                        ;;
+                    *)
+                        framework="$framework_input"
+                        ;;
+                esac
+                ;;
+            *)
+                framework="$framework_input"
+                ;;
+        esac
+    else
+        # Frontend
+        case $lang in
+            javascript)
+                case $framework_input in
+                    1|reactjs|react|React|ReactJS|REACT|REACTJS)
+                        framework="reactjs"
+                        ;;
+                    2|angular|Angular|ANGULAR)
+                        framework="angular"
+                        ;;
+                    3|react-native|react_native|React-Native|React_Native|REACT-NATIVE|REACT_NATIVE)
+                        framework="react-native"
+                        ;;
+                    "")
+                        framework=""
+                        ;;
+                    *)
+                        framework="$framework_input"
+                        ;;
+                esac
+                ;;
+            *)
+                framework="$framework_input"
+                ;;
+        esac
+    fi
 }
 
 # Function to backup existing file if it exists
@@ -256,13 +564,29 @@ copy_all_files() {
 
 # Main function
 main() {
+    # Parse command line arguments first
+    parse_arguments "$@"
+    
     echo
     print_info "=== Cursor Rules Copy Script ==="
-    print_info "This script will clone the tekdi-cursor-rules repository and copy the appropriate rules to your project."
+    if [[ "$DEBUG_MODE" == true ]]; then
+        print_info "Running in DEBUG MODE - using local files"
+    fi
+    print_info "This script will copy the appropriate cursor rules to your project."
+    
+    # Initialize directories based on mode
+    initialize_directories
     
-    # Clone the repository first
+    # Clone the repository (or skip if debug mode)
     clone_repository
     
+    # Validate that the script directory exists and has the expected structure
+    if [[ ! -d "$SCRIPT_DIR/1-tekdi" ]]; then
+        print_error "Repository structure invalid. Missing '1-tekdi' directory."
+        print_error "Script directory: $SCRIPT_DIR"
+        exit 1
+    fi
+    
     # Get user inputs
     get_repo_path
     get_project_type
@@ -279,6 +603,9 @@ main() {
     
     print_info "Destination directory: $dest_dir"
     print_info "Backup directory (if needed): $backup_dir"
+    if [[ "$DEBUG_MODE" == true ]]; then
+        print_info "Source directory: $SCRIPT_DIR"
+    fi
     
     echo
     print_info "Starting file copy process"
@@ -318,6 +645,50 @@ main() {
                 copy_all_files "$SCRIPT_DIR/5-backend/python/$framework" "$dest_dir" "$framework framework rules"
             fi
         fi
+    elif [[ "$project_type" == "mobile-app" ]]; then
+        # Copy general mobile-app files
+        copy_files_matching "$SCRIPT_DIR/6-mobile-app" "$dest_dir" "mobile-app" "mobile-app $language rules"
+        
+        # Copy language-specific files
+        if [[ "$language" == "javascript" ]]; then
+            copy_all_files "$SCRIPT_DIR/6-mobile-app/javascript" "$dest_dir" "JavaScript mobile-app rules"
+            
+            # Copy framework-specific files
+            if [[ -n "$framework" ]]; then
+                if [[ "$framework" == "react-native" || "$framework" == "ionic" ]]; then
+                    # For React Native: copy from both hybrid-frontend and react-native folders
+                    echo
+                    print_info "Processing React Native framework..."
+                    print_info "Copying hybrid-frontend rules for React Native..."
+                    copy_all_files "$SCRIPT_DIR/6-mobile-app/javascript/hybrid-frontend" "$dest_dir" "hybrid-frontend rules"
+                fi
+                print_info "Copying $framework specific rules..."
+                copy_all_files "$SCRIPT_DIR/6-mobile-app/javascript/$framework" "$dest_dir" "$framework framework rules"
+            else
+                print_info "No framework specified, skipping framework-specific rules."
+            fi
+        elif [[ "$language" == "dart" ]]; then
+            copy_all_files "$SCRIPT_DIR/6-mobile-app/dart" "$dest_dir" "Dart mobile-app rules"
+            
+            # Copy framework-specific files
+            if [[ -n "$framework" ]]; then
+                copy_all_files "$SCRIPT_DIR/6-mobile-app/dart/$framework" "$dest_dir" "$framework framework rules"
+            fi
+        elif [[ "$language" == "kotlin" ]]; then
+            copy_all_files "$SCRIPT_DIR/6-mobile-app/kotlin" "$dest_dir" "Kotlin mobile-app rules"
+            
+            # Copy framework-specific files
+            if [[ -n "$framework" ]]; then
+                copy_all_files "$SCRIPT_DIR/6-mobile-app/kotlin/$framework" "$dest_dir" "$framework framework rules"
+            fi
+        elif [[ "$language" == "swift" ]]; then
+            copy_all_files "$SCRIPT_DIR/6-mobile-app/swift" "$dest_dir" "Swift mobile-app rules"
+            
+            # Copy framework-specific files
+            if [[ -n "$framework" ]]; then
+                copy_all_files "$SCRIPT_DIR/6-mobile-app/swift/$framework" "$dest_dir" "$framework framework rules"
+            fi
+        fi
     else
         # Frontend
         #copy_files_matching "$SCRIPT_DIR/4-frontend" "$dest_dir" "$language" "frontend $language rules"
@@ -338,11 +709,14 @@ main() {
     print_success "=== Copy process completed! ==="
     print_info "Rules have been copied to: $dest_dir"
     print_info "You can now use these cursor rules in your project."
-    print_info "Temporary files will be cleaned up automatically."
+    if [[ "$DEBUG_MODE" == false ]]; then
+        print_info "Temporary files will be cleaned up automatically."
+    fi
     
     # Show summary
     echo
     print_info "=== Summary ==="
+    print_info "Mode: $([ "$DEBUG_MODE" == true ] && echo "DEBUG (local files)" || echo "NORMAL (cloned repository)")"
     print_info "Repository: $repo_path"
     print_info "Project Type: $project_type"
     print_info "Language: $language"
@@ -363,5 +737,5 @@ main() {
     fi
 }
 
-# Run the main function
+# Run the main function with all arguments
 main "$@" 
\ No newline at end of file