Operational Tactics (The "How-To")

Knowing the tools (Chapter 2) is step one. Knowing how to wield them is step two. This chapter covers the "Tactical Drills"—specific workflows to maximize velocity and quality.

1. Context Engineering for Code

The biggest failure mode is "Context Dumping"—pasting your entire repo into the chat and expecting magic.

The Drill: Curate, Don't Dump. Before asking for a change, ask yourself: What is the Minimum Viable Context?

  • Do: Select only the interface definitions (types.ts) and the specific file you are editing.
  • Do: Use .cursorrules (or .windsurfrules) to enforce project standards automatically.

Example .cursorrules:

- Always use Zod for validation.
- Use Tailwind CSS for styling.
- Prefer functional components over classes.
- If you change a public API, update the documentation.

2. The "Figma-to-Code" Pipeline

Coding UI from scratch is slow. Coding from a screenshot is fast.

The Workflow:

  1. Screenshot: Take a screenshot of the Figma design (or a whiteboard sketch).
  2. Prompt: "Implement this component. Use Tailwind."
  3. Iterate: "Make the padding smaller. Change the blue to #3b82f6."

Pro Tip: Don't ask for logic yet. Ask for Visual Static HTML/CSS first. Once it looks right, then ask the AI to "Wire up the state and click handlers." Separation of Visuals vs. Logic reduces hallucinations.

3. Debugging with AI: The "Spiral of Death"

Everyone has been there:

  1. AI suggests a fix.
  2. You run it -> Error.
  3. You paste Error.
  4. AI apologizes and suggests Fix B.
  5. You run it -> Same Error.
  6. AI suggests Fix A again.

How to break the loop:

  • Stop. Don't paste the error a 3rd time.
  • Reset Context. Open a new chat.
  • Negative Constraint. "Do NOT use the solution you just tried. Try a completely different approach."
  • Ask for a Repro. "Write a minimal reproduction script that demonstrates this error." often reveals that the AI's assumption about the library version was wrong.

4. The AI Git Workflow

"Vibe Coding" often leads to massive, messy commits ("feat: added everything").

The Drill: Atomic AI Commits.

  1. Ask AI to do Task A (e.g. "Add the button").
  2. Verify.
  3. Commit immediately.
  4. Ask AI to do Task B (e.g. "Wire up the button click").

Why? If Task B breaks everything, you can git checkout . to get back to the clean state of Task A. If you didn't commit, you have to undo everything.

Summary

  • Curate Context: Treat the context window like precious RAM.
  • Visuals First: Build UI from screenshots before adding logic.
  • Break Loops: recognize when the AI is stuck and reset.
  • Commit Often: AI is experimental; save your progress points.