Senior Fullstack
Fullstack development skill with project scaffolding and code quality analysis tools.
Table of Contents
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 |
1---2name: senior-fullstack-23description: Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.4---5
6# Senior Fullstack
7
8Fullstack development skill with project scaffolding and code quality analysis tools.
9
10---
11
12## Table of Contents
13
14- [Trigger Phrases](#trigger-phrases)
15- [Tools](#tools)
16- [Workflows](#workflows)
17- [Reference Guides](#reference-guides)
18
19---
20
21## Trigger Phrases
22
23Use this skill when you hear:
24- "scaffold a new project"
25- "create a Next.js app"
26- "set up FastAPI with React"
27- "analyze code quality"
28- "check for security issues in codebase"
29- "what stack should I use"
30- "set up a fullstack project"
31- "generate project boilerplate"
32
33---
34
35## Tools
36
37### Project Scaffolder
38
39Generates fullstack project structures with boilerplate code.
40
41**Supported Templates:**
42- `nextjs` - Next.js 14+ with App Router, TypeScript, Tailwind CSS
43- `fastapi-react` - FastAPI backend + React frontend + PostgreSQL
44- `mern` - MongoDB, Express, React, Node.js with TypeScript
45- `django-react` - Django REST Framework + React frontend
46
47**Usage:**
48
49```bash
50# List available templates
51python scripts/project_scaffolder.py --list-templates
52
53# Create Next.js project
54python scripts/project_scaffolder.py nextjs my-app
55
56# Create FastAPI + React project
57python scripts/project_scaffolder.py fastapi-react my-api
58
59# Create MERN stack project
60python scripts/project_scaffolder.py mern my-project
61
62# Create Django + React project
63python scripts/project_scaffolder.py django-react my-app
64
65# Specify output directory
66python scripts/project_scaffolder.py nextjs my-app --output ./projects
67
68# JSON output
69python scripts/project_scaffolder.py nextjs my-app --json
70```
71
72**Parameters:**
73
74| Parameter | Description |
75|-----------|-------------|
76| `template` | Template name (nextjs, fastapi-react, mern, django-react) |
77| `project_name` | Name for the new project directory |
78| `--output, -o` | Output directory (default: current directory) |
79| `--list-templates, -l` | List all available templates |
80| `--json` | Output in JSON format |
81
82**Output includes:**
83- Project structure with all necessary files
84- Package configurations (package.json, requirements.txt)
85- TypeScript configuration
86- Docker and docker-compose setup
87- Environment file templates
88- Next steps for running the project
89
90---
91
92### Code Quality Analyzer
93
94Analyzes fullstack codebases for quality issues.
95
96**Analysis Categories:**
97- Security vulnerabilities (hardcoded secrets, injection risks)
98- Code complexity metrics (cyclomatic complexity, nesting depth)
99- Dependency health (outdated packages, known CVEs)
100- Test coverage estimation
101- Documentation quality
102
103**Usage:**
104
105```bash
106# Analyze current directory
107python scripts/code_quality_analyzer.py .
108
109# Analyze specific project
110python scripts/code_quality_analyzer.py /path/to/project
111
112# Verbose output with detailed findings
113python scripts/code_quality_analyzer.py . --verbose
114
115# JSON output
116python scripts/code_quality_analyzer.py . --json
117
118# Save report to file
119python scripts/code_quality_analyzer.py . --output report.json
120```
121
122**Parameters:**
123
124| Parameter | Description |
125|-----------|-------------|
126| `project_path` | Path to project directory (default: current directory) |
127| `--verbose, -v` | Show detailed findings |
128| `--json` | Output in JSON format |
129| `--output, -o` | Write report to file |
130
131**Output includes:**
132- Overall score (0-100) with letter grade
133- Security issues by severity (critical, high, medium, low)
134- High complexity files
135- Vulnerable dependencies with CVE references
136- Test coverage estimate
137- Documentation completeness
138- Prioritized recommendations
139
140**Sample Output:**
141
142```
143============================================================
144CODE QUALITY ANALYSIS REPORT
145============================================================
146
147Overall Score: 75/100 (Grade: C)
148Files Analyzed: 45
149Total Lines: 12,500
150
151--- SECURITY ---
152 Critical: 1
153 High: 2
154 Medium: 5
155
156--- COMPLEXITY ---
157 Average Complexity: 8.5
158 High Complexity Files: 3
159
160--- RECOMMENDATIONS ---
1611. [P0] SECURITY
162 Issue: Potential hardcoded secret detected
163 Action: Remove or secure sensitive data at line 42
164```
165
166---
167
168## Workflows
169
170### Workflow 1: Start New Project
171
1721. Choose appropriate stack based on requirements (see Stack Decision Matrix)
1732. Scaffold project structure
1743. Verify scaffold: confirm `package.json` (or `requirements.txt`) exists
1754. Run initial quality check — address any P0 issues before proceeding
1765. Set up development environment
177
178```bash
179# 1. Scaffold project
180python scripts/project_scaffolder.py nextjs my-saas-app
181
182# 2. Verify scaffold succeeded
183ls my-saas-app/package.json
184
185# 3. Navigate and install
186cd my-saas-app
187npm install
188
189# 4. Configure environment
190cp .env.example .env.local
191
192# 5. Run quality check
193python ../scripts/code_quality_analyzer.py .
194
195# 6. Start development
196npm run dev
197```
198
199### Workflow 2: Audit Existing Codebase
200
2011. Run code quality analysis
2022. Review security findings — fix all P0 (critical) issues immediately
2033. Re-run analyzer to confirm P0 issues are resolved
2044. Create tickets for P1/P2 issues
205
206```bash
207# 1. Full analysis
208python scripts/code_quality_analyzer.py /path/to/project --verbose
209
210# 2. Generate detailed report
211python scripts/code_quality_analyzer.py /path/to/project --json --output audit.json
212
213# 3. After fixing P0 issues, re-run to verify
214python scripts/code_quality_analyzer.py /path/to/project --verbose
215```
216
217### Workflow 3: Stack Selection
218
219Use the tech stack guide to evaluate options:
220
2211. **SEO Required?** → Next.js with SSR
2222. **API-heavy backend?** → Separate FastAPI or NestJS
2233. **Real-time features?** → Add WebSocket layer
2244. **Team expertise** → Match stack to team skills
225
226See `references/tech_stack_guide.md` for detailed comparison.
227
228---
229
230## Reference Guides
231
232### Architecture Patterns (`references/architecture_patterns.md`)
233
234- Frontend component architecture (Atomic Design, Container/Presentational)
235- Backend patterns (Clean Architecture, Repository Pattern)
236- API design (REST conventions, GraphQL schema design)
237- Database patterns (connection pooling, transactions, read replicas)
238- Caching strategies (cache-aside, HTTP cache headers)
239- Authentication architecture (JWT + refresh tokens, sessions)
240
241### Development Workflows (`references/development_workflows.md`)
242
243- Local development setup (Docker Compose, environment config)
244- Git workflows (trunk-based, conventional commits)
245- CI/CD pipelines (GitHub Actions examples)
246- Testing strategies (unit, integration, E2E)
247- Code review process (PR templates, checklists)
248- Deployment strategies (blue-green, canary, feature flags)
249- Monitoring and observability (logging, metrics, health checks)
250
251### Tech Stack Guide (`references/tech_stack_guide.md`)
252
253- Frontend frameworks comparison (Next.js, React+Vite, Vue)
254- Backend frameworks (Express, Fastify, NestJS, FastAPI, Django)
255- Database selection (PostgreSQL, MongoDB, Redis)
256- ORMs (Prisma, Drizzle, SQLAlchemy)
257- Authentication solutions (Auth.js, Clerk, custom JWT)
258- Deployment platforms (Vercel, Railway, AWS)
259- Stack recommendations by use case (MVP, SaaS, Enterprise)
260
261---
262
263## Quick Reference
264
265### Stack Decision Matrix
266
267| Requirement | Recommendation |
268|-------------|---------------|
269| SEO-critical site | Next.js with SSR |
270| Internal dashboard | React + Vite |
271| API-first backend | FastAPI or Fastify |
272| Enterprise scale | NestJS + PostgreSQL |
273| Rapid prototype | Next.js API routes |
274| Document-heavy data | MongoDB |
275| Complex queries | PostgreSQL |
276
277### Common Issues
278
279| Issue | Solution |
280|-------|----------|
281| N+1 queries | Use DataLoader or eager loading |
282| Slow builds | Check bundle size, lazy load |
283| Auth complexity | Use Auth.js or Clerk |
284| Type errors | Enable strict mode in tsconfig |
285| CORS issues | Configure middleware properly |