micro-mastery

byAR Creations

Build a modern, cross-platform Progressive Web App (PWA) called "MicroHabit" (or similar) designed to teach users micro-skills in 5 to 20 days through daily 5-minute actionable practice sessions. ### 1. CORE CONCEPT & VALUE PROPOSITION - **Micro-skills:** Skills that take between 5 to 20 days to learn (e.g., How to Journal Clearly, Card Shuffling, Breathwork, Speed Reading Basics, Touch Typing, Public Speaking Warmups). - **Daily Structure:** Each skill is broken down into sequential 5-minute daily guided practice sessions based on evidence-backed learning frameworks (Spaced Repetition, Micro-learning, Active Recall). - **Distinctive Color Themes:** Every individual skill must dynamically assign and apply a unique, dedicated color palette across its entire UI workflow (cards, timers, progress rings, callouts). --- ### 2. CORE FEATURES & KEY MODULES #### A. Micro-Skill Discovery & Library - Library of categorized micro-skills with filters (e.g., Mindset, Dexterity, Productivity, Communication). - Skill Cards showing: Skill Title, Estimated Days (5–20 days), Dynamic Skill Color, Difficulty, and "Proven Framework" badge. - Detail View: Web-approved, scientifically backed method breakdown (e.g., "The Feynman Technique for Journaling") and curriculum overview. #### B. Daily 5-Minute Guided Practice Engine (Interactive Session) - Full-screen distraction-free player for the daily 5-minute session. - **Stage 1 (Minute 1):** Quick Learning Concept / Web-approved technique (Text + visual/gif/video demo). - **Stage 2 (Minutes 2-4):** Interactive Active Practice (Live 3-minute timer with progress ring, ambient sound toggle, and step-by-step checklist). - **Stage 3 (Minute 5):** Daily Reflection & Log (Quick note/journaling box or check-in prompt). - **Completion State:** Confetti animation, updated streak, and shareable progress card. #### C. Dynamic Color-Coding System - Database schema supports `theme_color` (hex value/CSS variables) per skill. - When entering a skill context, CSS variables (`--primary-skill-color`, `--accent-skill-color`) update seamlessly across headers, buttons, timers, and progress indicators. --- ### 3. USER FLOWS & UX SPECIFICATION #### Flow 1: Onboarding 1. **Welcome Screen:** High-impact value proposition. 2. **Goal Selection:** User selects 1–2 initial categories of interest. 3. **First Skill Pick:** Prompt user to select their first 5-day or 10-day micro-skill. 4. **Schedule Set:** Set daily reminder notification time. 5. **Account Creation:** Auth via Google/Apple or Email (Clerk / Supabase Auth). #### Flow 2: Dashboard & Daily Hub - **Active Skill Hero Card:** Large hero card in the skill's specific color displaying current day (e.g., "Day 3 of 7"), remaining minutes, and a prominent "Start Today's 5-Min Session" CTA button. - **Streak Tracker:** Flame icon with current active days, heat map grid, and total skills mastered. - **Skill Library:** Grid of other locked/unlocked micro-skills. #### Flow 3: Monetization & Payments - **Freemium Model:** - Free Tier: Access to 3 starter micro-skills, basic streak tracking. - Pro Tier ($4.99/mo or $39.99/yr): Unlimited skills, AI personalized skill generator, custom reminders, offline mode. - **Paywall Triggers:** Unlocking premium skills or attempting to start a second simultaneous skill. --- ### 4. MODERN UI/UX DESIGN SYSTEM & PRINCIPLES - **Design Style:** Clean, minimalist, modern SaaS aesthetic with dark/light mode toggle. - **Visuals:** High-contrast typography (Inter/Geist font), smooth micro-interactions (Framer Motion), soft rounded corners (`rounded-2xl`). - **Mobile-First Responsive Layout:** Bottom navigation bar on mobile (Home, Discover, Progress, Profile) and side drawer on desktop. --- ### 5. RECOMMENDED TECH STACK (FOR LONG-TERM SCALABILITY) Generate the codebase structured for the following modern stack: - **Frontend Framework:** Next.js 14+ (App Router, React 18, TypeScript) or React Native with Expo (if mobile-first). - **Styling & UI:** Tailwind CSS, Shadcn/UI, Lucide Icons, Framer Motion. - **Backend & Database:** Supabase (PostgreSQL for user data, skill schemas, active enrollment, and completion logs) with Row Level Security (RLS). - **Authentication:** Clerk or Supabase Auth (OAuth + Passwordless Magic Link). - **State & Data Fetching:** TanStack React Query + Zustand (for active timer states). - **Payments:** Stripe Checkout / RevenueCat (for mobile in-app subscriptions). - **Automations & Emails:** Resend (daily reminder emails) + n8n or Supabase Cron (scheduled notification triggers). - **Analytics:** PostHog (event tracking for daily session completion rates). --- ### 6. DATABASE SCHEMA SPECIFICATION (SUPABASE POSTGRES) Provide implementation logic and database tables for: 1. `profiles`: `id`, `email`, `streak_count`, `last_active_date`, `is_pro` 2. `skills`: `id`, `title`, `description`, `duration_days`, `category`, `color_hex`, `proven_method_source` 3. `skill_days`: `id`, `skill_id`, `day_number`, `instruction_text`, `practice_prompt`, `timer_seconds` 4. `user_skill_progress`: `id`, `user_id`, `skill_id`, `current_day`, `completed_at`, `status` (`in_progress`, `completed`) Build out the initial React components for the Dashboard, Daily Session Player with Timer, and Skill Discovery page with working Tailwind CSS styling.