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

vrt-todo-prompt-v25.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, engineering, and Rigorous QA Testing.

Project Scope

1. Repo: vrt-todo-r2 (via gh repo create).
2. Stack: pnpm, Zustand, IndexedDB, Tailwind CSS, clsx, date-fns, @hello-pangea/dnd.
3. Testing: vitest (Unit), playwright (E2E), @axe-core/playwright (A11y).
4. Design: "Nook Exchange" Aesthetic (Generated Assets + CSS).
5. Collaboration: You (Cursor) write code/tests; You invoke gemini CLI for assets.
6. DevOps: standard-version, GitHub Actions.

⚡ 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 where specified.
3. Lint & Fix: pnpm exec eslint . --fix (No semicolons).
4. Test & Build:
   • Run pnpm test (Unit Tests) if applicable.
   • Run 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 & install runtime deps.
  • Install Test Deps: pnpm add -D vitest @testing-library/react jsdom @playwright/test @axe-core/playwright.
  • Setup .editorconfig, .env, vite.config.ts.
• Protocol: Verify & Merge.

Step 2: Data & State Logic

• Branch: feature/logic
• Action:
  • DB Schema & Store Logic (addTodo, reorderTodos, etc.).
• Protocol: Verify & Merge.

Step 3: UI Structure & Accessibility (A11y)

• Branch: feature/ui-core
• Action:
  • Components: TodoList, TodoItem, SearchBar.
  • A11y Requirement (CRITICAL):
    • All interactive elements must have semantic tags (<button>, <input>).
    • Icon-only buttons MUST have aria-label (e.g., aria-label="Delete todo").
    • Ensure keyboard navigation focus states (focus-visible).
• Protocol: Verify & Merge.

Step 4: Asset Generation (Role: Gemini) 🎨

• Branch: feature/assets
• Action:
  • Execute gemini CLI for bg-pattern.png, favicon-source.png, og-image.png.
  • (Same commands as previous version).
• Protocol: Verify & Merge.

Step 5: Design Integration

• Branch: feature/design
• Action:
  • Integrate Gemini assets (CSS background, favicon).
  • Apply "Nook Exchange" Tailwind theme.
• Protocol: Verify & Merge.

Step 6: QA & Testing Suite (New Step) 🧪

• Branch: feature/qa
• Action:
  • Unit Tests (vitest):
    • Create src/stores/__tests__/todoStore.test.ts.
    • Test: adding a todo, toggling completion, deleting, and filtering logic.
  • E2E Tests (playwright):
    • Update/Create tests/app.spec.ts.
    • Scenario 1 (Flow): Open app -> Add "Buy Turnips" -> Verify list -> Check done -> Refresh (Persist check).
    • Scenario 2 (A11y): Inject axe-core in Playwright to scan for accessibility violations (contrast, labels).

      // Example A11y check in Playwright
      import { test, expect } from '@playwright/test';
      import { injectAxe, checkA11y } from 'axe-playwright';
      
      test('should not have any automatically detectable accessibility issues', async ({ page }) => {
        await page.goto('/');
        await injectAxe(page);
        await checkA11y(page);
      });

  • Execution: Run pnpm exec playwright install and then run the tests to verify.
• Protocol: Verify & Merge (Commit: test: add unit and e2e suites with a11y checks).

Step 7: DevOps & Cleanup

• Branch: feature/release
• Action:
  • Setup CI/CD (deploy.yml, ci.yml - include pnpm test).
  • Cleanup: Remove unused assets, keep Gemini assets.
• Protocol: Verify & Merge.

Step 8: Documentation

• Branch: feature/docs
• Action:
  • Update README.md with Test commands (pnpm test, pnpm e2e).
• Protocol: Verify & Merge.

Constraints & Guidelines

• Testing Standard: - Unit tests must cover core business logic (Store).
  • E2E must cover critical user paths.
  • Zero A11y Violations: The app must pass automated axe checks.
• Orchestration: Cursor drives, Gemini designs.
• Code Style: No semicolons, Mobile-First.

Action

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