https://naturalkei.github.io/vrt-todo-r3/

vrt-todo-prompt-v30.md

Role Definition: The Orchestrator

You are the Lead Software Architect (Cursor Agent). Your resource is the Creative Director (Gemini CLI). Your goal is to build a high-quality "Todo List" app, orchestrating asset generation, implementing Advanced Logic, and performing Rigorous QA Testing with Impeccable Code Style.

Project Scope

1. Repo: vrt-todo-r3 (via gh repo create).
2. Title: "Nook Todo List".
3. Stack: pnpm, Zustand, IndexedDB, Tailwind CSS, clsx.
4. Libs: date-fns, @hello-pangea/dnd.
5. Features: Import/Export, Priority, Due Date, Recurrence, DND, View Modes.
6. Design: "Nook Inc. (NookPhone)" Aesthetic (Teal Green, White, Clean, Digital).
7. Collaboration: You (Cursor) write code; Invoke gemini CLI for assets/drafts.
8. Testing: vitest, playwright, axe-core.

⚡ Automation Protocol (Strict Compliance)

For EACH Step, follow the "Verify & Merge Routine":

1. Branch: git checkout -b feature/<step-name>
2. Work: Implement changes. Delegate asset creation to Gemini CLI.
3. Lint & Fix: pnpm exec eslint . --fix (No semicolons).
4. Test & Build: pnpm test (Unit) or pnpm build (Must Pass).
5. Commit: git commit -m "feat(<scope>): <message>"
6. Push: git push -u origin feature/<step-name>
7. PR: gh pr create ...
8. Merge: gh pr merge --merge --auto --delete-branch
9. Sync: git checkout main && git pull

Sequential Execution Plan

Step 1: Setup & Configuration

• Branch: feature/setup
• Action:
  • Scaffold repo vrt-todo-r3 & install runtime/test deps.
  • Setup .editorconfig, .env (Update Title), vite.config.ts.
• Protocol: Verify & Merge.

Step 2: Advanced Data Layer (Schema & DB)

• Branch: feature/database
• Action:
  • Initialize IndexedDB (todo-db) with full schema.
• Protocol: Verify & Merge.

Step 3: Advanced State Management (Zustand)

• Branch: feature/store
• Action:
  • Implement Store with todos, searchQuery, viewMode, filter.
  • Logic: addTodo, toggleTodo (recurrence), reorderTodos, import/export.
• Protocol: Verify & Merge.

Step 4: UI Design Draft & Asset Generation (Role: Gemini) 🎨

• Branch: feature/assets
• Action:
  • Execute gemini CLI with Precision Prompts for the Nook Inc. Theme.
  • Command 1 (High-Fidelity Mockup):

    gemini image generate "High-fidelity mobile UI mockup for 'Nook Todo List' app on iPhone 15 frame. [Theme] Nintendo 'NookPhone' / 'Nook Inc.' aesthetic. [Colors] Signature Nook Mint Green (#1CCD9E) as primary, Clean White (#FFFFFF) cards, Pale Mint background (#F0F8F6). [Typography] Clean, bold sans-serif (Nintendo style), Dark Grey text (#4A4A4A). [Layout] Header with Leaf Icon and 'Nook Todo List' title. Pill-shaped Search Bar with green border. [Content] Task cards are clean white with mint green rounded borders. Priority indicated by colored Nook Leaf icons. [Style] Modern, digital, flat design, vector style, high contrast, app interface." --output public/ui-design-draft.png

  • Command 2 (Pattern):

    gemini image generate "Seamless pattern, very faint Nook Inc. leaf logo pattern on a very pale mint background, minimal, modern, app wallpaper style" --output public/bg-pattern.png

  • Command 3 (Favicon):

    gemini image generate "Minimalist Nook Inc. leaf logo, mint green, circle background, pixel art style, 64x64" --output public/favicon-source.png

  • Command 4 (OG Image):

    gemini image generate "3D render of a NookPhone displaying the Todo List app, resting on a clean white desk with a succulent plant, bright studio lighting, mint green accent" --output public/og-image.png

• Protocol: Verify & Merge (Commit: chore(assets): generate nook inc design drafts).

Step 5: UI Implementation & Clean Code Integration

• Branch: feature/ui
• Action:
  • Design Source: Follow public/ui-design-draft.png EXACTLY.
  • Metadata: Set HTML Title to "Nook Todo List".
  • Tailwind Config (Nook Inc. Theme):
    • nook-green: #1CCD9E (Primary Brand Color).
    • nook-bg: #F0F8F6 (Pale Mint).
    • nook-card: #FFFFFF (White).
    • nook-text: #4A4A4A (Dark Grey).
    • nook-border: #C8E6DE (Soft Green Border).
  • Clean Code Rule (clsx Array Style):
    • Use clsx([...]) array syntax with newlines for complex classes.
  • Component Styling:
    • Cards: bg-nook-card, border-2, border-nook-border, rounded-2xl, shadow-sm.
    • Buttons: bg-nook-green, text-white, rounded-full, hover:bg-opacity-90.
    • Tabs: Segmented Control style (iOS style) or clean folder tabs using Nook colors.
  • Responsiveness: Mobile-First (Touch target > 44px).
• Protocol: Verify & Merge.

Step 6: QA & Testing Suite 🧪

• Branch: feature/qa
• Action:
  • Unit Tests (vitest) & E2E Tests (playwright with axe-core).
• Protocol: Verify & Merge.

Step 7: DevOps & Cleanup

• Branch: feature/release
• Action:
  • CI/CD Configuration:
    • Create/Update .github/workflows/deploy.yml.
    • Preserve Branch Target: Ensure on: push: branches: ['main'].
  • Cleanup: Remove unused assets.
• Protocol: Verify & Merge.

Step 8: Documentation

• Branch: feature/docs
• Action:
  • Update README.md (Title: "Nook Todo List", Design Draft, JSON Format).
• Protocol: Verify & Merge.

Constraints & Guidelines

• Project Identity: Ensure app title is "Nook Todo List" everywhere (HTML, README, Navbar).
• Design Vibe: "Clean, Digital, Mint Green" (Not "Cream/Paper"). Think NookPhone App, not DIY Recipe Card.
• Deploy Safety: Do NOT modify the target branch in deploy.yml.
• Class Readability: MANDATORY: Use clsx([...]) array syntax.
• Visual Fidelity: Match the Gemini Draft.
• Code Style: No semicolons.

Action

Analyze this plan. If understood, start executing Step 1 immediately.