Code Smell Checker

When to use

Review code when you need to:

• •Check AI-generated or developer code for maintainability
• •Identify technical debt and quality issues
• •Validate TypeScript type design and semantic clarity
• •Review Vue component architecture
• •Ensure reactive data handling best practices
• •Conduct code quality assessments

What's covered

TypeScript Types:

• •Organization and coupling → type-organization.md
• •Extensibility and complexity → type-design.md

Vue Components:

• •Structure and lifecycle → component-structure.md
• •Props and state → component-props-state.md
• •Templates and communication → component-template.md

Reactive Data:

• •Ref, reactive, depth → reactive-basics.md
• •Computed properties → reactive-computed.md
• •Watch patterns → reactive-watch.md
• •Performance → reactive-optimization.md
• •Memory management → reactive-memory.md

General Code Smells:

• •Bloaters (size & complexity) → general-bloaters.md
• •OO Abusers (design integrity) → general-oo-abusers.md
• •Change Preventers (rigidity) → general-change-preventers.md
• •Dispensables (redundancy) → general-dispensables.md
• •Couplers (connectivity) → general-couplers.md

How to use

1. Identify scope:

• •Which area? (types, components, reactive, general smells)
• •Which files to review?

2. Apply checklist:

• •Read relevant reference doc
• •Check code against items
• •Note violations

3. Report findings:

• •Categorize by severity
• •Focus on maintainability impact
• •Consider project context

4. Provide feedback:

• •Explain why it's a problem
• •Show the bad pattern
• •Suggest concrete improvements
• •Reference checklist item

Quick reference

TypeScript red flags:

• •Scattered type definitions
• •any, object, overly broad types
• •Complex type gymnastics
• •Types don't match runtime

Vue component red flags:

• •Components >300 lines
• •Props drilling >3 levels
• •Mixed local/global/derived state
• •Weak prop types

Reactive data red flags:

• •Deep reactive on large data
• •Computed with side effects
• •Watch for transformations
• •Wrong ref/reactive usage

General code smell red flags:

• •Methods >25 lines, classes doing too much (Bloaters)
• •Complex switch/if chains, unused inherited methods (OO Abusers)
• •One change = many file edits (Change Preventers)
• •Dead code, excessive comments, lazy classes (Dispensables)
• •Reaching into other objects' internals, long method chains (Couplers)

Output format

## Review: [Component/Module]

### [Category]

#### [Issue]
- Severity: [Critical/Important/Minor]
- Location: file.ts:123
- Reference: [Link to checklist]
- Problem: [Explain]
- Fix: [Suggest]

Best practices

Be constructive:

• •Focus on maintainability not preferences
• •Explain "why" behind each smell
• •Provide concrete alternatives
• •Recognize when rules should bend

Be systematic:

• •Review one category at a time
• •Use checklist for coverage
• •Document patterns
• •Track recurring issues

Be pragmatic:

• •Not all items apply to every project
• •Consider project maturity
• •Balance idealism with reality
• •Prioritize high-impact issues

Code Smell Quick Reference