initialize-game-repo

Initialize Game Repo

Use this skill when a user wants to bootstrap a 3D web game or prototype repository that runs in the browser and can also launch as an Electron desktop app.

Goals

Create a small, working starter project with:

• React latest with Vite.
• Babylon.js packages for 3D scene work.
• A simple full-window Babylon scene to edit from.
• Source files under app/, not src/.
• Electron files under electron/.
• Kebab-case naming for .ts and .tsx files.
• Web scripts named *:web.
• Desktop scripts named *:desktop.

Recommended Setup

If the target folder is empty, scaffold Vite React in place:

npm create vite@latest . -- --template react

If the scaffold does not apply the React template cleanly, convert the generated project manually:

• Use index.html with <div id="root"></div>.
• Point the module script to /app/main.tsx.
• Add vite.config.ts with the React plugin.
• Set jsx: "react-jsx" in tsconfig.json.
• Include app in tsconfig.json.

Install runtime dependencies:

npm install react@latest react-dom@latest babylonjs@latest react-babylonjs@latest @babylonjs/core@latest @babylonjs/loaders@latest

Install dev dependencies:

npm install -D @vitejs/plugin-react@latest @types/react@latest @types/react-dom@latest electron@latest concurrently@latest wait-on@latest

File Layout

Use this shape:

app/
  app.tsx
  babylon-scene.tsx
  main.tsx
  styles.css
electron/
  main.cjs
  preload.cjs
index.html
package.json
tsconfig.json
vite.config.ts

Keep all project-owned .ts and .tsx file names in kebab-case. main.tsx is already compliant.

Vite Configuration

Use base: './' so production assets load correctly from Electron's file:// path:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: './',
  plugins: [react()],
})

Package Scripts

Use explicit web and desktop script names: