--- name: code-review description: "Load PROACTIVELY when task involves reviewing code, auditing quality, or validating implementations. Use when user says \"review this code\", \"check this PR\", \"audit the codebase\", or \"score this implementation\". Covers the 10-dimension weighted scoring rubric (correctness, security, performance, architecture, testing, error handling, type safety, maintainability, accessibility, documentation), automated pattern detection for anti-patterns, and structured review output with actionable findings." metadata: version: 1.0.0 category: quality tags: [review, quality, security, performance, testing, architecture, accessibility, scoring] --- ## Resources ``` scripts/ validate-code-review.sh references/ review-patterns.md ``` # Code Review Quality Skill This skill teaches you how to perform thorough, enterprise-grade code reviews using GoodVibes precision tools. A systematic code review catches issues early, ensures consistency, validates security and performance, and maintains high quality standards across the codebase. ## When to Use This Skill Load this skill when: - Reviewing pull requests or merge requests - Performing code quality audits - Validating security and performance of implementations - Checking adherence to architectural patterns - Assessing test coverage and quality - Evaluating accessibility compliance - Providing structured feedback to developers Trigger phrases: "review this code", "check the PR", "quality audit", "security review", "performance review", "validate implementation". ## Core Workflow ### Phase 1: Discovery - Understand the Change Before reviewing, understand what changed, why, and the scope of impact. #### Step 1.1: Gather Change Context Use `discover` to map all changed files and identify the type of change. ```yaml discover: queries: - id: changed_files type: glob patterns: ["src/**/*"] # List changed files for review - id: new_files type: glob patterns: ["**/*"] - id: test_files type: glob patterns: ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"] verbosity: files_only ``` **Extract from git:** ```yaml precision_exec: commands: - cmd: "git diff --name-only HEAD~1..HEAD" verbosity: minimal ``` **What this reveals:** - All files modified in the changeset - New vs modified vs deleted files - Test files included (or missing) - Scope of change (frontend, backend, full-stack) #### Step 1.2: Analyze Changed Code Use `precision_read` to examine the actual changes. ```yaml precision_read: files: - path: "src/api/user-routes.ts" # Example changed file extract: content - path: "src/components/UserProfile.tsx" extract: content output: max_per_item: 200 verbosity: standard ``` **Get diff context:** ```yaml precision_exec: commands: - cmd: "git diff HEAD~1..HEAD -- src/api/user-routes.ts" verbosity: standard ``` #### Step 1.3: Find Related Code Use `discover` to find imports, exports, and usage of changed symbols. ```yaml discover: queries: - id: function_exports type: grep pattern: "export (function|const|class) (createUser|updateUser|deleteUser)" glob: "**/*.{ts,tsx,js,jsx}" - id: usage_sites type: grep pattern: "(createUser|updateUser|deleteUser)\\(" glob: "**/*.{ts,tsx,js,jsx}" - id: related_tests type: grep pattern: "(createUser|updateUser|deleteUser)" glob: "**/*.test.{ts,tsx}" verbosity: locations ``` **What this reveals:** - Where changed functions are used - Potential breaking changes - Test coverage for changed code - Ripple effects across the codebase ### Phase 2: Security Review Security issues are **critical** and must be caught in review. #### Step 2.1: Check for Common Vulnerabilities Use `discover` to find security anti-patterns. ```yaml discover: queries: # SQL Injection - id: sql_injection type: grep pattern: '(query|execute|sql).*[`$].*\$\{' glob: "**/*.{ts,tsx,js,jsx}" # XSS vulnerabilities - id: dangerous_html type: grep pattern: "(dangerouslySetInnerHTML|innerHTML|outerHTML)" glob: "**/*.{ts,tsx,jsx}" # Hardcoded secrets - id: hardcoded_secrets type: grep pattern: '(password|secret|api[_-]?key|token)\s*=\s*["''][^"'']+["'']' glob: "**/*.{ts,tsx,js,jsx,json}" # Missing authentication - id: unauthed_routes type: grep pattern: "export (async )?function (GET|POST|PUT|DELETE|PATCH)" glob: "src/app/api/**/*.ts" verbosity: locations ``` **Critical patterns to check:** | Pattern | Severity | Why It Matters | |---------|----------|----------------| | SQL injection | Critical | Allows attackers to read/modify database | | XSS vulnerabilities | Critical | Allows script injection, session hijacking | | Hardcoded secrets | Critical | Exposes credentials in source code | | Missing auth checks | Critical | Exposes protected resources | | Unsafe deserialization | Critical | Remote code execution | | CORS misconfiguration | Major | Allows unauthorized origins | | Weak password rules | Major | Account compromise | | Missing input validation | Major | Data corruption, injection | #### Step 2.2: Validate Input Handling All external input must be validated. ```yaml discover: queries: # Check for validation schemas - id: zod_schemas type: grep pattern: "z\\.(object|string|number|array|enum)" glob: "**/*.{ts,tsx}" # Check for direct request.json() without validation - id: unvalidated_input type: grep pattern: "(await request\\.json\\(\\)|req\\.body)(?!.*safeParse)" glob: "src/app/api/**/*.ts" # Check for SQL parameterization - id: parameterized_queries type: grep pattern: "(db\\.(query|execute)|prisma\\.|sql`)" glob: "**/*.{ts,js}" verbosity: locations ``` **Best practices to validate:** - All API routes validate input with Zod, Joi, or equivalent - All database queries use parameterized queries (Prisma, prepared statements) - File uploads validate content type and size - URLs and redirects are validated against allowlists #### Step 2.3: Check Authentication & Authorization Verify that protected resources require authentication. ```yaml discover: queries: # Find auth middleware usage - id: auth_middleware type: grep pattern: "(getServerSession|auth\\(\\)|requireAuth|withAuth)" glob: "src/app/api/**/*.ts" # Find resource ownership checks - id: ownership_checks type: grep pattern: "(userId|authorId|ownerId)\s*===\s*(session|user|currentUser)" glob: "**/*.{ts,tsx}" # Find RBAC checks - id: rbac_checks type: grep pattern: "(role|permission|can)\s*===\s*" glob: "**/*.{ts,tsx}" verbosity: locations ``` **Critical checks:** - [ ] Protected API routes call auth middleware - [ ] User can only modify their own resources (ownership checks) - [ ] Admin-only actions check for admin role - [ ] JWTs are validated with proper secret - [ ] Session tokens are rotated and have expiration ### Phase 3: Performance Review Performance issues cause poor UX and cost scalability. #### Step 3.1: Check for N+1 Queries N+1 queries are the #1 database performance killer. ```yaml discover: queries: # Find loops with database calls - id: n_plus_one type: grep pattern: "(for|forEach|map).*await.*(prisma|db|query|find)" glob: "**/*.{ts,tsx,js,jsx}" # Find Prisma include usage - id: prisma_includes type: grep pattern: "(findMany|findUnique|findFirst).*include:" glob: "**/*.{ts,js}" verbosity: locations ``` **How to fix:** - Use `include` to eager load related records (Prisma) - Use joins or `SELECT IN` for batch loading - Implement DataLoader for GraphQL - Cache frequently accessed data #### Step 3.2: Check for Unnecessary Re-renders React re-render issues harm frontend performance. ```yaml discover: queries: # Find inline object/array creation in JSX - id: inline_objects type: grep pattern: "(onClick|onChange|style)=\\{\\{|=\\{\\[" glob: "**/*.{tsx,jsx}" # Find missing useMemo/useCallback - id: missing_memoization type: grep pattern: "(map|filter|reduce)\\(" glob: "**/*.{tsx,jsx}" # Find useEffect without dependencies - id: missing_deps type: grep pattern: "useEffect\\([^)]+\\)\\s*$" glob: "**/*.{tsx,jsx}" verbosity: locations ``` **Common issues:** | Anti-pattern | Fix | |-------------|-----| | Inline object in props | Extract to constant or useMemo | | Inline function in props | Wrap in useCallback | | Large list without key | Add stable key prop | | useEffect missing deps | Add all used variables to deps array | | Context re-renders everything | Split context or use state managers | #### Step 3.3: Check Database Indexes Missing indexes cause slow queries. ```yaml precision_read: files: - path: "prisma/schema.prisma" extract: content output: max_per_item: 500 verbosity: standard ``` **Validate indexes exist for:** - Foreign keys (userId, postId, etc.) - Frequently filtered fields (status, createdAt, published) - Fields used in WHERE clauses - Compound indexes for multi-column queries ### Phase 4: Code Quality Review Code quality affects maintainability and reliability. #### Step 4.1: Check Type Safety TypeScript should catch errors at compile time, not runtime. ```yaml discover: queries: # Find any types - id: any_usage type: grep pattern: ":\s*any(\\s|;|,|\\))" glob: "**/*.{ts,tsx}" # Find type assertions (as) - id: type_assertions type: grep pattern: "as (unknown|any|string|number)" glob: "**/*.{ts,tsx}" # Find non-null assertions (!) - id: non_null_assertions type: grep pattern: "![.;,)\\]]" glob: "**/*.{ts,tsx}" # Find unsafe member access - id: unsafe_access type: grep pattern: "\\?\\." glob: "**/*.{ts,tsx}" verbosity: locations ``` **Type safety issues:** | Issue | Severity | Fix | |-------|----------|-----| | `any` type usage | Major | Use proper types or unknown | | `as any` assertions | Major | Fix the underlying type issue | | `!` non-null assertion | Minor | Add null checks | | Missing return types | Minor | Explicitly type function returns | | Implicit any params | Major | Add parameter types | #### Step 4.2: Check Error Handling All async operations and API calls must handle errors. ```yaml discover: queries: # Find floating promises - id: floating_promises type: grep pattern: "^\\s+[a-z][a-zA-Z]*\\(.*\\);$" glob: "**/*.{ts,tsx,js,jsx}" # Find empty catch blocks - id: empty_catch type: grep pattern: "catch.*\\{\\s*\\}" glob: "**/*.{ts,tsx,js,jsx}" # Find console.error (should use logger) - id: console_error type: grep pattern: "console\\.(error|warn|log)" glob: "**/*.{ts,tsx,js,jsx}" verbosity: locations ``` **Error handling checklist:** - [ ] All promises have `.catch()` or `try/catch` - [ ] Errors are logged with context (user ID, request ID) - [ ] User-facing errors are sanitized (no stack traces) - [ ] API errors return proper HTTP status codes - [ ] Retry logic for transient failures #### Step 4.3: Check Code Organization Large files and high complexity make code hard to maintain. ```yaml precision_exec: commands: - cmd: "find src -not -path '*/node_modules/*' -not -path '*/dist/*' -name '*.ts' -o -name '*.tsx' -print0 | xargs -0 wc -l | sort -rn | head -20" verbosity: standard ``` **Code organization rules:** - Files should be < 300 lines (exception: generated code) - Functions should be < 50 lines - Cyclomatic complexity < 10 - Max nesting depth: 3 levels - Extract helpers to separate files ### Phase 5: Testing Review Tests validate correctness and prevent regressions. #### Step 5.1: Check Test Coverage Every changed file should have tests. ```yaml discover: queries: # Find test files - id: test_files type: glob patterns: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"] # Find files without tests - id: source_files type: glob patterns: ["src/**/*.{ts,tsx}"] # Check test imports - id: test_imports type: grep pattern: "from ['\"].*/(api|lib|components)/" glob: "**/*.test.{ts,tsx}" verbosity: files_only ``` **Compare source files to test files:** ```javascript // Pseudo-logic (implement with precision tools) const sourceFiles = results.source_files.files; const testFiles = results.test_files.files; const missingTests = sourceFiles.filter(f => !testFiles.some(t => t.includes(f.replace('.ts', '')))); ``` #### Step 5.2: Check Test Quality Tests should test behavior, not implementation. ```yaml discover: queries: # Find skipped tests - id: skipped_tests type: grep pattern: "(it\\.skip|test\\.skip|describe\\.skip)" glob: "**/*.test.{ts,tsx}" # Find focused tests (.only) - id: focused_tests type: grep pattern: "(it\\.only|test\\.only|describe\\.only)" glob: "**/*.test.{ts,tsx}" # Find expect assertions - id: assertions type: grep pattern: "expect\\(" glob: "**/*.test.{ts,tsx}" # Find mock usage - id: mocks type: grep pattern: "(vi\\.mock|jest\\.mock|vi\\.fn)" glob: "**/*.test.{ts,tsx}" verbosity: locations ``` **Test quality checklist:** - [ ] No `.skip` or `.only` (should be removed before merge) - [ ] Each test has at least one assertion - [ ] Tests have descriptive names ("it should...", "when...then...") - [ ] Tests are isolated (no shared state) - [ ] Mocks are used sparingly (prefer real implementations) - [ ] Edge cases are tested (null, empty, large values) ### Phase 6: Architecture Review Architecture violations create technical debt. #### Step 6.1: Check Dependency Direction Dependencies should flow from outer layers to inner layers. ```yaml discover: queries: # Find domain imports in UI - id: ui_imports_domain type: grep pattern: "from ['\"].*/(domain|core|lib)/" glob: "src/components/**/*.{ts,tsx}" # Find UI imports in domain - id: domain_imports_ui type: grep pattern: "from ['\"].*/(components|pages|app)/" glob: "src/domain/**/*.{ts,tsx}" # Find circular dependencies - id: imports type: grep pattern: "^import.*from" glob: "src/**/*.{ts,tsx}" verbosity: locations ``` **Dependency rules:** - UI components can import hooks, utils, domain logic - Domain logic should NOT import UI components - API routes can import domain logic, not UI - Shared utils should have zero dependencies #### Step 6.2: Check for Layering Violations ```yaml discover: queries: # Database access in components - id: db_in_components type: grep pattern: "(prisma|db\\.(query|execute))" glob: "src/components/**/*.{ts,tsx}" # Business logic in API routes - id: logic_in_routes type: grep pattern: "export (async )?function (GET|POST)" glob: "src/app/api/**/*.ts" verbosity: files_only ``` **Read the route handlers to check:** - Route handlers should be < 30 lines (delegate to services) - No database queries in components (use server actions or API routes) - No business logic in routes (extract to service layer) ### Phase 7: Accessibility Review Accessibility ensures your app is usable by everyone. #### Step 7.1: Check Semantic HTML Use proper HTML elements for accessibility. ```yaml discover: queries: # Find div buttons (should be