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:

examples/refactor-after/

docs/standards.md

docs/standards.md

docs/standards.md

docs/standards.md

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

/* eslint-disable */

frontend/tsconfig.json