← Back to all playbooks

Cj

CJ HESS: Context7 MCP
Start: 04:02:10
Sketch note for Cj's session
TL;DR

Shift from text-based planning to visual JSON-based diagrams (Flowey) to give LLMs spatial reasoning capabilities for UI/UX and navigation flows.

Key Insights

Monorepo Root Execution for AI Context

04:05:15

Run AI agents at the root of a monorepo to eliminate the 'API bottleneck.' This allows the model to see the database, backend, and frontend simultaneously, building full data flows without the user manually explaining API endpoints.

Visual JSON State vs. ASCII Planning

04:13:05

Replace ASCII boxes in Markdown with JSON-based flowcharts (Flowey). JSON provides specific IDs, coordinates, and labels that models like Sonnet 3.5 can parse for spatial reasoning, leading to higher-fidelity UI implementation than text alone.

Prompting via 'Rambling' Voice-to-Text

04:17:44

Use voice-to-text (Whisperflow/Monologue) for initial project scoping. Rambling provides significantly more edge-case context and detail than typing, which often suffers from 'inherent laziness' and leads to vague AI inferences.

Anti-MCP for Context Management

04:24:01

Prefer Skills and CLIs over the Model Context Protocol (MCP) to avoid 'context bloat.' Skills allow for more granular control and specificity, preventing the model from being overwhelmed by unnecessary environment data.

Systems

Visual-First Implementation Loop

  1. Dictate project requirements via voice-to-text to capture maximum context.
  2. Generate a structured Markdown plan using an LLM.
  3. Use the 'Flowey' skill to generate JSON-based flowcharts and UI mockups in the local directory.
  4. Review/edit the visual JSON diagrams manually or via AI to ensure spatial logic is correct.
  5. Execute the code generation by referencing the specific JSON diagram IDs and the Markdown plan.
Tools: Whisperflow, Flowey, Claude Sonnet 3.5, Cursor

The 'In-Chat' Debugging Protocol

  1. Capture the specific error message and the exact user action that triggered it.
  2. Prompt the AI to reference the original Markdown plan and the navigation flowchart JSON.
  3. Explicitly command the AI to explain the discrepancy 'in the chat' before writing any code.
  4. Verify the AI's logic against the visual flow before allowing it to apply file diffs.
Tools: Claude, Flowey

Tools

FloweyWhisperflowMonologueClaude Sonnet 3.5Claude 4.5CursorFigma