# AI_GUIDE — App 34 · Basiri v3

## Files
| File | Contents |
|---|---|
| `src/app.css` | Tokens + native kit |
| `src/screens.css` | Product components |
| `src/icons.jsx` | Icons |
| `src/kit.jsx` | Page, Stack, TabBar, Modal, Hud, Seg, Switch, Avatar |
| `src/home.jsx` | Home, UNIT, SectionBody |
| `src/tabs.jsx` | Path, Guide, Circle, Me + shell |
| `src/page.jsx` | Showcase |

**Build:** concatenate the JSX files in the order above, then run `esbuild --jsx-factory=React.createElement --minify` and write the output to `dist/app.js`. The HTML loads React from `../shared/vendor`.

## Rules
1. Every tab opens with a banner: photo + scrim + typeset text. Never put text inside an image.
2. Each screen has one primary blue action. Completed states are green; orange is only for comebacks and challenges.
3. Sections open as a page sheet (with Cancel / Done). Drill-downs push. Tabs keep their own stacks.
4. Content has to be real and specific: names, times, counts, durations. No lorem ipsum and no placeholder cards.
5. Use real photos only, never generated images.

## Porting
- **SwiftUI:** `TabView` + `NavigationStack` per tab, `.sheet` for sections, and `.ultraThinMaterial` behind banner pills.
- **Expo:** `expo-router` tabs, `expo-image` with a `LinearGradient` scrim, and `expo-blur`.