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:

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

# 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

• Choose appropriate stack based on requirements (see Stack Decision Matrix)

• Scaffold project structure

• Verify scaffold: confirm package.json (or requirements.txt) exists

• Run initial quality check — address any P0 issues before proceeding

• Set up development environment

# 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

• Run code quality analysis

• Review security findings — fix all P0 (critical) issues immediately

• Re-run analyzer to confirm P0 issues are resolved

• Create tickets for P1/P2 issues

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

• SEO Required? → Next.js with SSR

• API-heavy backend? → Separate FastAPI or NestJS

• Real-time features? → Add WebSocket layer

• 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