In this stage, we will create and configure Memory Bank files for a simple Snake game to demonstrate how Memory Bank works.

Create a file with project requirements

First of all, we will create a brief explanation of the project in free form. Don't overthink this step - we just need to provide a general idea of the project without any strict structure. This file will be used to generate Memory Bank files.

Create 'snake_game.md' file with the following content: Project: Browser-based Snake Game (MVP) 1. Purpose & Scope Purpose: deliver a minimal, fully playable Snake game in a modern browser. Only includes the essential features needed for a functional Snake game; excludes all optional enhancements. 2. MVP Features • Game Initialization • Snake of length 3 appears centered on a 20×20 grid. • One food item spawns at a random empty cell. • Core Game Loop • Game updates every 150 ms by default. • Each tick: move snake, detect collisions, render state. • Controls & Direction Handling • Arrow keys (and/or WASD) change direction. • Disallow 180° reversals (e.g. left → right). • Collision Detection & Game Over • Hitting a wall or the snake's own body triggers "Game Over." • On game over: pause loop, show overlay with final score, disable input until restart. • Scoring Display • Current score (number of food eaten) updates in real time above or beside the canvas. • Restart Functionality • "Restart" button resets the game to its initial state without reloading the page. • Browser Compatibility • Support latest two major versions of Chrome, Firefox, Edge and Safari. 3. Functional Requirements • FR-1: Initialize game state with snake length = 3 at grid center and one food item. • FR-2: Implement a game loop that runs at a configurable interval (default 150 ms). • FR-3: Capture and queue keyboard events for direction changes; prevent direct reversals. • FR-4: On each tick: 1. Move snake head one cell in current direction. 2. Check for wall or self-collision → if so, trigger game-over flow. 3. If head lands on food: increment score, grow snake by one segment, spawn new food. 4. Render updated snake, food, and score. • FR-5: Display a "Game Over" overlay with final score and a clickable "Restart" button. • FR-6: Reset all state (snake position/length, score, food) when "Restart" is clicked. 4. Non-Functional Requirements • Canvas scales to fit viewport while preserving cell aspect ratio. • Use ES6+ modules; separate game logic from rendering; include inline documentation. • All interactive elements reachable via keyboard; minimal ARIA labels on buttons. 5. Acceptance Criteria • Player can move the snake using keyboard; snake cannot reverse direction 180°. • Snake grows when eating food; score increments accordingly. • Colliding with wall or self immediately stops the game and displays final score. • "Restart" immediately resets and restarts gameplay. • Works smoothly in Chrome, Firefox, Edge, and Safari without console errors.

Make sure that snake_game.md file is created in the project directory.

Memory Bank files creation

Now, we will use snake_game.md file to create Memory Bank files.

Based on snake_game.md create memory bank files. Use Memory Bank MCP.

You will see the process of creating Memory Bank files in the chat: step by step it will create 7 files filled with content based on our requirements in @snake_game.md file:

Memory Bank files creation

Make sure that 7 files are created in the project directory:

projectbrief.md
productContext.md
systemPatterns.md
techContext.md
activeContext.md
progress.md
memory_bank_instructions.md

Overview Memory Bank files

projectbrief.md
- The foundation document
- Defines core requirements and goals
- Serves as the source of truth for project scope
- Created first and rarely changes
productContext.md
- The "why" of your project
- Explains why the project exists
- Describes user needs and problems solved
- Outlines user experience goals
systemPatterns.md
- The "how" of your project
- Documents system architecture
- Records key technical decisions
- Describes design patterns and component relationships
techContext.md
- The tools and technologies
- Lists technologies and frameworks used
- Documents development setup
- Records technical constraints
activeContext.md
- The current state
- Documents what you're working on right now
- Records recent changes and next steps
- Updated most frequently
progress.md
memory_bank_instructions.md
- Instructions for Memory Bank
- Describes how to use Memory Bank
- Stays static and doesn't change

What's next?

In the next stage, we will use Memory Bank files to build a Snake game.

Introduction to Memory Bank