- AgentHub: 13 files updated with non-engineering examples (content drafts, research, strategy) — engineering stays primary, cross-domain secondary - AgentHub: 7 slash commands, 5 Python scripts, 3 references, 1 agent, dry_run.py validation (57 checks) - Marketplace: agenthub entry added with cross-domain keywords, engineering POWERFUL updated (25→30), product (12→13), counts synced across all configs - SEO: generate-docs.py now produces keyword-rich <title> tags and meta descriptions using SKILL.md frontmatter — "Claude Code Skills" in site_name propagates to all 276 HTML pages - SEO: per-domain title suffixes (Agent Skill for Codex & OpenClaw, etc.), slug-as-title cleanup, domain label stripping from titles - Broken links: 141→0 warnings — new rewrite_skill_internal_links() converts references/, scripts/, assets/ links to GitHub source URLs; skills/index.md phantom slugs fixed (6 marketing, 7 RA/QM) - Counts synced: 204 skills, 266 tools, 382 refs, 16 agents, 17 commands, 21 plugins — consistent across CLAUDE.md, README.md, docs/index.md, marketplace.json, getting-started.md, mkdocs.yml - Platform sync: Codex 163 skills, Gemini 246 items, OpenClaw compatible Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
297 lines
8.3 KiB
Markdown
297 lines
8.3 KiB
Markdown
---
|
|
title: "Senior Fullstack — Agent Skill & Codex Plugin"
|
|
description: "Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and. Agent skill for Claude Code, Codex CLI, Gemini CLI, OpenClaw."
|
|
---
|
|
|
|
# Senior Fullstack
|
|
|
|
<div class="page-meta" markdown>
|
|
<span class="meta-badge">:material-code-braces: Engineering - Core</span>
|
|
<span class="meta-badge">:material-identifier: `senior-fullstack`</span>
|
|
<span class="meta-badge">:material-github: <a href="https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/senior-fullstack/SKILL.md">Source</a></span>
|
|
</div>
|
|
|
|
<div class="install-banner" markdown>
|
|
<span class="install-label">Install:</span> <code>claude /plugin install engineering-skills</code>
|
|
</div>
|
|
|
|
|
|
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:**
|
|
|
|
```bash
|
|
# 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:**
|
|
|
|
```bash
|
|
# 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
|
|
|
|
1. Choose appropriate stack based on requirements (see Stack Decision Matrix)
|
|
2. Scaffold project structure
|
|
3. Verify scaffold: confirm `package.json` (or `requirements.txt`) exists
|
|
4. Run initial quality check — address any P0 issues before proceeding
|
|
5. Set up development environment
|
|
|
|
```bash
|
|
# 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
|
|
|
|
1. Run code quality analysis
|
|
2. Review security findings — fix all P0 (critical) issues immediately
|
|
3. Re-run analyzer to confirm P0 issues are resolved
|
|
4. Create tickets for P1/P2 issues
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
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
|
|
|
|
| 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 |
|