generic-fullstack-code-reviewer
Review full-stack code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md compliance. Enforces TypeScript strict mode, input validation, GPU-accelerated animations, and design system consistency. Use when completing features, before commits, or reviewing pull requests.
Best use case
generic-fullstack-code-reviewer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Review full-stack code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md compliance. Enforces TypeScript strict mode, input validation, GPU-accelerated animations, and design system consistency. Use when completing features, before commits, or reviewing pull requests.
Teams using generic-fullstack-code-reviewer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/generic-fullstack-code-reviewer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How generic-fullstack-code-reviewer Compares
| Feature / Agent | generic-fullstack-code-reviewer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Review full-stack code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md compliance. Enforces TypeScript strict mode, input validation, GPU-accelerated animations, and design system consistency. Use when completing features, before commits, or reviewing pull requests.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
Cursor vs Codex for AI Workflows
Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.
SKILL.md Source
# Fullstack Code Reviewer
Review Next.js/NestJS code against production quality standards.
**Extends:** [Generic Code Reviewer](../generic-code-reviewer/SKILL.md) - Read base skill for full code review methodology, P0/P1/P2 priority system, and judgment calls.
## Pre-Commit Commands
```bash
# Frontend
npm run build # Next.js build
npm run lint # ESLint
# Backend
npm run test # NestJS tests
npm run type-check # TypeScript
```
## Fullstack-Specific Checks
### Backend (NestJS)
**Authentication & Authorization:**
```typescript
// Protected routes MUST have auth guard
@UseGuards(JwtAuthGuard)
@Get('profile')
getProfile(@CurrentUser() user: User) {
return this.userService.findById(user.id);
}
```
**Input Validation (DTOs):**
```typescript
// All inputs validated via class-validator
export class CreateUserDto {
@IsEmail()
email: string;
@IsString()
@MinLength(8)
password: string;
}
```
**Database Safety:**
```typescript
// Use Prisma, never raw SQL
// ✓ Good
await this.prisma.user.findUnique({ where: { id } });
// ✗ Bad
await this.prisma.$queryRaw`SELECT * FROM users WHERE id = ${id}`;
```
### Frontend (Next.js)
**Server vs Client Components:**
```typescript
// Default: Server Component (can fetch data, no hooks)
export default async function Page() {
const data = await getData();
return <div>{data}</div>;
}
// Client: Interactive (hooks, event handlers)
'use client';
export default function Interactive() {
const [state, setState] = useState();
return <button onClick={() => setState(...)}>Click</button>;
}
```
**API Route Patterns:**
```typescript
// app/api/[route]/route.ts
export async function POST(request: Request) {
const body = await request.json();
// Validate body before processing
return NextResponse.json({ success: true });
}
```
### Cross-Stack Consistency
**Shared Types:**
```typescript
// types/api.ts - Shared between frontend/backend
interface UserResponse {
id: string;
email: string;
createdAt: string;
}
```
**API Contract:**
- Request DTOs match frontend payloads
- Response types match frontend expectations
- Error format consistent (status, message, errors[])
### Environment & Secrets
```bash
# .env (never committed)
DATABASE_URL=postgres://...
JWT_SECRET=...
# Check .env.example exists with placeholder values
# Verify .gitignore includes .env
```
## Prisma Checks
```bash
# After schema changes
npx prisma migrate dev --name description
npx prisma generate
```
- Migrations are reversible
- Types regenerated after schema changes
- Relations properly defined
## Testing Requirements
**Backend:**
- Unit tests for services
- E2E tests for API endpoints
- Mocked database for tests
**Frontend:**
- Component tests for interactivity
- API mocking for integration tests
## Quick Fullstack Checklist
- [ ] Auth guards on protected routes
- [ ] DTOs validate all inputs
- [ ] No raw SQL queries
- [ ] Shared types match
- [ ] .env not committed
- [ ] Prisma types current
## See Also
- [Generic Code Reviewer](../generic-code-reviewer/SKILL.md) - Base methodology
- [Code Review Standards](../_shared/CODE_REVIEW_STANDARDS.md) - Full requirements
- [Design Patterns](../_shared/DESIGN_PATTERNS.md) - UI consistencyRelated Skills
generic-static-feature-developer
Guide feature development for static HTML/CSS/JS sites. Covers patterns, automation workflows, and content validation. Use when adding features, modifying automation, or planning changes.
generic-static-design-system
Complete design system reference for static HTML/CSS/JS sites. Covers colors, typography, component patterns, animations, and accessibility. Use when implementing UI, choosing colors, or ensuring brand consistency.
generic-static-code-reviewer
Review static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance. Enforces pure HTML/CSS/JS standards, minimal page weight, mobile-first design. Use when completing features, before commits, or reviewing changes.
generic-react-ux-designer
Professional UI/UX design expertise for React applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.
generic-react-feature-developer
Guide feature development for React applications with architecture focus. Covers Zustand/Redux patterns, IndexedDB usage, component systems, lazy loading strategies, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.
generic-react-design-system
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
generic-react-code-reviewer
Review React/TypeScript code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Enforces TypeScript strict mode, GPU-accelerated animations, WCAG AA accessibility, bundle size limits, and surgical simplicity. Use when completing features, before commits, or reviewing pull requests.
generic-fullstack-ux-designer
Professional UI/UX design expertise for full-stack applications. Covers design thinking, user psychology (Hick's/Fitts's/Jakob's Law), visual hierarchy, interaction patterns, accessibility, performance-driven design, and design critique. Use when designing features, improving UX, solving user problems, or conducting design reviews.
generic-fullstack-feature-developer
Guide feature development for full-stack applications with architecture focus. Covers Next.js App Router patterns, NestJS backend services, database models, data workflows, and seamless integration. Use when adding new features, refactoring existing code, or planning major changes.
generic-fullstack-design-system
Complete design system reference for full-stack applications. Covers colors, typography, spacing, component patterns (shadcn/ui), effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
generic-feature-developer
Guide feature development with architecture patterns for any tech stack. Covers frontend, backend, full-stack, and automation projects. Use when adding new features, modifying systems, or planning changes.
generic-design-system
Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.