DOCSEARCHbyAlgolia
Submit Docs

Vibe Coding

repository·main·Indexed 26 days ago

https://github.com/enzed/vibe-coding

A methodology and workflow for building complex software using high-reasoning LLMs such as Claude Opus 4.7 and Codex 5.5. The approach emphasizes upfront planning, a structured 'Memory Bank' for context management, and iterative, test-driven implementation using tools like Claude Code and Codex CLI.

Tokens
1.1K
Snippets
1
Records
6
Agent score
39%

What's inside vibe-coding

  1. Install Codex CLI or Claude Code

    main

    To begin vibe coding, install one of the following tools via npm in your terminal:

    • Codex CLI: npm i -g @openai/codex
    • Claude Code: npm i -g @anthropic-ai/claude-code

    You can also use the Codex App or VSCode extensions for these tools.

    npm i -g @openai/codex
# or
npm i -g @anthropic-ai/claude-code

  2. Set up the Vibe Coding project structure

    main

    Follow these steps to establish the foundation for your project:

    1. Create a Game Design Document (GDD) or Product Requirements Document (PRD): Ask your AI (e.g., Codex 5.5) to create a game-design-document.md in Markdown format based on your idea.
    2. Define the Tech Stack: Ask your AI to recommend the simplest yet most robust tech stack possible and save it as tech-stack.md.
    3. Initialize Rules: In your terminal, run the /init command using Claude Code or Codex CLI. This uses your .md files to create guidance rules. Review these rules to ensure they emphasize modularity and include "Always" rules for critical context (e.g., always reading the architecture or GDD files).
    4. Create an Implementation Plan: Provide the GDD and tech stack to your AI and ask it to create a detailed, step-by-step implementation-plan.md. Each step should be small, specific, and include a test for validation. Do not include code in this plan.
    5. Initialize the Memory Bank: Create a memory-bank folder in your project root and add the following files:
      • game-design-document.md
      • tech-stack.md
      • implementation-plan.md
      • progress.md (empty, for tracking completed steps)
      • architecture.md (empty, for documenting file purposes)

  3. Execute the Vibe Coding workflow

    main

    Once your memory bank is set up, follow this iterative workflow:

    1. Clarify the Plan: Prompt your AI: Read all the documents in /memory-bank, is implementation-plan.md clear? What are your questions to make it 100% clear for you? Answer the questions and have it update the plan.
    2. First Implementation: Prompt: Read all the documents in /memory-bank, and proceed with Step 1 of the implementation plan. I will run the tests. Do not start Step 2 until I validate the tests. Once I validate them, open progress.md and document what you did for future developers. Then add any architectural insights to architecture.md to explain what each file does.
    3. Iterate:
      • Complete a step.
      • Commit changes to Git.
      • Start a new chat using /new or /clear to maximize context window efficiency.
      • Prompt: Now go through all files in the memory-bank, read progress.md to understand prior work, and proceed with Step [X]. Do not start Step [X+1] until I validate the test.

    Tip: Use shift+tab in Claude Code to enter "Ask" or "Plan Mode" before allowing the AI to execute a step.

  4. Troubleshoot and fix errors in Vibe Coding

    main

    If you encounter bugs or get stuck, use these strategies:

    • Claude Code Rollback: Use the /rewind command to roll the project back to an earlier state if an iteration fails.
    • Codex 5.5 Rollback: Commit frequently to Git so you can git reset when needed.
    • JavaScript Errors: Open the browser console (F12), copy the error, and provide it to the AI. Use BrowserTools to automate this.
    • Severe Stalls: Revert to your last Git commit (git reset) and retry with different prompts. If still stuck, use RepoPrompt or uithub to provide the entire codebase to the AI for assistance.

  5. Claude Code CLI commands and tips

    main

    Useful commands and patterns for Claude Code:

    • /rewind: Rolls the project back to an earlier state.
    • /new or /clear: Clears the chat context to keep the context window fresh.
    • /compact: Clears context.
    • /context: Check context usage (aim to keep it under 50-60% for best performance).
    • Custom Commands: You can create helpers like /explain $arguments to trigger deep-dive prompts.
    • Bypass Permissions: Use claude --dangerously-skip-permissions to run without confirmation prompts (use with caution).
    • Reasoning Triggers: Use specific phrases to trigger deeper reasoning: think < think hard < think harder < ultrathink.

  6. Codex CLI commands and tips

    main

    Useful commands and patterns for Codex CLI:

    • Bypass Permissions: Use codex --yolo to run without confirmation prompts (use with caution).
    • Planning: For better results, explicitly ask for a "planning pass", "tighter constraints", and "deeper reasoning" before execution.