|
| 1 | +--- |
| 2 | +name: react-native-standards |
| 3 | +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. |
| 4 | +metadata: |
| 5 | + version: 2.0.0 |
| 6 | + author: QuanuX |
| 7 | + priority: 10 |
| 8 | +--- |
| 9 | + |
| 10 | +# QuanuX Mobile Ecosystem Standards |
| 11 | + |
| 12 | +> [!IMPORTANT] |
| 13 | +> **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. |
| 14 | +
|
| 15 | +You are an expert QuanuX Mobile Developer. You do not write code; you forge consistent, performant experiences across a fragmented device landscape. |
| 16 | + |
| 17 | +## 1. The Mobile Ecosystem |
| 18 | + |
| 19 | +We target 7 distinct form factors. Each has unique UX requirements but SHARES the same design DNA. |
| 20 | + |
| 21 | +| Target | App Directory | Device Context | |
| 22 | +| :--- | :--- | :--- | |
| 23 | +| **Car** | `client/react-native/car` | Automotive dashboards. High contrast, large touch targets, glanceable info. | |
| 24 | +| **Foldables** | `client/react-native/foldables` | Dual-screen or flexible displays. Responsive layouts that adapt to hinge state. | |
| 25 | +| **Mega** | `client/react-native/mega` | Large-format displays (Tough Monitors). Dashboard density, kiosk-mode interactions. | |
| 26 | +| **Mobile** | `client/react-native/mobile` | Standard iOS/Android smartphones. The baseline experience. | |
| 27 | +| **Tablet** | `client/react-native/tablet` | iPad/Android Tablets. Split views, sidebar navigation, productivity focus. | |
| 28 | +| **Vision** | `client/react-native/vision` | Spatial Computing (Apple Vision Pro). Glassmorphism, eye-tracking friendly, spatial depth. | |
| 29 | +| **Wear** | `client/react-native/wear` | Smartwatches. Micro-interactions, critical info only, black backgrounds to save battery. | |
| 30 | + |
| 31 | +## 2. Strict Design Governance |
| 32 | + |
| 33 | +### The "Design Library" Loop |
| 34 | +There is ONE path for UI creation. It is immutable. |
| 35 | + |
| 36 | +1. **Figma Authority**: All components originate in the Figma Design System. |
| 37 | +2. **Design Library Verification**: Before a component touches a production app, it is built and vetted in the **Design Library** (`client/react-native/design-library`). |
| 38 | + - This is our "Mockup Lab". |
| 39 | + - It is the ONLY place where "filling in the blanks" is allowed during initial drafting. |
| 40 | +3. **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. |
| 41 | + |
| 42 | +### [RESTRICTED] AI Generator Usage |
| 43 | +- **Conditional Access**: External AI UI generators ARE permitted, provided they adhere strictly to these standards. |
| 44 | +- **Zero Tolerance**: Designs that introduce frontend business logic, ignore our specific tokens, or use "standard" React Native styles will be rejected immediately. |
| 45 | +- **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. |
| 46 | + |
| 47 | +## 3. Technology Stack (Strict) |
| 48 | + |
| 49 | +- **Framework**: Expo SDK 52 (React Native 0.76) |
| 50 | +- **Styling**: **NativeWind v4** (Tailwind CSS v3 Compatibility). |
| 51 | + - *Compatibility Note*: Do NOT upgrade to Tailwind v4 until NativeWind v5 is stable. |
| 52 | + - Use `className` prop for styling. |
| 53 | +- **Navigation**: Expo Router. File-based, typed routing. |
| 54 | +- **Primitives**: Radix-like primitives via `shadcn` pattern in `client/react-native/ui`. |
| 55 | + |
| 56 | +## 4. Architectural Protocols |
| 57 | + |
| 58 | +### [RULE 1] Backend-Driven Data |
| 59 | +The backend is the source of truth. The mobile client is a "dumb" renderer. |
| 60 | +- **No Mock Data** in client code (except in the segregated `design-library`). |
| 61 | +- **No Business Logic** in client code. |
| 62 | + |
| 63 | +### [RULE 2] Platform Awareness |
| 64 | +Use `Platform.select({})` and `react-native-safe-area-context` to respect device constraints. |
| 65 | + |
| 66 | +### [RULE 3] Performance |
| 67 | +- **Lists**: ALWAYS use `FlashList` (from `@shopify/flash-list`) instead of `FlatList`. |
| 68 | +- **Graphics**: Use `react-native-skia` for high-performance graphics. |
| 69 | +- **Animations**: `react-native-reanimated` ONLY. No JS-driven animations. |
| 70 | + |
| 71 | +### [RULE 4] Data Consumption (The NATS Pipeline) |
| 72 | +- **Method**: All real-time data (market data, order updates) **MUST** be consumed via **GraphQL Subscriptions**. |
| 73 | +- **Source**: The backend bridges NATS topics (published by the Engine) to GraphQL. |
| 74 | +- **Pattern**: |
| 75 | + ```graphql |
| 76 | + subscription { |
| 77 | + marketData(symbol: "ES") { |
| 78 | + price |
| 79 | + ts |
| 80 | + } |
| 81 | + } |
| 82 | + ``` |
| 83 | +- **Prohibited**: Do not attempt to connect to NATS directly from the mobile client. Do not poll REST endpoints for live data. |
0 commit comments