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.