Quality Reviewer

Quality Reviewer

Automatically enforces DevPrep AI code quality standards during development.

---

Auto-Triggers

Auto-triggered by keywords:

• "review", "check", "validate", "verify"
• "lint", "quality", "standards"
• "type check", "typescript"
• "complexity", "file size", "architecture"

---

Quick Standards

File Limits

• ≤180 lines per file (code only)
• Complexity ≤15 per function
• ≤50 lines per function
• ≤4 parameters per function

TypeScript

• Strict mode enabled
• No any types
• Interfaces: I prefix (e.g., IButtonProps)
• Type imports: import type { ... }

Naming

• Interfaces: IUserProfile, IButtonProps
• Types: QuestionType, Difficulty
• Functions: camelCase
• Components: PascalCase

Imports

Use path aliases:

@shared/​ui/​button      // ✅ Correct
@modules/​practice/​*    // ✅ Correct
@lib/​trpc/​client       // ✅ Correct
@store/​hooks           // ✅ Correct

../​../​../​shared/​ui/​*   // ❌ Wrong

Architecture (6-Folder)

app/      Routes only
modules/  Features (practice, assessment, results, profile, questions, home)
shared/   Cross-cutting (ui, components, hooks, utils)
lib/      Integrations (trpc, claude)
store/    Zustand state
styles/   Design system

---

Run Checks

Single Check

# Target specific issues
./​.claude/​skills/​quality-reviewer/​scripts/​check-file-size.sh
./​.claude/​skills/​quality-reviewer/​scripts/​check-complexity.sh
./​.claude/​skills/​quality-reviewer/​scripts/​check-imports.sh
./​.claude/​skills/​quality-reviewer/​scripts/​check-architecture.sh
./​.claude/​skills/​quality-reviewer/​scripts/​check-naming.sh

Full Review

# Run all 7 checks at once
./​.claude/​skills/​quality-reviewer/​scripts/​full-review.sh

Checks: file size → complexity → imports → architecture → naming → ESLint → TypeScript

---

Common Fixes

Interface Missing 'I' Prefix

interface ButtonProps { }  // ❌
interface IButtonProps { } // ✅

Direct React Import

import { ReactElement } from 'react';      // ❌
import type { ReactElement } from 'react'; // ✅

Relative Import

import { Button } from '../​../​../​shared/​ui/​button'; // ❌
import { Button } from '@shared/​ui/​button';         // ✅

Using 'any'

const data: any = fetchData();    // ❌
const data: IUserData = fetchData(); // ✅

File Too Large

Split into:

• Component.tsx - UI only
• hooks.ts - Logic
• types.ts - Types
• utils.ts - Helpers

See: examples/​refactor-after/

Complexity Too High (>15)

// ❌ Before: Nested ifs (complexity 18)
if (user.role === 'admin') {
  if (user.isActive) {
    if (user.permissions.includes('write')) {
      // do something
    }
  }
}

// ✅ After: Early returns (complexity 3)
if (!user.role === 'admin') return;
if (!user.isActive) return;
if (!user.permissions.includes('write')) return;
// do something

Quick fixes:

• Extract conditionals → separate functions
• Use early returns → avoid nesting
• Replace switch → lookup objects const MAP = { key: 'value' };

---

When to Load Additional Docs

SKILL.md is self-sufficient for:

• Running checks (all scripts listed above)
• Simple fixes (naming, imports, basic refactoring)
• Understanding standards

Load additional docs only when needed:

Code examples:

• ✅ Perfect: examples/​good-code.tsx
• ❌ Violations: examples/​bad-code.tsx
• 🔄 Refactoring: examples/​refactor-after/

Full project standards: Docs/​code-standards.md

---

Version: 1.1.0 (Optimized) | Updated: October 2025 Optimization: 31% smaller, 52% fewer tokens for typical usage

Note: Example files use // @ts-nocheck and /​* eslint-disable */ directives to suppress IDE warnings, since they demonstrate intentional violations or reference non-existent paths for educational purposes. They are also excluded from build-time TypeScript compilation via frontend/​tsconfig.json.