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:

Need Load Lines

File splitting strategies examples/refactor-after/

~256

Complexity reduction tactics docs/standards.md (lines 75-163) ~88

Architecture patterns docs/standards.md (lines 224-280) ~56

Type safety patterns docs/standards.md (lines 283-348) ~65

Deep-dive on any violation docs/standards.md (full file) ~370

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 .