Skip to content

🧭 Way of Working (WoW)

We operate in two synchronized flows:

  1. 🌊 Macro Flow: The feature lifecycle (Idea → Live).
  2. ⚡️ Micro Flow: The daily developer loop (Prompt → Code → Ship).

🌊 Macro Flow

The high-level journey of a feature.

graph LR
    A[<span style='color:#000; font-weight:bold; font-size:18px'>💡 Ideate</span>] --> B[<span style='color:#fff; font-weight:bold; font-size:18px'>🎨 Design</span>]
    B --> C[<span style='color:#fff; font-weight:bold; font-size:18px'>🔨 Build</span>]
    C --> D[<span style='color:#fff; font-weight:bold; font-size:18px'>🧪 Test</span>]
    D --> E[<span style='color:#000; font-weight:bold; font-size:18px'>🚀 Deploy</span>]

    style A fill:#12C7D3,stroke:#333,stroke-width:2px,font-weight:bold,font-size:18px
    style B fill:#325E8C,stroke:#333,stroke-width:2px,font-weight:bold,font-size:18px
    style C fill:#8A70A6,stroke:#333,stroke-width:2px,font-weight:bold,font-size:18px
    style D fill:#F54A57,stroke:#333,stroke-width:2px,font-weight:bold,font-size:18px
    style E fill:#F28C16,stroke:#333,stroke-width:2px,font-weight:bold,font-size:18px
Phase Starts here Ends here
💡 Ideate Whiteboard or Short-term Plan or Weekly AllHands Feature card created in 'MAY BE?' column here.
🎨 Design Move the card to 'IN PROGRESS' here. Updated card comments with design approach, tool choices, and anticipated flow of logic.
Seek feedback from the rest.
🔨 Build Create a new feature branch as described here - and follow the ⚡️ Micro Flow. Feature built.
Log the improvements you would like to do, but could not do in the Tech Debt.
🧪 Test Optional Sandbox Testing followed by mandatory Integration Testing. Feature validated.
🚀 Deploy Merge your Pull Request to dev branch. Live on dev.visualli.ai.

🧪 Sandbox Testing

Using Record & Replay.

This enables testing a specific backend layer in isolation, for faster feedback loops.

Sandbox testing allows you to run and test specific projects in isolation by replaying previously recorded legitimate requests (tapes). This ensures consistent testing conditions and enables offline development/testing of specific components without spinning up the entire stack.

Recording Traffic

To capture real traffic across the entire application chain:

npm run dev:record

This starts the full stack (frontend, backend, AI engine) in recording mode. Any interaction you perform in the frontend will be captured as "tapes" (in JSON5 format) in the respective tests/sandbox/tapes folder.

Replaying Traffic

To test a specific backend layer in isolation using recorded tapes:

# To test Backend Server in a Sandbox
cd backend/server
npm run dev:replay

# To test AI Engine in a Sandbox
cd backend/ai-engine
npm run dev:replay

This starts the specific backend layer and replays the recorded requests against it, verifying that the current implementation produces the same responses as the recorded baseline. This is excellent for regression testing and rapid iteration on backend logic without all the moving parts to be available and running.

💠 Integration Testing

This ensures that the feature works as expected when integrated with other components.

Simply by running npm run dev from the root folder and test the feature across the entire stack.

⚡ Micro Flow

Agent-driven Development.

The inner loop where you and the AI build together.

We build using AI Agents as first-class developers, supported by Copilot, Claude, Gemini, and specialized Agent Skills.

Philosophy: Vibecode with caution, Iterate with intent.

🛠️ Tooling Strategy

Task Type When to use? Recommended Agent
Logic / Backend Business logic, APIs, Refactors, Performance, .. VS Code + GitHub Copilot
(Claude Sonnet)
UI / Visuals UI Redesign, Layout, Spacing, Colors, ..
Always provide screenshots.		 Google Antigravity
(Gemini)

🔄 Iteration Loop

graph LR
    A[🎯 Goal] --> B[🧠 Prompt]
    B --> C[🔁 Iterate]
    C --> D[🧪 Verify]

    style A fill:#202020,stroke:#12C7D3,stroke-width:2px,color:#fff
    style B fill:#202020,stroke:#325E8C,stroke-width:2px,color:#fff
    style C fill:#202020,stroke:#8A70A6,stroke-width:2px,color:#fff
    style D fill:#202020,stroke:#F54A57,stroke-width:2px,color:#fff
  1. 🎯 Define Small Goal
    Break it down.
    Small goals = fewer errors.

    ❌ Bad: "Make the dashboard work."
    ✅ Good: "Add collapsible sidebar with smooth animation and localStorage persistence."

  2. 🧠 Write Quality Prompt
    Garbage in, garbage out.

    Context: "You are a senior React dev..."
    Task: "Create a component that..."
    Constraints: "Use Tailwind, no external libraries..."

    💡 Tip: Ask the AI: "Refine this prompt for better results."

    Read Claude 4 Best Practices

  3. 🔄 Iterate (mandatory)
    First output is never final.
    Refine prompt and the context files (see below) until the quality is reached.

  4. 🧪 Verify

    Run app locally (npm run dev).
    Check edge cases and UI visually.
    Refine the prompt and regenerate if needed.

🧩 Copilot Instructions¶
Keep .github/copilot-instructions.md up to date with rules, styles and architecture that you want the Agent to follow into every prompt execution.

Watch it here
Read it here

🛠️ Agent Skills¶
Create and maintain skills under .github/skills folder for reusable capabilities (testing, performance audit, etc). Thumb rule is if you need a capability more than once, make it a skill.

Watch it here
Read it here