senior-fullstack

# Senior Fullstack Fullstack development skill with project scaffolding and code quality analysis tools. --- ## Table of Contents - [Trigger Phrases](#trigger-phrases) - [Tools](#tools) - [Workflows](#workflows) - [Reference Guides](#reference-guides) --- ## Trigger Phrases Use this skill when you hear: - "scaffold a new project" - "create a Next.js app" - "set up FastAPI with React" - "analyze code quality" - "check for security issues in codebase" - "what stack should I use" - "set up a fullstack project" - "generate project boilerplate" --- ## Tools ### Project Scaffolder Generates fullstack project structures with boilerplate code. **Supported Templates:** - `nextjs` - Next.js 14+ with App Router, TypeScript, Tailwind CSS - `fastapi-react` - FastAPI backend + React frontend + PostgreSQL - `mern` - MongoDB, Express, React, Node.js with TypeScript - `django-react` - Django REST Framework + React frontend **Usage:** ```bash # List available templates python scripts/project_scaffolder.py --list-templates # Create Next.js project python scripts/project_scaffolder.py nextjs my-app # Create FastAPI + React project python scripts/project_scaffolder.py fastapi-react my-api # Create MERN stack project python scripts/project_scaffolder.py mern my-project # Create Django + React project python scripts/project_scaffolder.py django-react my-app # Specify output directory python scripts/project_scaffolder.py nextjs my-app --output ./projects # JSON output python scripts/project_scaffolder.py nextjs my-app --json ``` **Parameters:** | Parameter | Description | |-----------|-------------| | `template` | Template name (nextjs, fastapi-react, mern, django-react) | | `project_name` | Name for the new project directory | | `--output, -o` | Output directory (default: current directory) | | `--list-templates, -l` | List all available templates | | `--json` | Output in JSON format | **Output includes:** - Project structure with all necessary files - Package configurations (package.json, requirements.txt) - TypeScript configuration - Docker and docker-compose setup - Environment file templates - Next steps for running the project --- ### Code Quality Analyzer Analyzes fullstack codebases for quality issues. **Analysis Categories:** - Security vulnerabilities (hardcoded secrets, injection risks) - Code complexity metrics (cyclomatic complexity, nesting depth) - Dependency health (outdated packages, known CVEs) - Test coverage estimation - Documentation quality **Usage:** ```bash # Analyze current directory python scripts/code_quality_analyzer.py . # Analyze specific project python scripts/code_quality_analyzer.py /path/to/project # Verbose output with detailed findings python scripts/code_quality_analyzer.py . --verbose # JSON output python scripts/code_quality_analyzer.py . --json # Save report to file python scripts/code_quality_analyzer.py . --output report.json ``` **Parameters:** | Parameter | Description | |-----------|-------------| | `project_path` | Path to project directory (default: current directory) | | `--verbose, -v` | Show detailed findings | | `--json` | Output in JSON format | | `--output, -o` | Write report to file | **Output includes:** - Overall score (0-100) with letter grade - Security issues by severity (critical, high, medium, low) - High complexity files - Vulnerable dependencies with CVE references - Test coverage estimate - Documentation completeness - Prioritized recommendations **Sample Output:** ``` ============================================================ CODE QUALITY ANALYSIS REPORT ============================================================ Overall Score: 75/100 (Grade: C) Files Analyzed: 45 Total Lines: 12,500 --- SECURITY --- Critical: 1 High: 2 Medium: 5 --- COMPLEXITY --- Average Complexity: 8.5 High Complexity Files: 3 --- RECOMMENDATIONS --- 1. [P0] SECURITY Issue: Potential hardcoded secret detected Action: Remove or secure sensitive data at line 42 ``` --- ## Workflows ### Workflow 1: Start New Project 1. Choose appropriate stack based on requirements (see Stack Decision Matrix) 2. Scaffold project structure 3. Verify scaffold: confirm `package.json` (or `requirements.txt`) exists 4. Run initial quality check — address any P0 issues before proceeding 5. Set up development environment ```bash # 1. Scaffold project python scripts/project_scaffolder.py nextjs my-saas-app # 2. Verify scaffold succeeded ls my-saas-app/package.json # 3. Navigate and install cd my-saas-app npm install # 4. Configure environment cp .env.example .env.local # 5. Run quality check python ../scripts/code_quality_analyzer.py . # 6. Start development npm run dev ``` ### Workflow 2: Audit Existing Codebase 1. Run code quality analysis 2. Review security findings — fix all P0 (critical) issues immediately 3. Re-run analyzer to confirm P0 issues are resolved 4. Create tickets for P1/P2 issues ```bash # 1. Full analysis python scripts/code_quality_analyzer.py /path/to/project --verbose # 2. Generate detailed report python scripts/code_quality_analyzer.py /path/to/project --json --output audit.json # 3. After fixing P0 issues, re-run to verify python scripts/code_quality_analyzer.py /path/to/project --verbose ``` ### Workflow 3: Stack Selection Use the tech stack guide to evaluate options: 1. **SEO Required?** → Next.js with SSR 2. **API-heavy backend?** → Separate FastAPI or NestJS 3. **Real-time features?** → Add WebSocket layer 4. **Team expertise** → Match stack to team skills See `references/tech_stack_guide.md` for detailed comparison. --- ## Reference Guides ### Architecture Patterns (`references/architecture_patterns.md`) - Frontend component architecture (Atomic Design, Container/Presentational) - Backend patterns (Clean Architecture, Repository Pattern) - API design (REST conventions, GraphQL schema design) - Database patterns (connection pooling, transactions, read replicas) - Caching strategies (cache-aside, HTTP cache headers) - Authentication architecture (JWT + refresh tokens, sessions) ### Development Workflows (`references/development_workflows.md`) - Local development setup (Docker Compose, environment config) - Git workflows (trunk-based, conventional commits) - CI/CD pipelines (GitHub Actions examples) - Testing strategies (unit, integration, E2E) - Code review process (PR templates, checklists) - Deployment strategies (blue-green, canary, feature flags) - Monitoring and observability (logging, metrics, health checks) ### Tech Stack Guide (`references/tech_stack_guide.md`) - Frontend frameworks comparison (Next.js, React+Vite, Vue) - Backend frameworks (Express, Fastify, NestJS, FastAPI, Django) - Database selection (PostgreSQL, MongoDB, Redis) - ORMs (Prisma, Drizzle, SQLAlchemy) - Authentication solutions (Auth.js, Clerk, custom JWT) - Deployment platforms (Vercel, Railway, AWS) - Stack recommendations by use case (MVP, SaaS, Enterprise) --- ## Quick Reference ### Stack Decision Matrix | Requirement | Recommendation | |-------------|---------------| | SEO-critical site | Next.js with SSR | | Internal dashboard | React + Vite | | API-first backend | FastAPI or Fastify | | Enterprise scale | NestJS + PostgreSQL | | Rapid prototype | Next.js API routes | | Document-heavy data | MongoDB | | Complex queries | PostgreSQL | ### Common Issues | Issue | Solution | |-------|----------| | N+1 queries | Use DataLoader or eager loading | | Slow builds | Check bundle size, lazy load | | Auth complexity | Use Auth.js or Clerk | | Type errors | Enable strict mode in tsconfig | | CORS issues | Configure middleware properly | --- ## Why This Skill Exists Implement — Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selectio <!-- SR_40: auto-generated from frontmatter `purpose`/`description` (OPP-Phase3). Expand with domain-specific rationale. --> ## When to Use Use this skill when the task requires senior fullstack capabilities. <!-- SR_40: auto-generated from frontmatter `when`/`description` (OPP-Phase3). --> ## What If Fails If this skill fails to produce the expected output: (1) verify input completeness, (2) retry with more specific context, (3) fall back to the parent workflow without this skill. <!-- SR_40: auto-generated from frontmatter `what_if_fails` (OPP-Phase3). -->