Initial commit
This commit is contained in:
Zhongwei Li
14
skills/devops/react-project-scaffolder/CHANGELOG.md
Normal file
14
skills/devops/react-project-scaffolder/CHANGELOG.md
Normal file
@@ -0,0 +1,14 @@
|
||||
# Changelog
|
||||
|
||||
## 0.2.0
|
||||
|
||||
- Refactored to Anthropic progressive disclosure pattern
|
||||
- Updated description with "Use PROACTIVELY when..." format
|
||||
- Removed version/author/category from frontmatter
|
||||
|
||||
## 0.1.0
|
||||
|
||||
- Initial release with three project modes
|
||||
- Sandbox (Vite), Enterprise (Next.js), Mobile (Expo)
|
||||
- TypeScript strict mode and 80% coverage threshold
|
||||
- Testing Trophy approach with Husky pre-commit hooks
|
||||
314
skills/devops/react-project-scaffolder/README.md
Normal file
314
skills/devops/react-project-scaffolder/README.md
Normal file
@@ -0,0 +1,314 @@
|
||||
# React Project Scaffolder
|
||||
|
||||
Automated React project scaffolding with three production-ready modes: sandbox, enterprise, and mobile.
|
||||
|
||||
## Overview
|
||||
|
||||
This skill helps you quickly spin up React projects with the right tooling for your use case. Instead of manually configuring TypeScript, testing, linting, and other tools, this skill provides opinionated, production-ready setups that follow industry standards and Connor's development philosophy.
|
||||
|
||||
## Three Modes
|
||||
|
||||
### 1. Sandbox Mode (Vite + React + TypeScript)
|
||||
**Best for**: Quick experiments, prototyping, learning
|
||||
|
||||
**Setup time**: ~15 seconds
|
||||
|
||||
**What you get**:
|
||||
- ⚡ Vite (fastest dev server)
|
||||
- ⚛️ React 18+
|
||||
- 🔷 TypeScript (strict mode)
|
||||
- 🎨 ESLint + Prettier (minimal config)
|
||||
- 📦 Minimal dependencies
|
||||
|
||||
**Trigger phrases**:
|
||||
- "create a React sandbox"
|
||||
- "quick React setup for testing"
|
||||
- "React experiment project"
|
||||
|
||||
### 2. Enterprise Mode (Next.js + Full Tooling)
|
||||
**Best for**: Production web apps, SaaS products, enterprise dashboards
|
||||
|
||||
**Setup time**: ~60 seconds
|
||||
|
||||
**What you get**:
|
||||
- ⚡ Next.js 14+ (App Router)
|
||||
- ⚛️ React 18+
|
||||
- 🔷 TypeScript (strict mode)
|
||||
- 🧪 Vitest + React Testing Library (80% coverage)
|
||||
- 🎨 ESLint + Prettier + Husky
|
||||
- 🔄 GitHub Actions CI/CD
|
||||
- 📚 Comprehensive documentation
|
||||
- 🏆 Testing Trophy approach
|
||||
|
||||
**Trigger phrases**:
|
||||
- "create an enterprise React project"
|
||||
- "production React app with testing"
|
||||
- "Next.js project with full tooling"
|
||||
|
||||
### 3. Mobile Mode (Expo + React Native)
|
||||
**Best for**: Cross-platform mobile apps (iOS + Android)
|
||||
|
||||
**Setup time**: ~60 seconds
|
||||
|
||||
**What you get**:
|
||||
- 📱 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 & Submit (optional)
|
||||
- 📚 Comprehensive documentation
|
||||
|
||||
**Trigger phrases**:
|
||||
- "create a mobile React project"
|
||||
- "React Native project with Expo"
|
||||
- "cross-platform mobile app"
|
||||
|
||||
## Quick Start
|
||||
|
||||
Simply ask Claude Code to create a React project:
|
||||
|
||||
```
|
||||
You: "Create a React sandbox for testing"
|
||||
```
|
||||
|
||||
Claude will:
|
||||
1. Detect the mode (sandbox, enterprise, or mobile)
|
||||
2. Validate your environment (Node.js, npm)
|
||||
3. Ask essential configuration questions (if needed)
|
||||
4. Scaffold the complete project
|
||||
5. Provide next steps and usage instructions
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Example 1: Quick Sandbox
|
||||
```
|
||||
You: "I need a quick React sandbox to test a feature"
|
||||
|
||||
Claude: "I'll create a Vite + React + TypeScript sandbox for you..."
|
||||
[15 seconds later]
|
||||
Claude: "✅ Done! Run: cd react-sandbox && npm install && npm run dev"
|
||||
```
|
||||
|
||||
### Example 2: Enterprise Project
|
||||
```
|
||||
You: "Create an enterprise React project called my-dashboard"
|
||||
|
||||
Claude: "I'll set up Next.js with full tooling. Quick questions:
|
||||
- Include testing? (yes)
|
||||
- Include CI/CD? (yes)"
|
||||
|
||||
[60 seconds later]
|
||||
Claude: "✅ Done! Your production-ready Next.js project is ready with:
|
||||
- TypeScript strict mode
|
||||
- Vitest + RTL (80% coverage)
|
||||
- ESLint + Prettier + Husky
|
||||
- GitHub Actions CI/CD"
|
||||
```
|
||||
|
||||
### Example 3: Mobile App
|
||||
```
|
||||
You: "Build a mobile React app with navigation"
|
||||
|
||||
Claude: "I'll create an Expo project with Expo Router. Quick questions:
|
||||
- Include Expo Router for navigation? (yes)
|
||||
- Include testing? (yes)
|
||||
- Set up EAS for cloud builds? (no)"
|
||||
|
||||
[60 seconds later]
|
||||
Claude: "✅ Done! Your Expo project is ready.
|
||||
Run: cd my-app && npm install && npm start
|
||||
Then scan the QR code with Expo Go on your phone!"
|
||||
```
|
||||
|
||||
## What Makes This Different?
|
||||
|
||||
### Connor's Standards Baked In
|
||||
- TypeScript strict mode (all flags enabled)
|
||||
- Testing Trophy approach (70% integration, 20% unit, 10% e2e)
|
||||
- 80% test coverage threshold
|
||||
- No `console.log` in production code
|
||||
- Pre-commit hooks for quality
|
||||
- Conventional commits
|
||||
|
||||
### Industry Best Practices
|
||||
- **Vite** for sandboxes (fastest dev experience)
|
||||
- **Next.js** for enterprise (used by Netflix, TikTok)
|
||||
- **Expo** for mobile (used by Instagram, Discord)
|
||||
- Modern testing with Vitest/Jest + RTL
|
||||
- Automated CI/CD with GitHub Actions
|
||||
|
||||
### Smart Automation
|
||||
- Minimal questions (smart defaults)
|
||||
- Fast setup (sandbox in 15s, others in 60s)
|
||||
- Production-ready from day one
|
||||
- Comprehensive documentation generated
|
||||
- Git initialized with proper commits
|
||||
|
||||
## Project Structure
|
||||
|
||||
Each mode creates a well-organized project:
|
||||
|
||||
### Sandbox Structure
|
||||
```
|
||||
project-name/
|
||||
├── src/
|
||||
│ ├── App.tsx
|
||||
│ ├── main.tsx
|
||||
│ └── index.css
|
||||
├── package.json
|
||||
├── tsconfig.json (strict mode)
|
||||
├── vite.config.ts
|
||||
├── .eslintrc.cjs
|
||||
└── README.md
|
||||
```
|
||||
|
||||
### Enterprise Structure
|
||||
```
|
||||
project-name/
|
||||
├── src/
|
||||
│ ├── app/ # Next.js App Router
|
||||
│ ├── components/ # React components
|
||||
│ ├── lib/ # Utilities
|
||||
│ └── __tests__/ # Test files
|
||||
├── .github/workflows/ # CI/CD
|
||||
├── .husky/ # Pre-commit hooks
|
||||
├── package.json
|
||||
├── tsconfig.json (strict mode)
|
||||
├── vitest.config.ts
|
||||
└── README.md
|
||||
```
|
||||
|
||||
### Mobile Structure
|
||||
```
|
||||
project-name/
|
||||
├── app/ # Expo Router
|
||||
├── components/ # React components
|
||||
├── assets/ # Images, fonts
|
||||
├── __tests__/ # Test files
|
||||
├── package.json
|
||||
├── tsconfig.json (strict mode)
|
||||
├── app.json
|
||||
└── README.md
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
The skill follows these conventions:
|
||||
|
||||
### TypeScript
|
||||
- Strict mode enabled (all flags)
|
||||
- Path aliases configured (`@/` for imports)
|
||||
- Explicit return types preferred
|
||||
- No `any` types allowed
|
||||
|
||||
### Testing
|
||||
- Testing Trophy approach
|
||||
- 80% coverage minimum
|
||||
- Semantic queries (getByRole > getByTestId)
|
||||
- Test naming: "should [behavior] when [condition]"
|
||||
|
||||
### Code Quality
|
||||
- ESLint with strict rules
|
||||
- Prettier with consistent formatting
|
||||
- Husky pre-commit hooks (enterprise/mobile)
|
||||
- Lint-staged (only changed files)
|
||||
|
||||
### Git
|
||||
- Conventional commits
|
||||
- Branch naming: feature/, bugfix/, chore/
|
||||
- Proper .gitignore for each mode
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- **Node.js**: 18.x or higher (20.x recommended)
|
||||
- **npm**: 9.x or higher (10.x recommended)
|
||||
- **git**: Latest version (optional but recommended)
|
||||
|
||||
For mobile mode:
|
||||
- **iOS**: macOS with Xcode (for simulator)
|
||||
- **Android**: Android Studio with emulator
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Environment validation fails
|
||||
Run the validation script manually:
|
||||
```bash
|
||||
~/.claude/skills/react-project-scaffolder/scripts/validate-environment.sh
|
||||
```
|
||||
|
||||
### Node.js version too old
|
||||
Update using nvm:
|
||||
```bash
|
||||
nvm install 18
|
||||
nvm use 18
|
||||
```
|
||||
|
||||
Or download from: https://nodejs.org/
|
||||
|
||||
### npm install fails
|
||||
Clear cache and retry:
|
||||
```bash
|
||||
npm cache clean --force
|
||||
npm install
|
||||
```
|
||||
|
||||
### Expo QR code won't scan (mobile)
|
||||
- Ensure phone is on same WiFi network
|
||||
- Install "Expo Go" app from App Store / Play Store
|
||||
- Try using tunnel mode: `npm start -- --tunnel`
|
||||
|
||||
## Examples
|
||||
|
||||
See the `examples/` directory for sample projects created with each mode:
|
||||
- `examples/sandbox-output/` - Sandbox project example
|
||||
- `examples/enterprise-output/` - Enterprise project example
|
||||
- `examples/mobile-output/` - Mobile project example
|
||||
|
||||
## Technical Details
|
||||
|
||||
### Mode Detection
|
||||
The skill uses natural language processing to detect which mode you want:
|
||||
- Keywords: "sandbox", "quick", "test" → Sandbox
|
||||
- Keywords: "enterprise", "production", "testing" → Enterprise
|
||||
- Keywords: "mobile", "native", "ios", "android" → Mobile
|
||||
|
||||
### Hybrid Approach
|
||||
- **Sandbox**: Fully automated (no questions)
|
||||
- **Enterprise/Mobile**: 2-3 key questions with smart defaults
|
||||
|
||||
### Templates + Scripts
|
||||
- Configuration files stored in `templates/`
|
||||
- Scaffolding logic in mode definitions (`modes/`)
|
||||
- Validation scripts in `scripts/`
|
||||
- Dependencies reference in `data/`
|
||||
|
||||
## Version History
|
||||
|
||||
See [CHANGELOG.md](CHANGELOG.md) for version history.
|
||||
|
||||
## Contributing
|
||||
|
||||
This skill is part of Connor's personal skill collection. If you find issues or have suggestions:
|
||||
1. Test the skill thoroughly
|
||||
2. Document the issue with examples
|
||||
3. Suggest improvements with reasoning
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
## Credits
|
||||
|
||||
Built by Connor using the skill-creator skill.
|
||||
|
||||
Inspired by:
|
||||
- Vite team (lightning-fast dev server)
|
||||
- Next.js team at Vercel (production-ready React)
|
||||
- Expo team (best mobile developer experience)
|
||||
- Kent C. Dodds (Testing Trophy methodology)
|
||||
- Connor's development standards (production-ready from day one)
|
||||
|
||||
---
|
||||
|
||||
**Ready to scaffold?** Just ask Claude Code to create a React project!
|
||||
128
skills/devops/react-project-scaffolder/SKILL.md
Normal file
128
skills/devops/react-project-scaffolder/SKILL.md
Normal file
@@ -0,0 +1,128 @@
|
||||
---
|
||||
name: react-project-scaffolder
|
||||
description: Use PROACTIVELY when creating new React projects requiring modern tooling and best practices. Provides three modes - sandbox (Vite + React for quick experiments), enterprise (Next.js with testing and CI/CD), and mobile (Expo + React Native). Enforces TypeScript strict mode, Testing Trophy approach, and 80% coverage. Not for non-React projects or modifying existing applications.
|
||||
---
|
||||
|
||||
# React Project Scaffolder
|
||||
|
||||
## Overview
|
||||
|
||||
This skill automates the creation of React projects with three distinct modes tailored to different use cases. Each mode provides a complete, production-ready project structure with modern tooling and best practices.
|
||||
|
||||
**Three Modes**:
|
||||
1. **Sandbox** - Vite + React + TypeScript (~15s setup)
|
||||
2. **Enterprise** - Next.js + Testing + CI/CD (~60s setup)
|
||||
3. **Mobile** - Expo + React Native (~60s setup)
|
||||
|
||||
All modes follow Connor's standards: TypeScript strict mode, Testing Trophy approach, 80% coverage, conventional commits.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
**Trigger Phrases**:
|
||||
- "create a React project"
|
||||
- "scaffold a new React app"
|
||||
- "set up a React sandbox"
|
||||
- "create an enterprise React project"
|
||||
- "build a mobile React app"
|
||||
|
||||
**Use Cases**:
|
||||
- Quick React experiments without framework overhead
|
||||
- Enterprise web applications with industry-standard tooling
|
||||
- Cross-platform mobile apps with React Native
|
||||
- Establishing consistent project structure across teams
|
||||
|
||||
**NOT for**:
|
||||
- Non-React projects (Vue, Angular, Svelte)
|
||||
- Backend-only projects
|
||||
- Modifying existing React projects
|
||||
- Ejected Expo projects (bare workflow)
|
||||
|
||||
## Response Style
|
||||
|
||||
- **Efficient**: Minimize questions, maximize automation
|
||||
- **Guided**: Clear mode selection with pros/cons
|
||||
- **Standards-driven**: Apply Connor's standards automatically
|
||||
- **Transparent**: Explain what's being set up and why
|
||||
|
||||
## Mode Selection
|
||||
|
||||
| User Request | Mode | Framework | Time |
|
||||
|--------------|------|-----------|------|
|
||||
| "quick React test" | Sandbox | Vite | ~15s |
|
||||
| "React sandbox" | Sandbox | Vite | ~15s |
|
||||
| "production React app" | Enterprise | Next.js | ~60s |
|
||||
| "enterprise React" | Enterprise | Next.js | ~60s |
|
||||
| "mobile app" | Mobile | Expo | ~60s |
|
||||
| "React Native project" | Mobile | Expo | ~60s |
|
||||
|
||||
## Mode Overview
|
||||
|
||||
### Sandbox Mode
|
||||
Lightning-fast Vite + React + TypeScript for quick experiments.
|
||||
→ **Details**: `modes/sandbox.md`
|
||||
|
||||
### Enterprise Mode
|
||||
Production-ready Next.js with testing, linting, and CI/CD.
|
||||
→ **Details**: `modes/enterprise.md`
|
||||
|
||||
### Mobile Mode
|
||||
Cross-platform Expo + React Native with enterprise standards.
|
||||
→ **Details**: `modes/mobile.md`
|
||||
|
||||
## Workflow
|
||||
|
||||
### Phase 1: Mode Selection & Prerequisites
|
||||
|
||||
1. Detect mode from user request
|
||||
2. If ambiguous, ask which type:
|
||||
- Sandbox: Quick experiments, minimal setup
|
||||
- Enterprise: Production web apps, full tooling
|
||||
- Mobile: Cross-platform iOS/Android apps
|
||||
|
||||
3. Validate prerequisites:
|
||||
```bash
|
||||
node --version # >= 18.x
|
||||
npm --version # >= 9.x
|
||||
```
|
||||
|
||||
4. Get project name and validate:
|
||||
- Valid directory name
|
||||
- No conflicts with existing directories
|
||||
|
||||
### Phase 2: Mode-Specific Setup
|
||||
|
||||
Execute the selected mode's workflow (see mode files for details).
|
||||
|
||||
## Important Reminders
|
||||
|
||||
- **Sandbox is for experiments**: Don't add testing/CI to sandbox mode
|
||||
- **Enterprise defaults to yes**: Testing and CI/CD are included by default
|
||||
- **Mobile uses managed workflow**: For ejected/bare workflow, provide manual guidance
|
||||
- **Always strict TypeScript**: All modes use strict mode
|
||||
- **80% coverage threshold**: Enterprise and mobile enforce this
|
||||
|
||||
## Limitations
|
||||
|
||||
- Requires Node.js >= 18 and npm >= 9
|
||||
- Enterprise mode creates Next.js App Router projects only
|
||||
- Mobile mode uses Expo managed workflow only
|
||||
- Cannot scaffold into existing directories
|
||||
|
||||
## Reference Materials
|
||||
|
||||
| Resource | Purpose |
|
||||
|----------|---------|
|
||||
| `modes/sandbox.md` | Vite + React setup details |
|
||||
| `modes/enterprise.md` | Next.js + full tooling details |
|
||||
| `modes/mobile.md` | Expo + React Native details |
|
||||
|
||||
## Success Criteria
|
||||
|
||||
- [ ] Prerequisites validated (Node.js, npm)
|
||||
- [ ] Project directory created
|
||||
- [ ] Framework scaffolded (Vite/Next.js/Expo)
|
||||
- [ ] TypeScript strict mode configured
|
||||
- [ ] Linting and formatting set up
|
||||
- [ ] Testing configured (enterprise/mobile)
|
||||
- [ ] Git initialized with initial commit
|
||||
- [ ] Next steps provided to user
|
||||
@@ -0,0 +1,59 @@
|
||||
# React Project Scaffolder - Dependencies Reference
|
||||
# This file contains the package versions and dependencies for each mode
|
||||
|
||||
sandbox:
|
||||
base_command: "npm create vite@latest {project-name} -- --template react-ts"
|
||||
dev_dependencies:
|
||||
- prettier@latest
|
||||
- eslint-config-prettier@latest
|
||||
|
||||
enterprise:
|
||||
base_command: "npx create-next-app@latest {project-name} --typescript --eslint --app --src-dir --import-alias '@/*'"
|
||||
testing_dependencies:
|
||||
- vitest@latest
|
||||
- "@vitejs/plugin-react@latest"
|
||||
- jsdom@latest
|
||||
- "@testing-library/react@latest"
|
||||
- "@testing-library/jest-dom@latest"
|
||||
- "@testing-library/user-event@latest"
|
||||
- "@vitest/coverage-v8@latest"
|
||||
quality_dependencies:
|
||||
- prettier@latest
|
||||
- eslint-config-prettier@latest
|
||||
- husky@latest
|
||||
- lint-staged@latest
|
||||
|
||||
mobile:
|
||||
base_command: "npx create-expo-app@latest {project-name} --template blank-typescript"
|
||||
router_dependencies:
|
||||
- expo-router@latest
|
||||
- react-native-safe-area-context@latest
|
||||
- react-native-screens@latest
|
||||
- expo-linking@latest
|
||||
- expo-constants@latest
|
||||
- expo-status-bar@latest
|
||||
testing_dependencies:
|
||||
- jest@latest
|
||||
- jest-expo@latest
|
||||
- "@testing-library/react-native@latest"
|
||||
- "@testing-library/jest-native@latest"
|
||||
- "@types/jest@latest"
|
||||
quality_dependencies:
|
||||
- "@typescript-eslint/parser@latest"
|
||||
- "@typescript-eslint/eslint-plugin@latest"
|
||||
- eslint-plugin-react@latest
|
||||
- eslint-plugin-react-native@latest
|
||||
- prettier@latest
|
||||
- eslint-config-prettier@latest
|
||||
- husky@latest
|
||||
- lint-staged@latest
|
||||
|
||||
# Node version requirements
|
||||
node_requirements:
|
||||
minimum: "18.0.0"
|
||||
recommended: "20.0.0"
|
||||
|
||||
# npm version requirements
|
||||
npm_requirements:
|
||||
minimum: "9.0.0"
|
||||
recommended: "10.0.0"
|
||||
922
skills/devops/react-project-scaffolder/modes/enterprise-mode.md
Normal file
922
skills/devops/react-project-scaffolder/modes/enterprise-mode.md
Normal file
@@ -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.
|
||||
117
skills/devops/react-project-scaffolder/modes/enterprise.md
Normal file
117
skills/devops/react-project-scaffolder/modes/enterprise.md
Normal file
@@ -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
|
||||
950
skills/devops/react-project-scaffolder/modes/mobile-mode.md
Normal file
950
skills/devops/react-project-scaffolder/modes/mobile-mode.md
Normal file
@@ -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.
|
||||
113
skills/devops/react-project-scaffolder/modes/mobile.md
Normal file
113
skills/devops/react-project-scaffolder/modes/mobile.md
Normal file
@@ -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
|
||||
408
skills/devops/react-project-scaffolder/modes/sandbox-mode.md
Normal file
408
skills/devops/react-project-scaffolder/modes/sandbox-mode.md
Normal file
@@ -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!
|
||||
68
skills/devops/react-project-scaffolder/modes/sandbox.md
Normal file
68
skills/devops/react-project-scaffolder/modes/sandbox.md
Normal file
@@ -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
|
||||
76
skills/devops/react-project-scaffolder/scripts/validate-environment.sh
Executable file
76
skills/devops/react-project-scaffolder/scripts/validate-environment.sh
Executable file
@@ -0,0 +1,76 @@
|
||||
#!/bin/bash
|
||||
|
||||
# React Project Scaffolder - Environment Validation Script
|
||||
# Validates prerequisites before scaffolding a project
|
||||
|
||||
set -e
|
||||
|
||||
echo "🔍 Validating environment prerequisites..."
|
||||
echo ""
|
||||
|
||||
# Color codes for output
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
# Track validation status
|
||||
VALIDATION_PASSED=true
|
||||
|
||||
# Check Node.js version
|
||||
echo -n "Checking Node.js version... "
|
||||
if command -v node &> /dev/null; then
|
||||
NODE_VERSION=$(node --version | sed 's/v//')
|
||||
NODE_MAJOR=$(echo $NODE_VERSION | cut -d. -f1)
|
||||
|
||||
if [ "$NODE_MAJOR" -ge 18 ]; then
|
||||
echo -e "${GREEN}✓${NC} Node.js $NODE_VERSION (required: >= 18.x)"
|
||||
else
|
||||
echo -e "${RED}✗${NC} Node.js $NODE_VERSION found, but >= 18.x required"
|
||||
echo " Upgrade: https://nodejs.org/ or use nvm: nvm install 18"
|
||||
VALIDATION_PASSED=false
|
||||
fi
|
||||
else
|
||||
echo -e "${RED}✗${NC} Node.js not found"
|
||||
echo " Install from: https://nodejs.org/"
|
||||
VALIDATION_PASSED=false
|
||||
fi
|
||||
|
||||
# Check npm version
|
||||
echo -n "Checking npm version... "
|
||||
if command -v npm &> /dev/null; then
|
||||
NPM_VERSION=$(npm --version)
|
||||
NPM_MAJOR=$(echo $NPM_VERSION | cut -d. -f1)
|
||||
|
||||
if [ "$NPM_MAJOR" -ge 9 ]; then
|
||||
echo -e "${GREEN}✓${NC} npm $NPM_VERSION (required: >= 9.x)"
|
||||
else
|
||||
echo -e "${YELLOW}⚠${NC} npm $NPM_VERSION found, >= 9.x recommended"
|
||||
echo " Upgrade: npm install -g npm@latest"
|
||||
fi
|
||||
else
|
||||
echo -e "${RED}✗${NC} npm not found"
|
||||
VALIDATION_PASSED=false
|
||||
fi
|
||||
|
||||
# Check git
|
||||
echo -n "Checking git... "
|
||||
if command -v git &> /dev/null; then
|
||||
GIT_VERSION=$(git --version | awk '{print $3}')
|
||||
echo -e "${GREEN}✓${NC} git $GIT_VERSION"
|
||||
else
|
||||
echo -e "${YELLOW}⚠${NC} git not found (optional, but recommended)"
|
||||
echo " Install from: https://git-scm.com/"
|
||||
fi
|
||||
|
||||
echo ""
|
||||
|
||||
if [ "$VALIDATION_PASSED" = true ]; then
|
||||
echo -e "${GREEN}✅ Environment validation passed!${NC}"
|
||||
echo "You're ready to scaffold React projects."
|
||||
exit 0
|
||||
else
|
||||
echo -e "${RED}❌ Environment validation failed.${NC}"
|
||||
echo "Please install the required tools listed above."
|
||||
exit 1
|
||||
fi
|
||||
@@ -0,0 +1,33 @@
|
||||
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'),
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"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" }]
|
||||
}
|
||||
Reference in New Issue
Block a user