Files

Millian Lamiaux 511e207762 feat: design system v2 with liquid glass aesthetic

Overhaul design constants for OLED-first dark mode:
- Colors: brand palette, phase colors, glass/shadow tokens, gradients
- Typography: Inter font scale matching iOS type system
- Spacing: 4px base unit with layout constants
- Border radius: liquid glass card radii
- Animations: spring/timing presets for UI transitions

Add v2 product docs (PRD, PDD, BDSD) and update CLAUDE.md.
Install expo-video, expo-sharing, @expo-google-fonts/inter.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-20 13:23:18 +01:00

5.0 KiB

Raw Blame History

TabataFit — CLAUDE.md

"Apple Fitness+ for Tabata" — Lis ce fichier EN ENTIER avant chaque session.

🎯 Vision

TabataFit est l'Apple Fitness+ du Tabata.

Une expérience premium, video-first, guidée par des coachs, qui transforme 4 minutes d'exercice en une expérience de fitness immersive.

"Workouts that work. Beautifully."

📱 Produit

Positionnement

Analogy : "If Apple made a Tabata app"
Focus : Tabata/HIIT uniquement (pas multi-activité)
Durée : 4-20 min (format Tabata)
Différenciateur : Video-led + Coaching audio + Timer intelligent

Stack Technique

Domaine	Solution
Framework	Expo SDK 52 (managed)
Navigation	Expo Router v3
State	Zustand + AsyncStorage
Video	expo-av → HLS streaming
Audio	expo-av (coaching + music)
Animations	React Native Animated
Payments	RevenueCat
Analytics	PostHog

📚 Documentation

Document	Description
`TabataFit_PRD_v2.0.md`	Product Requirements — features, roadmap
`TabataFit_PDD_v2.0.md`	Product Design — screens, UX, flows
`TabataFit_BDSD_v2.0.md`	Brand Design — colors, typography, style

TOUJOURS lire ces documents avant de développer.

🏗️ Architecture

src/
  features/
    home/           # Home tab - For You, Continue, Collections
    workouts/       # Workouts tab - Categories, workout list
    player/         # Active workout - Video, timer, stats
    activity/       # Activity tab - Stats, trends, calendar
    browse/         # Browse tab - Filters, trainers
    profile/        # Profile tab - Settings, achievements
  shared/
    components/     # Button, Card, VideoPlayer, etc.
    hooks/          # useTimer, useVideo, useHaptics
    utils/          # formatTime, etc.
    constants/      # colors, typography, spacing
  app/              # Expo Router routes
    (tabs)/
      index.tsx     # Home
      workouts.tsx  # Workouts
      activity.tsx  # Activity
      browse.tsx    # Browse
      profile.tsx   # Profile
    player/
      [id].tsx      # Workout player

🎨 Design System

Couleurs Principales

BACKGROUND: '#000000'    // Pure black
SURFACE: '#1C1C1E'       // Charcoal
BRAND: '#FF6B35'         // Flame orange
REST: '#5AC8FA'          // Ice blue
SUCCESS: '#30D158'       // Energy green

Phase Colors (Critique)

PREP: '#FF9500'    // Orange-yellow
WORK: '#FF6B35'    // Flame orange
REST: '#5AC8FA'    // Ice blue
COMPLETE: '#30D158' // Green

Typography

Font: Inter (Google Fonts)
Timer: 96px, Black weight
Titles: 34px/28px/22px
Body: 17px

📋 Priorités Développement

Phase 1 — MVP (Semaines 1-4)

✅ Design system setup
🔲 Home tab (Featured, Continue Watching)
🔲 Workouts tab (Categories)
🔲 Pre-workout detail screen
🔲 Video player avec timer overlay
🔲 Workout complete screen
🔲 20 workouts (mock data)

Phase 2 — Core (Semaines 5-8)

🔲 Activity tab (Stats, Calendar)
🔲 Browse tab (Filters, Trainers)
🔲 Profile tab (Settings)
🔲 Apple Watch integration
🔲 50 workouts total

Phase 3 — Premium (Semaines 9-12)

🔲 Offline downloads
🔲 Burn Bar
🔲 Subscription system
🔲 Achievements
🔲 100+ workouts

🧪 Test Environment

Expo Go sur device physique — pas de simulateur.

npx expo start
Scanner le QR code avec Expo Go
Même réseau Wi-Fi requis

📝 Règles de Code

Un fichier = une responsabilité
Toute logique métier dans les hooks
Components = JSX uniquement
TypeScript strict — pas de any
Styles avec StyleSheet.create()
Dark mode only — pas de light mode

🎬 Contenu Video

Format Workout Video

Resolution: 1080p minimum
Duration: Match workout duration
Structure:
- Intro (5s): Trainer greeting
- Prep (3s): 3-2-1 countdown
- Work (20s): Exercise demonstration
- Rest (10s): Recovery, next exercise preview
- Repeat for each round
- Outro (5s): Celebration, trainer sign-off

Trainers (5 au launch)

Emma — Energy queen, beginner-friendly
Jake — Strength focus
Mia — Form perfectionist
Alex — Cardio beast
Sofia — Chill but effective

💰 Monetization

Free Tier

3 workouts free forever
Basic stats
Ads between workouts

Premium ($6.99/mo or $49.99/yr)

Unlimited workouts
Offline downloads
Apple Watch integration
Advanced stats
No ads
Family Sharing

🚀 Commands

npx expo start              # Development
npx expo start --tunnel     # If network issues
npx expo start --clear      # Clear cache
npx tsc --noEmit            # Type check
eas build --profile dev     # Dev build

📖 Comment Utiliser les Skills

Voir .claude/skills/ pour les guides spécialisés.

Document updated: February 18, 2026 Version: 2.0 Project: TabataFit — Apple Fitness+ for Tabata

5.0 KiB Raw Blame History