# Project: Mobile App Collection

- `index.html` is the launcher: one card per application (App 1, 2, 3…). Each card links to its app.
- Each app lives in `apps/app-N/` and contains:
  - `App N - <Name>.html`: the entry file (with an "All apps" back link to `../../index.html`)
  - `src/`: JSX/JS sources
  - `DESIGN_SYSTEM.md`: **read this before editing the app.** All tokens, components and patterns for that app are defined there.
- When building a new app from screenshots: create `apps/app-N/`, a matching `DESIGN_SYSTEM.md` (same structure as App 1's), and turn the "Coming soon" card in `index.html` into a live card (iframe thumbnail + link + design-system link). Update the header count.

- App 4 (`apps/app-4/`) is a UI-kit reference page for 7 Liquid Glass projects (LiquidGlassTabBars, UnionTabView, FabBar, Square, expo-glass-tabs, AndroidLiquidGlass/Backdrop, and 07 the iOS 26 Liquid Glass Effect Figma kit: glass material + controls in `src/figma-glass.{css,jsx}`). To rebuild or customise anything in App 4, use AI_GUIDE §11 (rebuild map) and §12 (cookbook); exact values are in `apps/app-4/tokens.json`. **When asked to use one in an app, read `apps/app-4/AI_GUIDE.md` first**: it has the decision tree, install steps and verification. Tokens are in `apps/app-4/DESIGN_SYSTEM.md`.
- **Apple Design Workbench** (`apps/app-4/workbench/`): the reference for designing *anything* on Apple platforms (iOS, iPadOS, macOS, watchOS, tvOS, visionOS, web). It holds scales, colours, charts, a component library, 124 cited sources, a brief-to-plan-to-code engine and exports. Before designing an Apple-platform app, read `workbench/AGENT_SKILL.md`, then use `workbench/src/data-*.js` for numbers. Keep the user's stack (SwiftUI is not the default); ship no Apple assets.

- App 6 (`apps/app-6/`) is a barber / salon booking app (white + orange `#FD6F29`, Plus Jakarta Sans). Besides `DESIGN_SYSTEM.md` it has `AI_GUIDE.md` (rebuild steps, how to clone the style for another business, native porting) and `tokens.json`. New apps should ship the same three files.

- **Mobile design bar (all new apps):** follow `/.claude/skills/appllama-app-design-skill/SKILL.md`, which covers native fidelity, anti-slop laws, navigation grammar and the motion frequency gate. Study real reference screens before drawing, and record the patterns you adopted in `RESEARCH.md`. App 33 (`apps/app-33/`, Basiri v2) is the worked example. Its `RULES.md` is the strict checklist: one accent, the capsule/26/circle shape lock, no gradients, no glass on content, one primary button per screen, and a pre-flight count before hand-off.
- Basiri (Persian RTL transformation app): the tab order left→right is من | هم‌مسیر | راهنما | مسیر من | امروز, with no FAB. App 32 is the rejected v1, kept for history. **App 33 is current.**

- Apps 7–15 each came from one reference screenshot (`refs/r07…r15.png`). They share `apps/shared/kit.{jsx,css}` (frame, icons, toast, and `BRAND = 'Cyborg Design'`). Each has DESIGN_SYSTEM.md + AI_GUIDE.md + tokens.json. Brand rule: "Cyborg Design" replaces exactly one existing text, in that text's original style. Never add UI just to show the brand, and never restyle the reference.