Initial commit

skills/devops/react-project-scaffolder/modes/enterprise-mode.md

@@ -0,0 +1,922 @@
+# Enterprise Mode - Next.js + Full Tooling
+
+## Mode Overview
+
+**Purpose**: Production-ready web applications with comprehensive tooling and testing
+
+**Target Users**:
+- Building SaaS products
+- Enterprise dashboards and admin panels
+- Content-heavy websites with SEO needs
+- Applications requiring server-side rendering
+- Teams needing consistent standards
+
+**Setup Time**: ~60 seconds (after npm install)
+
+**Philosophy**: Production-ready from day one. Industry-standard tooling with Connor's quality standards built in.
+
+---
+
+## Tech Stack
+
+```yaml
+Framework:
+  - Next.js 14+ (App Router, React Server Components)
+  - React 18+
+  - TypeScript 5+ (strict mode)
+
+Testing:
+  - Vitest (Testing Trophy approach)
+  - React Testing Library
+  - jsdom (DOM simulation)
+  - 80% coverage threshold
+
+Code Quality:
+  - ESLint (Next.js config + strict rules)
+  - Prettier (consistent formatting)
+  - Husky (pre-commit hooks)
+  - lint-staged (staged files only)
+
+CI/CD:
+  - GitHub Actions
+  - Automated testing on PR
+  - Build validation
+  - Type checking
+
+Standards:
+  - Conventional Commits
+  - Branch naming conventions
+  - Comprehensive documentation
+```
+
+---
+
+## Workflow
+
+### Step 1: Validate Prerequisites
+
+```bash
+# Check Node.js version (>= 18)
+node --version
+
+# Check npm version (>= 9)
+npm --version
+
+# Check git is installed
+git --version
+```
+
+**If validation fails**: Provide clear upgrade instructions with links
+
+### Step 2: Ask Configuration Questions
+
+Only ask essential questions with smart defaults:
+
+**Question 1: Project Name**
+- "What should I name your project?"
+- Validation: kebab-case, 3-50 chars, no existing directory
+- Example: my-awesome-app
+
+**Question 2: Testing Setup**
+- "Include testing infrastructure? (Vitest + React Testing Library)"
+- Default: YES
+- Explain: "Recommended for production apps. Adds ~30s to setup."
+
+**Question 3: CI/CD Workflows**
+- "Include GitHub Actions CI/CD?"
+- Default: YES
+- Explain: "Automated testing on every PR. Requires GitHub repository."
+
+**Question 4: Source Directory**
+- "Use src/ directory for better organization?"
+- Default: YES
+- Explain: "Keeps root clean. Next.js best practice."
+
+### Step 3: Scaffold with Next.js
+
+```bash
+npx create-next-app@latest {project-name} \
+  --typescript \
+  --eslint \
+  --app \
+  --src-dir \
+  --import-alias "@/*" \
+  --no-tailwind
+
+cd {project-name}
+```
+
+**Why these flags?**
+- `--typescript`: Connor requires TypeScript
+- `--eslint`: Linting from start
+- `--app`: Use App Router (modern approach)
+- `--src-dir`: Clean project structure
+- `--import-alias`: Absolute imports with @/
+- `--no-tailwind`: Let user choose styling (can add later)
+
+### Step 4: Apply Connor's TypeScript Standards
+
+Update `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Connor's Strict Mode Additions */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitReturns": true,
+    "noImplicitOverride": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+```
+
+### Step 5: Set Up Testing (if selected)
+
+**5.1 Install Dependencies**
+
+```bash
+npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event @vitest/coverage-v8
+```
+
+**5.2 Create `vitest.config.ts`**
+
+```typescript
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: './src/__tests__/setup.ts',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'src/__tests__/',
+        '**/*.config.ts',
+        '**/*.config.js',
+        '.next/',
+      ],
+      // Connor's 80% threshold
+      lines: 80,
+      functions: 80,
+      branches: 80,
+      statements: 80,
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
+```
+
+**5.3 Create Test Setup File**
+
+`src/__tests__/setup.ts`:
+
+```typescript
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+```
+
+**5.4 Create Example Test**
+
+`src/__tests__/page.test.tsx`:
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Page from '@/app/page';
+
+describe('Home Page', () => {
+  it('should render welcome message when page loads', () => {
+    render(<Page />);
+
+    // Testing Trophy approach: Test user-visible behavior
+    const heading = screen.getByRole('heading', { level: 1 });
+    expect(heading).toBeInTheDocument();
+  });
+
+  it('should have semantic HTML structure for accessibility', () => {
+    const { container } = render(<Page />);
+
+    // Check for main landmark
+    const main = container.querySelector('main');
+    expect(main).toBeInTheDocument();
+  });
+});
+```
+
+**5.5 Update package.json Scripts**
+
+Add to `scripts`:
+
+```json
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest --coverage",
+    "test:low": "vitest --maxWorkers=2 --run",
+    "test:ui": "vitest --ui"
+  }
+}
+```
+
+### Step 6: Configure Code Quality Tools
+
+**6.1 Extend ESLint Configuration**
+
+Update `.eslintrc.json`:
+
+```json
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "no-console": "warn",
+    "no-var": "error",
+    "eqeqeq": ["error", "always"],
+    "prefer-const": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/no-explicit-any": "error"
+  }
+}
+```
+
+**6.2 Add Prettier**
+
+Create `.prettierrc`:
+
+```json
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false
+}
+```
+
+Create `.prettierignore`:
+
+```
+node_modules
+.next
+out
+build
+dist
+coverage
+*.lock
+```
+
+Install Prettier:
+
+```bash
+npm install -D prettier eslint-config-prettier
+```
+
+Update `.eslintrc.json` to include Prettier:
+
+```json
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ]
+}
+```
+
+**6.3 Set Up Husky + lint-staged**
+
+```bash
+npx husky-init && npm install
+npm install -D lint-staged
+```
+
+Update `.husky/pre-commit`:
+
+```bash
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
+```
+
+Create `.lintstagedrc.js`:
+
+```javascript
+module.exports = {
+  '*.{ts,tsx}': [
+    'eslint --fix',
+    'prettier --write',
+    () => 'tsc --noEmit', // Type check
+  ],
+  '*.{json,md}': ['prettier --write'],
+};
+```
+
+Update `package.json`:
+
+```json
+{
+  "scripts": {
+    "prepare": "husky install"
+  }
+}
+```
+
+### Step 7: Set Up CI/CD (if selected)
+
+Create `.github/workflows/ci.yml`:
+
+```yaml
+name: CI
+
+on:
+  pull_request:
+    branches: [main, develop]
+  push:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Type check
+        run: npm run type-check
+
+      - name: Run tests
+        run: npm run test:coverage
+
+      - name: Upload coverage
+        uses: codecov/codecov-action@v3
+        if: matrix.node-version == '20.x'
+        with:
+          file: ./coverage/coverage-final.json
+          flags: unittests
+
+      - name: Build project
+        run: npm run build
+        env:
+          NODE_ENV: production
+```
+
+### Step 8: Create Project Documentation
+
+**8.1 Update README.md**
+
+```markdown
+# {project-name}
+
+Production-ready Next.js application with comprehensive testing and tooling.
+
+## Features
+
+- ⚡ Next.js 14+ with App Router
+- 🔷 TypeScript (strict mode)
+- 🧪 Testing Trophy approach (Vitest + RTL)
+- ✅ 80% test coverage threshold
+- 🎨 ESLint + Prettier
+- 🪝 Husky pre-commit hooks
+- 🔄 GitHub Actions CI/CD
+- 📝 Conventional Commits
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- npm 9+
+
+### Installation
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### Development
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+Visit [http://localhost:3000](http://localhost:3000)
+
+## Project Structure
+
+\`\`\`
+src/
+├── app/                    # Next.js App Router
+│   ├── page.tsx            # Home page
+│   ├── layout.tsx          # Root layout
+│   └── globals.css         # Global styles
+├── components/             # React components
+│   ├── ui/                 # UI components
+│   └── features/           # Feature components
+├── lib/                    # Utility functions
+│   └── utils.ts
+└── __tests__/              # Test files
+    ├── setup.ts            # Test configuration
+    └── page.test.tsx       # Example test
+\`\`\`
+
+## Available Commands
+
+### Development
+- \`npm run dev\` - Start dev server (http://localhost:3000)
+- \`npm run build\` - Build for production
+- \`npm run start\` - Start production server
+
+### Code Quality
+- \`npm run lint\` - Lint code with ESLint
+- \`npm run type-check\` - Check TypeScript types
+
+### Testing
+- \`npm run test\` - Run all tests
+- \`npm run test:watch\` - Run tests in watch mode
+- \`npm run test:coverage\` - Run tests with coverage report
+- \`npm run test:low\` - Run tests (low CPU usage)
+
+## Testing Strategy
+
+This project follows the **Testing Trophy** approach:
+
+- **70% Integration Tests**: User workflows and component interactions
+- **20% Unit Tests**: Complex business logic
+- **10% E2E Tests**: Critical user journeys
+
+### Writing Tests
+
+Test file naming: \`[component-name].test.tsx\`
+
+Test structure:
+\`\`\`typescript
+describe('Component Name', () => {
+  it('should [behavior] when [condition]', () => {
+    // Arrange, Act, Assert
+  });
+});
+\`\`\`
+
+Use semantic queries (React Testing Library):
+1. \`getByRole()\` - Most preferred
+2. \`getByLabelText()\` - Form elements
+3. \`getByText()\` - User-visible content
+4. \`getByTestId()\` - Last resort only
+
+### Coverage Requirements
+
+Minimum 80% coverage for:
+- Lines
+- Functions
+- Branches
+- Statements
+
+## Git Workflow
+
+### Branch Naming
+
+- \`feature/description\` - New features
+- \`bugfix/description\` - Bug fixes
+- \`chore/description\` - Maintenance tasks
+
+### Commit Messages
+
+Follow [Conventional Commits](https://www.conventionalcommits.org/):
+
+\`\`\`
+feat: add user authentication
+fix: resolve login redirect issue
+test: add tests for auth flow
+docs: update API documentation
+chore: update dependencies
+\`\`\`
+
+### Pre-commit Checks
+
+Husky automatically runs before each commit:
+- ESLint (auto-fix enabled)
+- Prettier (auto-format)
+- TypeScript type checking
+- Staged files only (fast)
+
+## Deployment
+
+### Vercel (Recommended)
+
+\`\`\`bash
+npm install -g vercel
+vercel
+\`\`\`
+
+### Docker
+
+\`\`\`bash
+docker build -t {project-name} .
+docker run -p 3000:3000 {project-name}
+\`\`\`
+
+## Environment Variables
+
+Create \`.env.local\`:
+
+\`\`\`env
+# Example variables
+NEXT_PUBLIC_API_URL=https://api.example.com
+DATABASE_URL=postgresql://...
+\`\`\`
+
+## CI/CD
+
+GitHub Actions runs on every PR:
+1. Install dependencies
+2. Lint code
+3. Type check
+4. Run tests with coverage
+5. Build project
+
+## Tech Stack Details
+
+### Why Next.js?
+- Server-side rendering for SEO
+- API routes for backend logic
+- Optimized image handling
+- Industry standard (Netflix, TikTok)
+
+### Why Vitest?
+- 10x faster than Jest
+- Compatible with Vite
+- Great TypeScript support
+- Modern testing features
+
+## Contributing
+
+1. Create a feature branch
+2. Make changes with tests
+3. Ensure all checks pass
+4. Submit PR with description
+
+## License
+
+MIT
+
+---
+
+Built with [react-project-scaffolder](https://github.com/yourusername/react-project-scaffolder)
+```
+
+**8.2 Create CONTRIBUTING.md**
+
+```markdown
+# Contributing Guidelines
+
+## Development Standards
+
+### Code Quality
+- TypeScript strict mode (all flags enabled)
+- No \`console.log\` in production code
+- No \`any\` types
+- Explicit return types for functions
+
+### Testing
+- Write tests for new features
+- Maintain 80% coverage minimum
+- Follow Testing Trophy approach
+- Use semantic queries in tests
+
+### Commits
+- Follow Conventional Commits format
+- Keep commits atomic and focused
+- Write descriptive commit messages
+
+## Development Workflow
+
+1. **Create branch**: \`git checkout -b feature/your-feature\`
+2. **Make changes**: Edit code + add tests
+3. **Run checks**: \`npm run lint && npm run test\`
+4. **Commit**: \`git commit -m "feat: your feature"\`
+5. **Push**: \`git push origin feature/your-feature\`
+6. **Create PR**: Submit for review
+
+## Pre-commit Checks
+
+Husky runs these automatically:
+- ESLint (fixes issues automatically)
+- Prettier (formats code)
+- TypeScript (type checking)
+
+If checks fail, fix issues before committing.
+
+## Testing Guidelines
+
+### What to Test
+- User-visible behavior
+- Business logic
+- Error handling
+- Edge cases
+
+### What NOT to Test
+- Implementation details
+- External libraries
+- Trivial functions
+
+### Example Test
+
+\`\`\`typescript
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LoginForm } from './LoginForm';
+
+describe('LoginForm', () => {
+  it('should submit form when user enters valid credentials', async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+
+    render(<LoginForm onSubmit={onSubmit} />);
+
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+    await user.type(screen.getByLabelText(/password/i), 'password123');
+    await user.click(screen.getByRole('button', { name: /submit/i }));
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      email: 'test@example.com',
+      password: 'password123',
+    });
+  });
+});
+\`\`\`
+
+## Questions?
+
+Open an issue or reach out to the maintainers.
+```
+
+### Step 9: Initialize Git
+
+```bash
+git init
+git add .
+git commit -m "feat: initial Next.js enterprise setup with testing and CI/CD
+
+- Next.js 14 with App Router
+- TypeScript strict mode
+- Vitest + React Testing Library (80% coverage)
+- ESLint + Prettier + Husky
+- GitHub Actions CI/CD
+- Comprehensive documentation"
+```
+
+### Step 10: Verify Setup
+
+```bash
+# Verify all files
+ls -la
+
+# Check dependencies installed
+npm list --depth=0
+
+# Verify TypeScript config
+cat tsconfig.json | grep "strict"
+
+# Verify tests can run
+npm run test
+
+# Verify build works
+npm run build
+```
+
+### Step 11: Provide User Instructions
+
+**Display to user**:
+
+```markdown
+✅ Enterprise project "{project-name}" created successfully!
+
+📁 Location: ./{project-name}
+
+🚀 Next steps:
+
+  1. cd {project-name}
+  2. npm install
+  3. npm run dev
+
+Your dev server will start at http://localhost:3000
+
+📚 What you have:
+  ✓ Next.js 14 with App Router
+  ✓ TypeScript strict mode
+  ✓ Vitest + React Testing Library (80% coverage)
+  ✓ ESLint + Prettier + Husky
+  ✓ GitHub Actions CI/CD
+  ✓ Testing Trophy approach
+  ✓ Comprehensive documentation
+
+🧪 Test your setup:
+  npm run test           # Run all tests
+  npm run lint           # Check code quality
+  npm run type-check     # Verify types
+
+📋 Pre-commit hooks active:
+  - Linting (auto-fix)
+  - Formatting (auto-format)
+  - Type checking
+
+🔄 CI/CD ready:
+  - Push to GitHub to activate workflows
+  - Automated testing on every PR
+
+💡 Tips:
+  - Follow Testing Trophy: 70% integration, 20% unit, 10% e2e
+  - Use semantic queries: getByRole() > getByLabelText() > getByText()
+  - Write tests alongside features (TDD approach)
+  - Keep commits following Conventional Commits format
+
+📖 Documentation:
+  - README.md - Project overview and commands
+  - CONTRIBUTING.md - Development guidelines
+
+🎯 Production-ready from day one!
+```
+
+---
+
+## File Structure Output
+
+```
+{project-name}/
+├── .github/
+│   └── workflows/
+│       └── ci.yml              # GitHub Actions CI/CD
+├── .husky/
+│   └── pre-commit              # Pre-commit hooks
+├── .vscode/ (optional)
+│   └── settings.json           # Editor config
+├── src/
+│   ├── app/
+│   │   ├── page.tsx            # Home page
+│   │   ├── layout.tsx          # Root layout
+│   │   ├── globals.css         # Global styles
+│   │   └── favicon.ico         # Favicon
+│   ├── components/
+│   │   ├── ui/                 # UI components
+│   │   └── features/           # Feature components
+│   ├── lib/
+│   │   └── utils.ts            # Utilities
+│   └── __tests__/
+│       ├── setup.ts            # Test setup
+│       └── page.test.tsx       # Example test
+├── public/                     # Static files
+├── .eslintrc.json              # ESLint config
+├── .prettierrc                 # Prettier config
+├── .prettierignore             # Prettier ignore
+├── .gitignore                  # Git ignore
+├── .lintstagedrc.js            # lint-staged config
+├── vitest.config.ts            # Vitest config
+├── tsconfig.json               # TypeScript config
+├── next.config.js              # Next.js config
+├── package.json                # Dependencies
+├── README.md                   # Documentation
+└── CONTRIBUTING.md             # Guidelines
+```
+
+---
+
+## Success Criteria
+
+- [ ] Next.js project scaffolded with App Router
+- [ ] TypeScript strict mode enabled (all flags)
+- [ ] Vitest + RTL configured with 80% threshold
+- [ ] Example test passes
+- [ ] ESLint + Prettier configured
+- [ ] Husky pre-commit hooks working
+- [ ] GitHub Actions workflow created
+- [ ] README and CONTRIBUTING.md generated
+- [ ] Git initialized with commit
+- [ ] `npm run dev` starts successfully
+- [ ] `npm run test` passes
+- [ ] `npm run build` completes
+- [ ] Setup time < 90 seconds (excluding npm install)
+
+---
+
+## Troubleshooting
+
+**Issue**: Husky pre-commit hook fails
+**Solution**: Run `npm run lint -- --fix` to auto-fix issues
+
+**Issue**: Tests fail with module resolution errors
+**Solution**: Check vitest.config.ts has correct path aliases
+
+**Issue**: Type errors in strict mode
+**Solution**: This shouldn't happen - review generated code
+
+**Issue**: Build fails
+**Solution**: Run `npm run type-check` to see TypeScript errors
+
+**Issue**: Coverage below 80%
+**Solution**: Add more tests or adjust threshold temporarily
+
+---
+
+## Why This Tech Stack?
+
+**Next.js over Vite**:
+- Server-side rendering for SEO
+- Built-in routing
+- API routes for backend
+- Image optimization
+- Battle-tested at scale (Netflix, Uber)
+
+**Vitest over Jest**:
+- 10x faster test execution
+- Better TypeScript support
+- Modern ESM support
+- Compatible with Vite ecosystem
+
+**Husky + lint-staged**:
+- Catch issues before commit
+- Fast (only staged files)
+- Team consistency
+- Industry standard
+
+**GitHub Actions**:
+- Free for public repos
+- Integrated with GitHub
+- Easy to configure
+- Extensive marketplace
+
+---
+
+**Remember**: This mode is production-ready. Every tool included is standard in industry and aligned with Connor's "production-ready from day one" philosophy.

skills/devops/react-project-scaffolder/modes/enterprise.md

@@ -0,0 +1,117 @@
+# Mode 2: Enterprise (Next.js + Full Tooling)
+
+**Purpose**: Production-ready web applications with industry-standard tooling
+
+**Setup Time**: ~60 seconds after `npm install`
+
+## Tech Stack
+- Next.js 14+ (App Router)
+- React 18+
+- TypeScript (strict mode)
+- Vitest + React Testing Library
+- ESLint + Prettier + Husky
+- GitHub Actions CI/CD
+- Conventional Commits
+
+**Configuration Strategy**: 2-3 key questions, smart defaults
+
+## Configuration Questions
+
+1. "Include testing setup?" (default: yes)
+2. "Include CI/CD workflows?" (default: yes)
+3. "Use src/ directory?" (default: yes)
+
+## Workflow Steps
+
+### 1. Scaffold with Next.js
+```bash
+npx create-next-app@latest {project-name} \
+  --typescript \
+  --eslint \
+  --app \
+  --src-dir \
+  --import-alias "@/*"
+cd {project-name}
+```
+
+### 2. Apply Connor's TypeScript Standards
+- Update tsconfig.json with strict mode
+- Configure path aliases
+- Enable all type checking flags
+
+### 3. Set Up Testing (if selected)
+- Install Vitest, React Testing Library, jsdom
+- Create vitest.config.ts with coverage settings (80% threshold)
+- Add example test: `__tests__/page.test.tsx`
+- Configure Testing Trophy approach
+- Add test scripts:
+  ```json
+  "test": "vitest --run",
+  "test:watch": "vitest",
+  "test:coverage": "vitest --coverage",
+  "test:low": "vitest --maxWorkers=2"
+  ```
+
+### 4. Configure Linting & Formatting
+- Extend ESLint config with strict rules
+- Add Prettier with Connor's preferences
+- Install and configure Husky + lint-staged
+- Set up pre-commit hook for:
+  - Linting
+  - Format checking
+  - Type checking
+  - Test running (on relevant files)
+
+### 5. Set Up CI/CD (if selected)
+- Create `.github/workflows/ci.yml`
+- Configure on PR triggers
+- Steps: install → lint → type-check → test → build
+- Add status badge to README
+
+### 6. Initialize Git with Standards
+```bash
+git init
+git add .
+git commit -m "feat: initial Next.js enterprise setup with testing and CI/CD"
+```
+
+### 7. Provide Next Steps
+
+```markdown
+## Your Enterprise React Project is Ready!
+
+Start development:
+  cd {project-name}
+  npm install
+  npm run dev
+
+Project structure:
+  src/
+    ├── app/              # Next.js App Router
+    │   ├── page.tsx      # Home page
+    │   └── layout.tsx    # Root layout
+    ├── components/       # React components
+    ├── lib/              # Utility functions
+    └── __tests__/        # Test files
+
+Available commands:
+  npm run dev              # Start dev server
+  npm run build            # Production build
+  npm run test             # Run tests (low CPU)
+  npm run test:coverage    # Tests with coverage
+
+Configured features:
+  ✓ TypeScript strict mode
+  ✓ Testing Trophy approach (Vitest + RTL)
+  ✓ ESLint + Prettier + Husky
+  ✓ GitHub Actions CI/CD
+  ✓ 80% coverage threshold
+  ✓ Pre-commit hooks
+```
+
+## When to Use
+
+- Production web applications
+- Team projects requiring standards
+- Projects needing CI/CD from day one
+- Full testing infrastructure needed

skills/devops/react-project-scaffolder/modes/mobile-mode.md

@@ -0,0 +1,950 @@
+# Mobile Mode - Expo + React Native
+
+## Mode Overview
+
+**Purpose**: Cross-platform mobile applications with production-ready tooling
+
+**Target Users**:
+- Building iOS and Android apps from single codebase
+- Mobile-first products and services
+- Teams wanting native performance with React
+- Startups needing fast mobile development
+- Enterprise mobile applications
+
+**Setup Time**: ~60 seconds (after npm install)
+
+**Philosophy**: Native performance, React developer experience, production standards from day one.
+
+---
+
+## Tech Stack
+
+```yaml
+Framework:
+  - Expo SDK 50+ (managed workflow)
+  - React Native (latest stable)
+  - TypeScript 5+ (strict mode)
+
+Navigation:
+  - Expo Router (file-based routing)
+  - React Navigation (under the hood)
+
+Testing:
+  - Jest (React Native default)
+  - React Native Testing Library
+  - 80% coverage threshold
+
+Code Quality:
+  - ESLint (React Native rules)
+  - Prettier (consistent formatting)
+  - Husky (pre-commit hooks)
+  - lint-staged (staged files only)
+
+Build & Deploy:
+  - EAS Build (cloud builds - optional)
+  - EAS Submit (app store submission - optional)
+  - OTA Updates (instant updates)
+
+Standards:
+  - Conventional Commits
+  - TypeScript strict mode
+  - Testing Trophy approach
+```
+
+---
+
+## Workflow
+
+### Step 1: Validate Prerequisites
+
+```bash
+# Check Node.js version (>= 18)
+node --version
+
+# Check npm version (>= 9)
+npm --version
+
+# Check git is installed
+git --version
+
+# Check if Expo CLI is needed (will be installed via npx)
+echo "Expo CLI will be used via npx"
+```
+
+**If validation fails**: Provide upgrade instructions
+
+### Step 2: Ask Configuration Questions
+
+Only essential questions with smart defaults:
+
+**Question 1: Project Name**
+- "What should I name your mobile project?"
+- Validation: kebab-case or PascalCase, 3-50 chars
+- Example: my-awesome-app or MyAwesomeApp
+
+**Question 2: Navigation Setup**
+- "Include Expo Router for navigation?"
+- Default: YES
+- Explain: "File-based routing like Next.js. Recommended for most apps."
+
+**Question 3: Testing Setup**
+- "Include testing infrastructure? (Jest + RN Testing Library)"
+- Default: YES
+- Explain: "Recommended for production apps. Connor's 80% coverage standard."
+
+**Question 4: EAS Cloud Builds**
+- "Set up EAS for cloud builds and app store submission?"
+- Default: NO (can add later)
+- Explain: "Requires Expo account. Can configure later when ready to deploy."
+
+### Step 3: Scaffold with Expo
+
+```bash
+npx create-expo-app@latest {project-name} --template blank-typescript
+cd {project-name}
+```
+
+**Why Expo?**
+- Used by Instagram, Discord, Shopify
+- Fastest mobile development experience
+- Built-in access to native APIs
+- Over-the-air (OTA) updates
+- Managed workflow (easier) or bare workflow (more control)
+
+### Step 4: Install Expo Router (if selected)
+
+```bash
+npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
+```
+
+Update `package.json`:
+
+```json
+{
+  "main": "expo-router/entry"
+}
+```
+
+Create `app/_layout.tsx`:
+
+```typescript
+import { Stack } from 'expo-router';
+
+export default function RootLayout() {
+  return <Stack />;
+}
+```
+
+Create `app/index.tsx`:
+
+```typescript
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function Home() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Welcome to {project-name}</Text>
+      <Text style={styles.subtitle}>
+        Edit app/index.tsx to get started
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 12,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+});
+```
+
+Update `app.json`:
+
+```json
+{
+  "expo": {
+    "name": "{project-name}",
+    "slug": "{project-name}",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "scheme": "{project-name}",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.{username}.{project-name}"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.{username}.{project-name}"
+    },
+    "web": {
+      "bundler": "metro",
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": ["expo-router"]
+  }
+}
+```
+
+### Step 5: Configure TypeScript (Strict Mode)
+
+Update `tsconfig.json`:
+
+```json
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitReturns": true,
+    "noImplicitOverride": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"],
+  "exclude": ["node_modules"]
+}
+```
+
+### Step 6: Set Up Testing (if selected)
+
+**6.1 Install Dependencies**
+
+```bash
+npm install -D jest jest-expo @testing-library/react-native @testing-library/jest-native @types/jest
+```
+
+**6.2 Create `jest.config.js`**
+
+```javascript
+module.exports = {
+  preset: 'jest-expo',
+  setupFilesAfterEnv: ['<rootDir>/__tests__/setup.ts'],
+  transformIgnorePatterns: [
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)',
+  ],
+  collectCoverageFrom: [
+    '**/*.{ts,tsx}',
+    '!**/coverage/**',
+    '!**/node_modules/**',
+    '!**/babel.config.js',
+    '!**/jest.config.js',
+    '!**/__tests__/**',
+  ],
+  coverageThreshold: {
+    global: {
+      lines: 80,
+      functions: 80,
+      branches: 80,
+      statements: 80,
+    },
+  },
+};
+```
+
+**6.3 Create Test Setup**
+
+`__tests__/setup.ts`:
+
+```typescript
+import '@testing-library/jest-native/extend-expect';
+
+// Mock Expo modules
+jest.mock('expo-font');
+jest.mock('expo-asset');
+
+// Silence console warnings in tests
+global.console = {
+  ...console,
+  warn: jest.fn(),
+  error: jest.fn(),
+};
+```
+
+**6.4 Create Example Test**
+
+`__tests__/App.test.tsx`:
+
+```typescript
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import Home from '../app/index';
+
+describe('Home Screen', () => {
+  it('should render welcome message when app loads', () => {
+    render(<Home />);
+
+    // Testing Trophy approach: Test user-visible behavior
+    expect(screen.getByText(/welcome to/i)).toBeTruthy();
+  });
+
+  it('should display instructions for getting started', () => {
+    render(<Home />);
+
+    expect(screen.getByText(/edit app\/index.tsx/i)).toBeTruthy();
+  });
+});
+```
+
+**6.5 Update package.json Scripts**
+
+```json
+{
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest --passWithNoTests",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint . --ext .ts,.tsx",
+    "type-check": "tsc --noEmit"
+  }
+}
+```
+
+### Step 7: Configure Code Quality Tools
+
+**7.1 Set Up ESLint**
+
+```bash
+npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-native
+```
+
+Create `.eslintrc.js`:
+
+```javascript
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-native/all',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react', 'react-native'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  env: {
+    'react-native/react-native': true,
+  },
+  rules: {
+    // Connor's standards
+    'no-console': 'warn',
+    'no-var': 'error',
+    'eqeqeq': ['error', 'always'],
+    'prefer-const': 'error',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { argsIgnorePattern: '^_' },
+    ],
+    '@typescript-eslint/no-explicit-any': 'error',
+    'react/react-in-jsx-scope': 'off', // Not needed in React Native
+    'react-native/no-inline-styles': 'warn',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};
+```
+
+**7.2 Add Prettier**
+
+Create `.prettierrc`:
+
+```json
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false
+}
+```
+
+Install Prettier:
+
+```bash
+npm install -D prettier eslint-config-prettier
+```
+
+**7.3 Set Up Husky + lint-staged**
+
+```bash
+npx husky-init && npm install
+npm install -D lint-staged
+```
+
+Update `.husky/pre-commit`:
+
+```bash
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
+```
+
+Create `.lintstagedrc.js`:
+
+```javascript
+module.exports = {
+  '*.{ts,tsx}': [
+    'eslint --fix',
+    'prettier --write',
+    () => 'tsc --noEmit',
+    'jest --bail --findRelatedTests --passWithNoTests',
+  ],
+  '*.{json,md}': ['prettier --write'],
+};
+```
+
+### Step 8: Optional EAS Configuration (if selected)
+
+```bash
+# Install EAS CLI globally
+npm install -g eas-cli
+
+# Login to Expo
+eas login
+
+# Configure EAS Build
+eas build:configure
+```
+
+This creates `eas.json`:
+
+```json
+{
+  "cli": {
+    "version": ">= 5.9.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      }
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}
+```
+
+### Step 9: Create Project Documentation
+
+**Update README.md**:
+
+```markdown
+# {project-name}
+
+Cross-platform mobile application built with Expo and React Native.
+
+## Features
+
+- 📱 React Native (iOS + Android from single codebase)
+- ⚡ Expo SDK 50+ (managed workflow)
+- 🧭 Expo Router (file-based navigation)
+- 🔷 TypeScript (strict mode)
+- 🧪 Testing Trophy approach (Jest + RN Testing Library)
+- ✅ 80% test coverage threshold
+- 🎨 ESLint + Prettier
+- 🪝 Husky pre-commit hooks
+- 🚀 EAS Build & Submit (optional)
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- npm 9+
+- iOS Simulator (Mac only) or Android Emulator
+- Expo Go app on physical device (optional)
+
+### Installation
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### Development
+
+\`\`\`bash
+npm start
+\`\`\`
+
+This opens the Expo Dev Server. From there:
+
+- Press **i** to open iOS simulator
+- Press **a** to open Android emulator
+- Scan QR code with Expo Go app on your phone
+
+Or run directly:
+
+\`\`\`bash
+npm run ios       # iOS simulator
+npm run android   # Android emulator
+npm run web       # Web browser
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+app/                        # Expo Router (file-based routing)
+  ├── _layout.tsx           # Root layout
+  ├── index.tsx             # Home screen
+  └── (tabs)/               # Tab navigation (if using)
+components/                 # Reusable components
+  ├── ui/                   # UI components
+  └── features/             # Feature components
+__tests__/                  # Test files
+  ├── setup.ts              # Test configuration
+  └── App.test.tsx          # Example test
+assets/                     # Images, fonts, etc.
+  ├── icon.png
+  ├── splash.png
+  └── adaptive-icon.png
+\`\`\`
+
+## Available Commands
+
+### Development
+- \`npm start\` - Start Expo dev server
+- \`npm run ios\` - Run on iOS simulator
+- \`npm run android\` - Run on Android emulator
+- \`npm run web\` - Run in web browser
+
+### Code Quality
+- \`npm run lint\` - Lint code with ESLint
+- \`npm run type-check\` - Check TypeScript types
+
+### Testing
+- \`npm test\` - Run all tests
+- \`npm run test:watch\` - Run tests in watch mode
+- \`npm run test:coverage\` - Run tests with coverage report
+
+### Build & Deploy (if EAS configured)
+- \`eas build --platform ios\` - Build for iOS
+- \`eas build --platform android\` - Build for Android
+- \`eas build --platform all\` - Build for both platforms
+- \`eas submit --platform ios\` - Submit to App Store
+- \`eas submit --platform android\` - Submit to Play Store
+
+## Testing Strategy
+
+This project follows the **Testing Trophy** approach:
+
+- **70% Integration Tests**: User workflows and component interactions
+- **20% Unit Tests**: Complex business logic
+- **10% E2E Tests**: Critical user journeys (use Detox or Maestro)
+
+### Writing Tests
+
+Test file naming: \`[component-name].test.tsx\`
+
+\`\`\`typescript
+import { render, screen, fireEvent } from '@testing-library/react-native';
+
+describe('LoginScreen', () => {
+  it('should submit form when user enters valid credentials', () => {
+    const onSubmit = jest.fn();
+    render(<LoginScreen onSubmit={onSubmit} />);
+
+    fireEvent.changeText(screen.getByPlaceholderText('Email'), 'test@example.com');
+    fireEvent.changeText(screen.getByPlaceholderText('Password'), 'password123');
+    fireEvent.press(screen.getByText('Login'));
+
+    expect(onSubmit).toHaveBeenCalled();
+  });
+});
+\`\`\`
+
+## Navigation with Expo Router
+
+File-based routing like Next.js:
+
+\`\`\`
+app/
+  ├── _layout.tsx          → Root layout
+  ├── index.tsx            → / (home)
+  ├── about.tsx            → /about
+  ├── users/
+  │   ├── [id].tsx         → /users/:id (dynamic)
+  │   └── index.tsx        → /users
+  └── (tabs)/              → Tab navigation group
+      ├── _layout.tsx
+      ├── home.tsx
+      └── profile.tsx
+\`\`\`
+
+Navigate programmatically:
+
+\`\`\`typescript
+import { router } from 'expo-router';
+
+router.push('/about');
+router.replace('/login');
+router.back();
+\`\`\`
+
+## Environment Variables
+
+Create \`.env\`:
+
+\`\`\`env
+API_URL=https://api.example.com
+\`\`\`
+
+Install and configure:
+
+\`\`\`bash
+npm install react-native-dotenv
+\`\`\`
+
+## Building for Production
+
+### With EAS (Recommended)
+
+\`\`\`bash
+# Build for iOS (requires Apple Developer account)
+eas build --platform ios --profile production
+
+# Build for Android (requires Google Play Console account)
+eas build --platform android --profile production
+
+# Submit to stores
+eas submit --platform ios
+eas submit --platform android
+\`\`\`
+
+### Local Builds
+
+\`\`\`bash
+# iOS (requires Mac + Xcode)
+npx expo run:ios --configuration Release
+
+# Android
+npx expo run:android --variant release
+\`\`\`
+
+## Over-the-Air (OTA) Updates
+
+Expo allows instant updates without app store review:
+
+\`\`\`bash
+# Publish update to production
+eas update --branch production --message "Bug fixes"
+
+# Users get update on next app restart
+\`\`\`
+
+## Deployment Checklist
+
+- [ ] Update \`version\` in app.json
+- [ ] Test on physical iOS device
+- [ ] Test on physical Android device
+- [ ] Run full test suite: \`npm run test:coverage\`
+- [ ] Check bundle size: \`npx expo export\`
+- [ ] Update app screenshots
+- [ ] Build for production: \`eas build --platform all\`
+- [ ] Test production builds
+- [ ] Submit to stores: \`eas submit --platform all\`
+
+## Common Issues
+
+### Metro bundler cache issues
+\`\`\`bash
+npm start -- --clear
+\`\`\`
+
+### iOS simulator not opening
+\`\`\`bash
+sudo xcode-select -s /Applications/Xcode.app
+\`\`\`
+
+### Android emulator issues
+- Ensure Android Studio is installed
+- Check emulator is running: \`adb devices\`
+
+## Resources
+
+- [Expo Documentation](https://docs.expo.dev)
+- [Expo Router](https://docs.expo.dev/router/introduction/)
+- [React Native Testing Library](https://callstack.github.io/react-native-testing-library/)
+- [EAS Build](https://docs.expo.dev/build/introduction/)
+
+## License
+
+MIT
+
+---
+
+Built with [react-project-scaffolder](https://github.com/yourusername/react-project-scaffolder)
+```
+
+### Step 10: Initialize Git
+
+```bash
+git init
+git add .
+git commit -m "feat: initial Expo + React Native setup with testing
+
+- Expo SDK 50+ with managed workflow
+- Expo Router for navigation
+- TypeScript strict mode
+- Jest + React Native Testing Library (80% coverage)
+- ESLint + Prettier + Husky
+- EAS configuration (optional)
+- Comprehensive documentation"
+```
+
+Ensure `.gitignore` includes:
+
+```
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Environment
+.env
+.env.local
+
+# Testing
+coverage/
+```
+
+### Step 11: Verify Setup
+
+```bash
+# Verify all files
+ls -la
+
+# Check Expo installation
+npx expo --version
+
+# Verify tests run
+npm test
+
+# Start Expo dev server (verify it works)
+npm start
+```
+
+### Step 12: Provide User Instructions
+
+**Display to user**:
+
+```markdown
+✅ Mobile project "{project-name}" created successfully!
+
+📁 Location: ./{project-name}
+
+🚀 Next steps:
+
+  1. cd {project-name}
+  2. npm install
+  3. npm start
+
+Then:
+  - Press 'i' for iOS simulator
+  - Press 'a' for Android emulator
+  - Scan QR code with Expo Go app on your phone
+
+📚 What you have:
+  ✓ Expo SDK 50+ (managed workflow)
+  ✓ Expo Router (file-based navigation)
+  ✓ TypeScript strict mode
+  ✓ Jest + React Native Testing Library (80% coverage)
+  ✓ ESLint + Prettier + Husky
+  ✓ EAS Build configuration (if selected)
+  ✓ OTA update support
+  ✓ Comprehensive documentation
+
+🧪 Test your setup:
+  npm test           # Run all tests
+  npm run lint       # Check code quality
+  npm run type-check # Verify types
+
+📱 Running on devices:
+  - Install "Expo Go" app from App Store / Play Store
+  - Scan QR code from terminal
+  - See changes instantly with Fast Refresh
+
+🔄 Pre-commit hooks active:
+  - Linting (auto-fix)
+  - Formatting (auto-format)
+  - Type checking
+  - Related tests run automatically
+
+📦 Build for production (if EAS configured):
+  eas build --platform all
+  eas submit --platform all
+
+💡 Tips:
+  - Use Expo Router for navigation (like Next.js)
+  - Test on physical devices early and often
+  - Use EAS for cloud builds (no Xcode/Android Studio needed)
+  - OTA updates allow instant bug fixes without app store review
+
+📖 Documentation:
+  - README.md - Complete guide with all commands
+  - Expo docs: https://docs.expo.dev
+
+🎯 Production-ready mobile development!
+```
+
+---
+
+## File Structure Output
+
+```
+{project-name}/
+├── .husky/
+│   └── pre-commit              # Pre-commit hooks
+├── app/
+│   ├── _layout.tsx             # Root layout (Expo Router)
+│   └── index.tsx               # Home screen
+├── assets/
+│   ├── icon.png                # App icon
+│   ├── splash.png              # Splash screen
+│   └── adaptive-icon.png       # Android adaptive icon
+├── components/
+│   ├── ui/                     # UI components
+│   └── features/               # Feature components
+├── __tests__/
+│   ├── setup.ts                # Test setup
+│   └── App.test.tsx            # Example test
+├── .eslintrc.js                # ESLint config
+├── .prettierrc                 # Prettier config
+├── .gitignore                  # Git ignore
+├── .lintstagedrc.js            # lint-staged config
+├── jest.config.js              # Jest config
+├── tsconfig.json               # TypeScript config
+├── app.json                    # Expo config
+├── package.json                # Dependencies
+├── eas.json                    # EAS Build config (if configured)
+└── README.md                   # Documentation
+```
+
+---
+
+## Success Criteria
+
+- [ ] Expo project scaffolded successfully
+- [ ] Expo Router configured (if selected)
+- [ ] TypeScript strict mode enabled
+- [ ] Jest + RN Testing Library configured
+- [ ] Example test passes
+- [ ] ESLint + Prettier configured
+- [ ] Husky pre-commit hooks working
+- [ ] EAS configured (if selected)
+- [ ] README generated
+- [ ] Git initialized with commit
+- [ ] `npm start` opens Expo Dev Server
+- [ ] QR code displays for device testing
+- [ ] Setup time < 90 seconds (excluding npm install)
+
+---
+
+## Troubleshooting
+
+**Issue**: Expo CLI not found
+**Solution**: Use npx: `npx expo start`
+
+**Issue**: Metro bundler cache issues
+**Solution**: Clear cache: `npm start -- --clear`
+
+**Issue**: Tests fail with React Native module errors
+**Solution**: Check jest.config.js transformIgnorePatterns
+
+**Issue**: iOS simulator won't open
+**Solution**: Set Xcode path: `sudo xcode-select -s /Applications/Xcode.app`
+
+**Issue**: Android emulator not detected
+**Solution**: Check ADB: `adb devices`, ensure emulator is running
+
+**Issue**: EAS build fails
+**Solution**: Check credentials and app config in app.json
+
+---
+
+## Why This Tech Stack?
+
+**Expo over bare React Native**:
+- Faster development (managed workflow)
+- Built-in access to native APIs
+- OTA updates (instant bug fixes)
+- Used by Instagram, Discord, Shopify
+- Easier for beginners, powerful for pros
+
+**Expo Router over React Navigation**:
+- File-based routing (like Next.js)
+- Better TypeScript support
+- Deep linking built-in
+- Less boilerplate
+
+**EAS Build over local builds**:
+- No need for Xcode/Android Studio
+- Cloud-based builds
+- Consistent environments
+- Easy team collaboration
+
+---
+
+**Remember**: This mode delivers native mobile performance with React developer experience. Production-ready with Connor's standards applied to mobile development.

skills/devops/react-project-scaffolder/modes/mobile.md

@@ -0,0 +1,113 @@
+# Mode 3: Mobile (Expo + React Native)
+
+**Purpose**: Cross-platform mobile apps with production-ready tooling
+
+**Setup Time**: ~60 seconds after `npm install`
+
+## Tech Stack
+- Expo SDK 50+ (managed workflow)
+- React Native (latest stable)
+- TypeScript (strict mode)
+- Jest + React Native Testing Library
+- ESLint + Prettier + Husky
+- EAS Build (optional)
+
+**Configuration Strategy**: 2-3 key questions, smart defaults
+
+## Configuration Questions
+
+1. "Include testing setup?" (default: yes)
+2. "Include CI/CD for EAS?" (default: no)
+3. "Navigation library?" (default: Expo Router)
+
+## Workflow Steps
+
+### 1. Scaffold with Expo
+```bash
+npx create-expo-app {project-name} --template expo-template-blank-typescript
+cd {project-name}
+```
+
+### 2. Apply TypeScript Strict Mode
+- Update tsconfig.json with strict settings
+- Configure path aliases for React Native
+- Enable all type checking flags
+
+### 3. Set Up Testing (if selected)
+- Install Jest, React Native Testing Library
+- Create jest.config.js for React Native
+- Add example test
+- Configure 80% coverage threshold
+- Add test scripts:
+  ```json
+  "test": "jest --maxWorkers=2",
+  "test:watch": "jest --watch",
+  "test:coverage": "jest --coverage"
+  ```
+
+### 4. Configure Linting & Formatting
+- Install ESLint with React Native rules
+- Add Prettier configuration
+- Set up Husky + lint-staged
+- Configure pre-commit hooks
+
+### 5. Set Up Navigation (Expo Router)
+```bash
+npx expo install expo-router
+```
+- Create app/ directory structure
+- Set up root layout
+- Add example screens
+
+### 6. Initialize Git
+```bash
+git init
+git add .
+git commit -m "feat: initial Expo + React Native setup"
+```
+
+### 7. Provide Next Steps
+
+```markdown
+## Your Mobile Project is Ready!
+
+Start development:
+  cd {project-name}
+  npm install
+  npx expo start
+
+Project structure:
+  app/
+    ├── _layout.tsx       # Root layout
+    ├── index.tsx         # Home screen
+    └── [screen].tsx      # Dynamic routes
+  components/             # Reusable components
+  __tests__/              # Test files
+
+Available commands:
+  npx expo start         # Start development
+  npx expo start --ios   # iOS simulator
+  npx expo start --android  # Android emulator
+  npm run test           # Run tests
+  npm run lint           # Lint code
+
+Configured features:
+  ✓ TypeScript strict mode
+  ✓ Expo Router navigation
+  ✓ Jest + RNTL testing
+  ✓ ESLint + Prettier
+  ✓ 80% coverage threshold
+
+Next steps:
+  1. Run on device: npx expo start --tunnel
+  2. Add more screens in app/
+  3. Configure app.json for store submission
+  4. Set up EAS Build for production
+```
+
+## When to Use
+
+- Cross-platform iOS/Android apps
+- Quick mobile prototypes
+- Apps using Expo managed workflow
+- Teams familiar with React wanting mobile

skills/devops/react-project-scaffolder/modes/sandbox-mode.md

@@ -0,0 +1,408 @@
+# Sandbox Mode - Vite + React + TypeScript
+
+## Mode Overview
+
+**Purpose**: Lightning-fast React setup for experiments, prototyping, and learning
+
+**Target Users**:
+- Developers testing React concepts
+- Quick proof-of-concept implementations
+- Learning React fundamentals
+- Isolating bug reproductions
+
+**Setup Time**: ~15 seconds (after npm install)
+
+**Philosophy**: Minimal configuration, maximum speed. Zero questions asked.
+
+---
+
+## Tech Stack
+
+```yaml
+Core:
+  - Vite 5+ (fastest dev server, HMR in <50ms)
+  - React 18+
+  - TypeScript 5+ (strict mode)
+
+Development:
+  - ESLint (minimal rules, quick feedback)
+  - Prettier (automatic formatting)
+
+Excluded (intentionally):
+  - Testing frameworks (add if needed)
+  - Pre-commit hooks (keep it light)
+  - CI/CD (not needed for sandboxes)
+  - Additional tooling (KISS principle)
+```
+
+---
+
+## Workflow
+
+### Step 1: Validate Prerequisites
+
+```bash
+# Check Node.js version (>= 18)
+node --version
+
+# Check npm version (>= 9)
+npm --version
+```
+
+**If validation fails**: Show clear error with upgrade instructions
+
+### Step 2: Get Project Name
+
+**Ask user**: "What should I name your sandbox project?"
+
+**Validation**:
+- No spaces (suggest kebab-case)
+- Valid directory name
+- Not already existing
+- Length 3-50 characters
+
+**Auto-suggest**: If empty, suggest `react-sandbox-{timestamp}`
+
+### Step 3: Scaffold with Vite
+
+```bash
+npm create vite@latest {project-name} -- --template react-ts
+```
+
+**Why Vite?**
+- Fastest dev server (instant HMR)
+- Native ES modules (no bundling in dev)
+- Minimal config out of box
+- Production builds with Rollup
+
+### Step 4: Configure TypeScript (Strict Mode)
+
+Update `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Connor's Strict Mode Settings */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitReturns": true,
+    "noImplicitOverride": true,
+
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+```
+
+### Step 5: Set Up Minimal Linting
+
+Create `.eslintrc.cjs`:
+
+```javascript
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    // Connor's standards
+    'no-console': 'warn',
+    'no-var': 'error',
+    'eqeqeq': ['error', 'always'],
+  },
+}
+```
+
+Create `.prettierrc`:
+
+```json
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}
+```
+
+### Step 6: Update package.json Scripts
+
+Add to `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "preview": "vite preview"
+  }
+}
+```
+
+### Step 7: Initialize Git
+
+```bash
+cd {project-name}
+git init
+git add .
+git commit -m "feat: initial Vite + React + TypeScript sandbox setup"
+```
+
+Ensure `.gitignore` includes:
+```
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+dist-ssr/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+```
+
+### Step 8: Generate README
+
+Create `README.md`:
+
+```markdown
+# {project-name}
+
+Quick React sandbox created with Vite + TypeScript.
+
+## Getting Started
+
+Install dependencies:
+\`\`\`bash
+npm install
+\`\`\`
+
+Start development server:
+\`\`\`bash
+npm run dev
+\`\`\`
+
+Visit http://localhost:5173 in your browser.
+
+## Project Structure
+
+\`\`\`
+src/
+  ├── App.tsx          # Main React component
+  ├── App.css          # Component styles
+  ├── main.tsx         # Application entry point
+  ├── index.css        # Global styles
+  └── vite-env.d.ts    # Vite type definitions
+\`\`\`
+
+## Available Commands
+
+- \`npm run dev\` - Start development server with HMR
+- \`npm run build\` - Build for production
+- \`npm run preview\` - Preview production build locally
+- \`npm run lint\` - Check code quality
+- \`npm run format\` - Format code with Prettier
+
+## Tech Stack
+
+- ⚡ Vite - Next generation frontend tooling
+- ⚛️ React 18 - UI library
+- 🔷 TypeScript - Type safety
+- 🎨 ESLint + Prettier - Code quality
+
+## Next Steps
+
+This is a minimal sandbox. Add what you need:
+
+- **Testing**: \`npm install -D vitest @testing-library/react jsdom\`
+- **Routing**: \`npm install react-router-dom\`
+- **State**: \`npm install zustand\` or \`npm install @tanstack/react-query\`
+- **Styling**: \`npm install -D tailwindcss\`
+
+## Configuration
+
+- TypeScript strict mode is enabled
+- ESLint checks for common issues
+- Prettier formats on save (if editor configured)
+
+---
+
+Built with [react-project-scaffolder](https://github.com/yourusername/react-project-scaffolder)
+```
+
+### Step 9: Verify Setup
+
+```bash
+# Check all files were created
+ls -la
+
+# Verify package.json is valid
+cat package.json | grep "vite"
+
+# Check TypeScript config
+cat tsconfig.json | grep "strict"
+```
+
+### Step 10: Provide User Instructions
+
+**Display to user**:
+
+```markdown
+✅ Sandbox project "{project-name}" created successfully!
+
+📁 Location: ./{project-name}
+
+🚀 Next steps:
+
+  1. cd {project-name}
+  2. npm install
+  3. npm run dev
+
+Your dev server will start at http://localhost:5173
+
+📚 What you have:
+  ✓ Vite + React 18 + TypeScript (strict mode)
+  ✓ ESLint + Prettier configured
+  ✓ Git initialized with first commit
+  ✓ Minimal dependencies for fast experiments
+
+⚡ Lightning fast HMR - changes reflect instantly!
+
+💡 Tips:
+  - Edit src/App.tsx to start building
+  - Add dependencies as needed
+  - Run 'npm run lint' to check code quality
+  - Run 'npm run format' to auto-format
+
+🎯 This is a sandbox - keep it simple and experiment freely!
+```
+
+---
+
+## File Structure Output
+
+```
+{project-name}/
+├── .git/                   # Git repository
+├── .gitignore              # Git ignore rules
+├── .eslintrc.cjs           # ESLint configuration
+├── .prettierrc             # Prettier configuration
+├── index.html              # HTML entry point
+├── package.json            # Dependencies and scripts
+├── tsconfig.json           # TypeScript config (strict)
+├── tsconfig.node.json      # TypeScript for Node
+├── vite.config.ts          # Vite configuration
+├── README.md               # Project documentation
+├── public/                 # Static assets
+└── src/
+    ├── App.tsx             # Main component
+    ├── App.css             # Component styles
+    ├── main.tsx            # Entry point
+    ├── index.css           # Global styles
+    ├── vite-env.d.ts       # Vite types
+    └── assets/             # Images, etc.
+```
+
+---
+
+## Success Criteria
+
+- [ ] Vite project scaffolded successfully
+- [ ] TypeScript strict mode enabled
+- [ ] ESLint + Prettier configured
+- [ ] Git initialized with commit
+- [ ] README generated
+- [ ] All files present in expected locations
+- [ ] No errors in console
+- [ ] Setup time < 20 seconds (excluding npm install)
+
+---
+
+## Troubleshooting
+
+**Issue**: npm create vite fails
+**Solution**: Update npm to latest version: `npm install -g npm@latest`
+
+**Issue**: TypeScript errors on import
+**Solution**: Check tsconfig.json has correct paths configuration
+
+**Issue**: ESLint not working
+**Solution**: Ensure .eslintrc.cjs is in root directory
+
+**Issue**: Port 5173 already in use
+**Solution**: Kill process on port or Vite will auto-increment to 5174
+
+---
+
+## Why This Tech Stack?
+
+**Vite over Create React App**:
+- 10-100x faster dev server startup
+- Instant HMR (< 50ms)
+- CRA is no longer maintained by React team
+- Smaller bundle sizes
+- Better TypeScript experience
+
+**TypeScript over JavaScript**:
+- Catch errors before runtime
+- Better IDE autocomplete
+- Connor's standard (required)
+- Minimal overhead in sandbox
+
+**ESLint + Prettier**:
+- Consistent code style
+- Catch common mistakes
+- Quick feedback loop
+- Industry standard
+
+---
+
+**Remember**: This mode prioritizes speed over features. Get users coding in <15 seconds!

skills/devops/react-project-scaffolder/modes/sandbox.md

@@ -0,0 +1,68 @@
+# 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
+```bash
+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
+```bash
+git init
+git add .
+git commit -m "feat: initial Vite + React + TypeScript setup"
+```
+
+### 5. Provide Next Steps
+
+```markdown
+## 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