Senior Fullstack

Fullstack development skill with project scaffolding and code quality analysis tools.

Table of Contents

• Trigger Phrases

• Tools

• Workflows

• 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:

# 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:

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:

# 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:

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

2. Scaffold project structure

3. Run initial quality check

4. Set up development environment

# 1. Scaffold project
python scripts/project_scaffolder.py nextjs my-saas-app

# 2. Navigate and install
cd my-saas-app
npm install

# 3. Configure environment
cp .env.example .env.local

# 4. Run quality check
python ../scripts/code_quality_analyzer.py .

# 5. Start development
npm run dev

Workflow 2: Audit Existing Codebase

1. Run code quality analysis

2. Review security findings

3. Address critical issues first

4. Plan improvements

# 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. Address P0 issues immediately

# 4. Create tickets for P1/P2 issues

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

Common Issues