How to vibe codeAmazing Marvin

Prerequisites

• Node.jsfree

  Required for running the Next.js frontend framework and build tooling.

• GitHubfree

  Version control and repository hosting for your AI coding agent.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding complex multi-file application logic and handling iterative debugging loops in the terminal.

• 

  Cursor

  AI-native code editor ideal for reviewing diffs and fine-tuning intricate React UI layouts and state management hooks.

Build guide

1. 01Project Scaffolding & Modular Feature Flag System

   Initialize the Next.js application with TypeScript, Tailwind CSS, Drizzle ORM connected to Turso, and better-auth. Build a robust feature-flag state store using Zustand that allows enabling or disabling modular strategies (e.g., enableFunnel, enableCapacityBar, enableDreadAttribute).

   Scialize a Next.js application with TypeScript, Tailwind CSS, and shadcn/ui. Set up Drizzle ORM with Turso SQLite and configure better-auth for single-user authentication. Create a global Zustand store called useStrategyStore that holds a dictionary of 20+ feature flags (e.g., 'funnel', 'capacityEstimator', 'dreadAttribute', 'pomodoroTimer', 'topOfMind'). Ensure flags can be toggled on/off dynamically and persist user preferences in the database. Write clean, modular component structures with strict TypeScript types and comprehensive error boundaries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Core Task CRUD & Multi-Level Funnel Architecture

   Implement the core database schema for tasks with attributes (urgency, importance, energy, dread, focus required) and build the 7-level task funnel views (Backburner, Master List, Planning Ahead, Orbit, Today, Spotlight, Focus Mode).

   Implement a comprehensive task database schema using Drizzle ORM supporting hierarchical categories, projects, subtasks, and attributes: urgency (boolean/levels), importance, energyLevel (high/low/physical), dreadLevel (frog score), focusRequired, and timeEstimate. Build React views representing the Marvin task funnel: Backburner (someday/maybe), Master List, Orbit, Today planner, Spotlight session view, and Super Focus Mode (fullscreen single task view). Ensure tasks can be dragged or filtered between funnel stages based on active feature flags.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Day Planning, Capacity Estimator & Time Tracking

   Build the Day Planner view with morning/afternoon/evening sections, visual capacity indicators based on time estimates, daily progress bars, and automatic task rollover rules.

   Build a Day Planner module in Next.js that groups tasks into customizable sections (Morning, Afternoon, Evening, Essential vs Bonus). Implement a real-time Capacity Estimator component that sums task time estimates and compares them against a user-defined daily capacity threshold (e.g., 8 hours), rendering a visual capacity fill bar with over-capacity warnings. Add a day progress bar with an expected-pace marker and an automated rollover toggle for unfinished tasks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Gamification, Streaks & Procrastination Tools

   Add gamification mechanics including Kudos points, reward redemption lists, habit tracking streaks, and an interactive Procrastination Wizard step-by-step breakdown helper.

   Create a gamification and motivation module for the productivity app. Implement 'Marvin Kudos' points that automatically accrue upon task completion, a reward redemption store where users spend points, daily habit tracking with streak counters, and an interactive 'Procrastination Wizard' multi-step modal that walks users through breaking down resistant tasks into micro-steps. Store all stats in Turso and render visual activity charts on a daily stats dashboard.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Floating 'Top of Mind' Widget & Focus Audio

   Develop a lightweight persistent mini-widget (Top of Mind) using browser Picture-in-Picture or secondary pop-out windows, alongside built-in ambient focus music generators.

   Build a 'Top of Mind' floating mini-widget component that displays the current active focus task in a compact, always-on-top layout using Tauri/web-native window management or compact picture-in-picture frames. Additionally, build a built-in focus sound player using Web Audio API synthesis or embedded looping ambient tracks (Nature rain, LoFi beats, Binaural tones) with play/pause controls accessible globally from the bottom app bar.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Amazing Marvin