Real-World Use Case: Full-Stack Feature Development

This guide demonstrates a complete end-to-end workflow for building a complex full-stack feature in PostQode, taking advantage of deep planning, custom skills, mode switching, and git diff reviews.

---

Scenario Overview

Goal: Add a multi-tenant User Invitation & Role Management feature to a React + Node.js/TypeScript application.

---

Workflow Step-by-Step

 ┌────────────────┐      ┌────────────────┐      ┌────────────────┐      ┌────────────────┐
 │ 1. Init & Plan │ ───► │ 2. Implementation│───►│ 3. Auto Testing│ ───► │4. Review & PR  │
 │  (/deep-planning)│    │  (Agent Mode)  │      │  (Web/API Agent)│     │  (/explain-changes)│
 └────────────────┘      └────────────────┘      └────────────────┘      └────────────────┘

Phase 1: Planning with /deep-planning

1. Open the PostQode chat panel.
2. Run the /deep-planning slash command:

   /deep-planning Design a User Invitation feature allowing admins to send email invites with role selection (Admin, Member, Billing Manager).

3. PostQode silently inspects existing database schemas, API routes, and React components.
4. It creates an implementation_plan.md artifact detailing:
   • Schema updates (Prisma migration / SQL)
   • Backend routes (/api/v1/invitations)
   • Frontend UI components (InviteModal.tsx, MembersTable.tsx)
   • Security checks (token expiration, RBAC middleware)

---

Phase 2: Execution in Agent Mode

1. Switch to Agent Mode (or click Approve Plan).
2. Instruct PostQode:

   Implement Phase 1 of the implementation plan: create database migration and backend API endpoints with Zod validation.

3. PostQode uses write_to_file and execute_command to apply migrations and create routes.
4. Mention relevant files for UI implementation:

   @src/components/Members.tsx Create the InviteModal component matching our Tailwind UI design tokens.

---

Phase 3: Automated Testing & Verification

1. Use API Agent or Web Agent to verify the feature:

   Test the POST /api/v1/invitations endpoint with an admin bearer token and verify 200 OK response.

2. PostQode executes the request, verifies response schema, and logs output.

---

Phase 4: Review Changes with /explain-changes

1. Before committing to git, run:

   /explain-changes

2. PostQode compares current working directory changes against main and provides an inline breakdown of changed files, security checks, and commit recommendations.
3. Generate a git commit message:

   feat(auth): add user invitation API endpoints and frontend modal UI