design: mobile app UI/UX screens — React Native (Expo) [SOW D1–D4]

[SandithHewage]

Summary

• Adds complete screen library for the YSTEM mobile app covering all 5 SOW deliverables
• All screens are ready-to-drop .tsx files the Cal Poly CSS team can integrate directly into their Expo project
• Every file uses design-tokens.rn.ts exclusively — no hardcoded hex values, mirroring our Tailwind token system

Screens

Deliverable	Screen	Description
D1	LoginScreen	Logo hero, username/password with focus states, Enter CTA, forgot/signup links
D1	SignUpScreen	Registration form, segmented Student/Mentor role selector, password validation
D1	TabNavigator	Bottom tab bar — Home, Lessons, Puzzles, Play (elevated center button), Profile
D1	HomeScreen	Welcome hero, quick action buttons, 3-stat row, timeline activity feed, Donate CTA
D2	LessonsSelectionScreen	Progress bar, horizontal piece card scroll, lesson list with locked/unlocked states, sticky Start CTA
D2	LessonScreen	Full-width chess board, step-by-step instructions, tip boxes, Back/Next controls, completion state
D3	PuzzlesScreen	Full-width board, streak badge, rating, theme pills, hint toggle (−5pts), result banner, New Puzzle CTA
D4	PlaySetupScreen	White/Black color picker, 5-level difficulty grid with level dots, summary row, Let's Go CTA
D4	PlayGameScreen	Player headers with timers, full-width board, collapsible Tutor panel with eval, move history, resign/undo/flip/draw footer, game-over modal

Files

documentation/
├── design-tokens.rn.ts          # React Native token system (mirrors tailwind.config.js)
├── design-tokens.css            # Web token reference
├── design.md                    # Design system usage guide
└── mobile-ui/
    ├── README.md                # Setup instructions for Cal Poly team
    ├── navigation/
    │   └── TabNavigator.tsx
    └── screens/
        ├── LoginScreen.tsx
        ├── SignUpScreen.tsx
        ├── HomeScreen.tsx
        ├── LessonsSelectionScreen.tsx
        ├── LessonScreen.tsx
        ├── PuzzlesScreen.tsx
        ├── PlaySetupScreen.tsx
        └── PlayGameScreen.tsx

Test plan

• Review screen layouts match YSTEM brand (soft green bg, dark pill CTAs, green CTAs)
• Confirm token imports resolve from design-tokens.rn.ts
• Cal Poly team drops screens into Expo project and runs on simulator
• Verify chess boards render square (aspectRatio: 1) on both iOS and Android
• Check bottom tab bar safe area on iPhone (home indicator) and Android

🤖 Generated with Claude Code

[ToldYO]

good to merge.