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

| Category | Key Focus | Goal | Common Refactorings | | --- | --- | --- | --- | | Bloaters | Size & Complexity | Extract Method / Class | Extract Method, Extract Class, Introduce Parameter Object | | OO Abusers | Design Integrity | Use Polymorphism | Replace Conditional with Polymorphism, Replace Inheritance with Delegation | | Change Preventers | Rigidity | Decouple / Organize | Move Method, Extract Class, Inline Class | | Dispensables | Redundancy | Remove / Simplify | Inline Class, Remove Dead Code, Collapse Hierarchy | | Couplers | Connectivity | Encapsulate / Move | Move Method, Hide Delegate, Remove Middle Man |