Appendix: file inventory

The public workshop repo is small enough to check directly:

vibe-coding/
├── README.md
├── snake-chatgpt/
│   ├── package.json
│   ├── vite.config.js
│   └── src/
│       ├── App.jsx
│       ├── App.css
│       ├── index.css
│       └── main.jsx
└── snake-claude-code/
    ├── package.json
    ├── vite.config.js
    └── src/
        ├── App.jsx
        ├── App.css
        ├── index.css
        ├── main.jsx
        └── components/
            └── SnakeGame.jsx

The two apps share the same Vite base. Both use React 19, Vite 7, @vitejs/plugin-react, Tailwind 4, and the Tailwind Vite plugin.

ChatGPT app landmarks

Look at snake-chatgpt/src/App.jsx first. The file is short and keeps the whole game in one component.

const BOARD_SIZE = 20;
const INITIAL_SNAKE = [{ x: 8, y: 8 }];
const INITIAL_DIRECTION = { x: 1, y: 0 };
const SPEED = 200;

The core state is snake, food, direction, and gameOver. The game loop runs with setInterval(moveSnake, SPEED), and the board renders by mapping over 400 cells.

The CSS files are worth checking too. src/index.css imports Tailwind, but src/App.css still contains the default Vite starter styles. That is common when you move generated code into a starter project.

Claude Code app landmarks

Look at snake-claude-code/src/App.jsx next. It imports the game component instead of holding the game logic directly:

import SnakeGame from './components/SnakeGame'

The detailed behavior is in src/components/SnakeGame.jsx. The component adds state for score, game start, and mode:

const [score, setScore] = useState(0)
const [gameStarted, setGameStarted] = useState(false)
const [mode, setMode] = useState('walls')

The mode button is disabled once the game starts:

<button
  className="px-3 py-1 bg-gray-700 text-white rounded mb-2 disabled:opacity-50"
  onClick={() => setMode(mode === 'walls' ? 'pass-through' : 'walls')}
  disabled={gameStarted}
>
  Switch to {mode === 'walls' ? 'Pass-Through' : 'Walls'} Mode
</button>

That is a small but useful product decision. It avoids changing collision rules while a game is already in progress.

Commands for both apps

Run these from either app folder:

npm install
npm run dev
npm run lint
npm run build

Use the same commands when you compare another tool. Keeping the target app and the checks stable gives you a cleaner read on the tool instead of on your changing process.