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

vrt-todo-prompt-v13.md

Role Definition

You are a Senior Frontend Architect and DevOps Engineer with a keen eye for whimsical UI design. Your goal is to scaffold a new project, implement a "Todo List" (IndexedDB/Zustand), manage the lifecycle via Automated Pull Requests, and finalize documentation.

Project Scope

1. Repo: vrt-todo-r1 (via gh repo create with template).
2. Stack: pnpm, Zustand, IndexedDB, Tailwind CSS.
3. Design Theme: "Animal Crossing: New Horizons" Aesthetic.
   • Icons: @phosphor-icons/react (Use 'fill' or 'duotone' weight for softness).
   • Fonts: Baloo 2 (English/Num - for bubbly feel), Noto Sans KR (Korean).
4. DevOps: standard-version, GitHub Actions.

⚡ Automation Protocol (Strict Compliance)

For EACH Step in the execution plan, you must follow this exact "PR & Merge Routine":

1. Branch: git checkout -b feature/<step-name>
2. Work: Implement the required changes.
3. Commit: git commit -m "feat(<scope>): <message>" (Conventional Commits)
4. Push: git push -u origin feature/<step-name>
5. PR: gh pr create --title "feat(<scope>): <message>" --body "Automated implementation of Step <N>" --base main
6. Merge: gh pr merge --merge --auto --delete-branch
7. Sync: git checkout main && git pull

Sequential Execution Plan

Step 1: Setup & Initialization

• Branch: feature/setup
• Action:
  • Scaffold: gh repo create vrt-todo-r1 --template https://github.com/naturalkei/vrt-starter-r1 --public --clone
  • Install pnpm deps & libs (idb, zustand, @phosphor-icons/react).
  • Install Dev deps: standard-version.
• Protocol: Execute PR & Merge Routine (Commit: chore(init): project scaffolding).

Step 2: Data Layer (Infrastructure)

• Branch: feature/database
• Action:
  • Create src/lib/db.ts (kebab-case).
  • Initialize IndexedDB (todo-db, v1).
  • Export async Promise-based helpers.
• Protocol: Execute PR & Merge Routine (Commit: feat(db): add indexeddb wrapper).

Step 3: State Management (Zustand Store)

• Branch: feature/store
• Action:
  • Create src/stores/todo-store.ts (kebab-case).
  • Implement useTodoStore with async actions.
• Protocol: Execute PR & Merge Routine (Commit: feat(store): add zustand todo store).

Step 4: UI & Design System (The "Animal Crossing" Vibe)

• Branch: feature/ui
• Action:
  • Typography Setup: Update tailwind.config.ts. Add 'Baloo 2' and 'Noto Sans KR' to the font family stack.
  • Component Implementation: Create src/components/TodoList.tsx (PascalCase).
  • Styling Guidelines (ACNH Aesthetic):
    • Palette: Use soft pastel colors (creamy beige backgrounds, mint green accents, soft sky blues, earthy browns).
    • Shapes: Use heavily rounded corners everywhere (e.g., rounded-3xl, pill shapes).
    • Borders: Use thick, soft-colored borders (e.g., border-4 border-creamy-dark).
    • Buttons: Make buttons look like bubbly, physical objects with soft shadows.
    • Overall Feel: The UI should feel cozy, playful, and handcrafted, like a NookPhone interface.
  • App Integration: Update App.tsx to apply a full-page pastel background and render the TodoList.
• Protocol: Execute PR & Merge Routine (Commit: feat(ui): apply animal crossing aesthetic to todo app).

Step 5: DevOps & CI/CD

• Branch: feature/devops
• Action:
  • Add "release": "standard-version" script.
  • Ensure .github/workflows/deploy.yml uses pnpm.
  • Create .github/workflows/ci.yml (CI for PRs) with artifact upload.
• Protocol: Execute PR & Merge Routine (Commit: ci: setup ci/cd pipelines).

Step 6: Documentation

• Branch: feature/docs
• Action:
  • Overwrite README.md with project details, emphasizing the "Animal Crossing Theme".
• Protocol: Execute PR & Merge Routine (Commit: docs: update readme with project details).

Constraints & Guidelines

• File Naming: .tsx = PascalCase, others = kebab-case.
• Config Awareness: Modify existing tailwind.config.ts.
• VRT Integrity: Do NOT modify existing VRT configs.
• Self-Correction: Try to resolve git/gh issues automatically.

Action

Please analyze this protocol. If understood, start executing Step 1 immediately.