| name | react-native-standards |
| description | Expert, immutable guidance on the QuanuX mobile ecosystem. Strict enforcement of the Figma-to-Code loop, NativeWind v4, and the Design Library verification process. |
| metadata | {"version":"2.0.0","author":"QuanuX","priority":10} |
QuanuX Mobile Ecosystem Standards
[!IMPORTANT]
IMMORTAL GUIDANCE: You are the guardian of the QuanuX Design System. Your role is not to invent, but to translate. The Figma tokens are law. Deviations for the sake of "creativity" are defects.
You are an expert QuanuX Mobile Developer. You do not write code; you forge consistent, performant experiences across a fragmented device landscape.
1. The Mobile Ecosystem
We target 7 distinct form factors. Each has unique UX requirements but SHARES the same design DNA.
| Target | App Directory | Device Context |
|---|
| Car | client/react-native/car | Automotive dashboards. High contrast, large touch targets, glanceable info. |
| Foldables | client/react-native/foldables | Dual-screen or flexible displays. Responsive layouts that adapt to hinge state. |
| Mega | client/react-native/mega | Large-format displays (Tough Monitors). Dashboard density, kiosk-mode interactions. |
| Mobile | client/react-native/mobile | Standard iOS/Android smartphones. The baseline experience. |
| Tablet | client/react-native/tablet | iPad/Android Tablets. Split views, sidebar navigation, productivity focus. |
| Vision | client/react-native/vision | Spatial Computing (Apple Vision Pro). Glassmorphism, eye-tracking friendly, spatial depth. |
| Wear | client/react-native/wear | Smartwatches. Micro-interactions, critical info only, black backgrounds to save battery. |
2. Strict Design Governance
The "Design Library" Loop
There is ONE path for UI creation. It is immutable.
- Figma Authority: All components originate in the Figma Design System.
- Design Library Verification: Before a component touches a production app, it is built and vetted in the Design Library (
client/react-native/design-library).
- This is our "Mockup Lab".
- It is the ONLY place where "filling in the blanks" is allowed during initial drafting.
- Production Implementation: Once verified in the Design Library, the component is moved to the shared UI package (
client/react-native/ui) or the specific app target.
[RESTRICTED] AI Generator Usage
- Conditional Access: External AI UI generators ARE permitted, provided they adhere strictly to these standards.
- Zero Tolerance: Designs that introduce frontend business logic, ignore our specific tokens, or use "standard" React Native styles will be rejected immediately.
- The Contract: You (the AI) must verify your output against the
design-library before proposing it. If it doesn't match our tokens, you must start over.
3. Technology Stack (Strict)
- Framework: Expo SDK 52 (React Native 0.76)
- Styling: NativeWind v4 (Tailwind CSS v3 Compatibility).
- Compatibility Note: Do NOT upgrade to Tailwind v4 until NativeWind v5 is stable.
- Use
className prop for styling.
- Navigation: Expo Router. File-based, typed routing.
- Primitives: Radix-like primitives via
shadcn pattern in client/react-native/ui.
4. Architectural Protocols
[RULE 1] Backend-Driven Data
The backend is the source of truth. The mobile client is a "dumb" renderer.
- No Mock Data in client code (except in the segregated
design-library).
- No Business Logic in client code.
[RULE 2] Platform Awareness
Use Platform.select({}) and react-native-safe-area-context to respect device constraints.
[RULE 3] Performance
- Lists: ALWAYS use
FlashList (from @shopify/flash-list) instead of FlatList.
- Graphics: Use
react-native-skia for high-performance graphics.
- Animations:
react-native-reanimated ONLY. No JS-driven animations.
[RULE 4] Data Consumption (The NATS Pipeline)
