senior-fullstack（高级全栈）

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

Troubleshooting

Success Criteria

• Quality score >= 80/100 (Grade B or higher) on the code quality analyzer for all production codebases
• Zero P0 (critical) security findings before merging to main branch
• Test file ratio >= 70% of source files (estimated coverage target reported by the analyzer)
• Average cyclomatic complexity < 15 across all analyzed files
• No high-complexity files with nesting depth > 4 without documented justification
• Scaffolded projects build and start successfully on first run after npm install / pip install
• Documentation score >= 75/100 (README, LICENSE, and either CONTRIBUTING or API docs present)

Scope & Limitations

What this skill covers:

• Project scaffolding for Next.js, FastAPI+React, MERN, and Django+React stacks with Docker, TypeScript, and environment configuration
• Static code quality analysis including complexity metrics, security pattern detection, dependency vulnerability checks, test coverage estimation, and documentation scoring
• Stack selection guidance via the tech stack decision matrix and reference guides
• Fullstack architecture patterns (frontend component design, backend clean architecture, API design, caching, auth)

What this skill does NOT cover:

• Runtime performance profiling, load testing, or APM instrumentation -- see senior-devops for observability tooling
• Infrastructure provisioning, Terraform/Pulumi, or cloud deployment automation -- see aws-solution-architect and senior-devops
• Comprehensive CVE scanning against live vulnerability databases -- use npm audit, pip-audit, or senior-secops for deep security analysis
• Mobile or native desktop application scaffolding -- this skill targets web-based fullstack architectures only

Integration Points

Tool Reference

project_scaffolder.py

Purpose: Generates complete fullstack project structures with boilerplate code, configuration files, Docker setup, and environment templates for four supported stack templates.

Usage:

python scripts/project_scaffolder.py <template> <project_name> [options]
python scripts/project_scaffolder.py --list-templates

Flags:

Example:

# Scaffold a FastAPI + React project in a custom directory
python scripts/project_scaffolder.py fastapi-react my-api --output ./projects --json

Output Formats:

• Human-readable (default): Prints project name, template used, location on disk, file count, and numbered next steps for getting started.
• JSON (--json): Returns a structured object with keys: success, project_name, template, description, location, files_created, directories_created, next_steps. On failure, returns success: false with an error message and available templates list.

code_quality_analyzer.py

Purpose: Performs comprehensive static analysis of fullstack codebases, reporting on security vulnerabilities, cyclomatic complexity, dependency health, test coverage estimation, documentation quality, and an overall quality score with prioritized recommendations.

Usage:

python scripts/code_quality_analyzer.py [project_path] [options]

Flags:

Example:

# Full verbose analysis with JSON report saved to disk
python scripts/code_quality_analyzer.py /path/to/project --verbose --json --output audit.json

Output Formats:

• Human-readable (default): Prints a formatted report with sections for overall score/grade, language breakdown, security issue counts by severity, complexity metrics, dependency status, test coverage estimate, documentation checklist, and up to 10 prioritized recommendations. Use --verbose to expand individual security findings with file paths and line numbers.
• JSON (--json): Returns a structured object with keys: summary, languages, security (categorized by severity), complexity, code_smells, dependencies, tests, documentation, overall_score, grade, recommendations. Each recommendation includes priority (P0/P1/P2), category, issue, and action.