gh-cskiro-claudex-devops-tools/skills/react-project-scaffolder/modes/sandbox.md

Mode 1: Sandbox (Vite + React + TypeScript)

Purpose: Lightning-fast React setup for experiments and learning

Setup Time: ~15 seconds after npm install

Tech Stack

• Vite 5+ (fastest dev server, HMR in <50ms)
• React 18+
• TypeScript (strict mode)
• ESLint + Prettier (minimal config)

Configuration Strategy: Fully automated, zero questions

Workflow Steps

1. Scaffold with Vite

npm create vite@latest {project-name} -- --template react-ts
cd {project-name}

2. Configure TypeScript Strict Mode

• Update tsconfig.json with Connor's strict settings
• Enable all strict flags
• Configure path aliases

3. Set Up Linting

• Install ESLint + Prettier
• Apply minimal config (no overkill for sandbox)
• Add format script to package.json

4. Initialize Git

git init
git add .
git commit -m "feat: initial Vite + React + TypeScript setup"

5. Provide Next Steps

## Your Sandbox is Ready!

Start development:
  cd {project-name}
  npm install
  npm run dev

Project structure:
  src/
    ├── App.tsx          # Main component
    ├── main.tsx         # Entry point
    └── vite-env.d.ts    # Vite types

Available commands:
  npm run dev          # Start dev server (http://localhost:5173)
  npm run build        # Build for production
  npm run preview      # Preview production build
  npm run lint         # Check code quality

When to Use

• Quick experiments and prototypes
• Learning React concepts
• Testing ideas before enterprise implementation
• Minimal overhead needed