Senior Fullstack

What This Skill Does

This skill provides a fullstack development toolkit with project scaffolding and code quality analysis tools. It helps generate project structures with boilerplate code for various stacks, including Next.js, FastAPI + React, and MERN. It's designed for fullstack developers who need to quickly set up and analyze fullstack projects.

When to Use

• Scaffold a new Next.js project.
• Set up a FastAPI backend with a React frontend.
• Create a MERN stack project.
• Analyze code quality in a fullstack codebase.
• Check for security issues in a codebase.
• Generate project boilerplate for a fullstack application.

Key Features

• Generates fullstack project structures with boilerplate code.
• Supports Next.js, FastAPI + React, MERN, and Django + React stacks.
• Provides tools for analyzing code quality.
• Checks for security issues in the codebase.
• Offers a list of available templates.
• Supports JSON output for automation.

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 --- [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

1. Verify scaffold succeeded ls my-saas-app/package.json

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

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

1. Generate detailed report python scripts/code_quality_analyzer.py /path/to/project --json --output audit.json

2. 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

Common Issues

| Issue | Solution |