tomevault-io Code Anti-patterns Analysis
Expert knowledge for systematic detection and analysis of anti-patterns, code smells, and quality issues across codebases using ast-grep and parallel agent delegation.
Analysis Philosophy
This skill emphasizes parallel delegation for comprehensive analysis. Rather than sequentially scanning for issues, launch multiple specialized agents to examine different categories simultaneously, then consolidate findings.
Analysis Categories
1. JavaScript/TypeScript Anti-patterns
Callback Hell & Async Issues
# Nested callbacks (3+ levels)
ast-grep -p '$FUNC($$$, function($$$) { $FUNC2($$$, function($$$) { $$$ }) })' --lang js
# Missing error handling in async
ast-grep -p 'async function $NAME($$$) { $$$ }' --lang js
# Then check if try-catch is present
# Unhandled promise rejection
ast-grep -p '$PROMISE.then($$$)' --lang js
# Without .catch() - use composite rule
Magic Values
# Magic numbers in comparisons
ast-grep -p 'if ($VAR > 100)' --lang js
ast-grep -p 'if ($VAR < 50)' --lang js
ast-grep -p 'if ($VAR === 42)' --lang js
# Magic strings
ast-grep -p "if ($VAR === 'admin')" --lang js
Empty Catch Blocks
ast-grep -p 'try { $$$ } catch ($E) { }' --lang js
Console Statements (Debug Leftovers)
ast-grep -p 'console.log($$$)' --lang js
ast-grep -p 'console.debug($$$)' --lang js
ast-grep -p 'console.warn($$$)' --lang js
Use let/const for Variable Declarations
ast-grep -p 'var $VAR = $$$' --lang js
2. Vue 3 Anti-patterns
Props Mutation
# YAML rule for props mutation detection
id: vue-props-mutation
language: JavaScript
message: Use computed properties or emit events to update props
rule:
pattern: props.$PROP = $VALUE
# Direct prop assignment
ast-grep -p 'props.$PROP = $VALUE' --lang js
Missing Keys in v-for
# Search in Vue templates
ast-grep -p 'v-for="$ITEM in $LIST"' --lang html
# Check if :key is present nearby
Options API in Composition API Codebase
# Find Options API usage
ast-grep -p 'export default { data() { $$$ } }' --lang js
ast-grep -p 'export default { methods: { $$$ } }' --lang js
ast-grep -p 'export default { computed: { $$$ } }' --lang js
# vs Composition API
ast-grep -p 'defineComponent({ setup($$$) { $$$ } })' --lang js
Reactive State Issues
# Destructuring reactive state (loses reactivity)
ast-grep -p 'const { $$$PROPS } = $REACTIVE' --lang js
# Should use toRefs
ast-grep -p 'const { $$$PROPS } = toRefs($REACTIVE)' --lang js
3. TypeScript Quality Issues
Excessive any Usage
ast-grep -p ': any' --lang ts
ast-grep -p 'as any' --lang ts
ast-grep -p '<any>' --lang ts
Non-null Assertions
ast-grep -p '$VAR!' --lang ts
ast-grep -p '$VAR!.$PROP' --lang ts
Type Assertions Instead of Guards
ast-grep -p '$VAR as $TYPE' --lang ts
Missing Return Types
# Functions without return type annotations
ast-grep -p 'function $NAME($$$) { $$$ }' --lang ts
# Check if return type is present
4. Async/Promise Patterns
Unhandled Promises
# Promise without await or .then/.catch
ast-grep -p '$ASYNC_FUNC($$$)' --lang js
# Context: check if result is used
# Floating promises (no await)
ast-grep -p '$PROMISE_RETURNING()' --lang ts
Nested Callbacks (Pyramid of Doom)
ast-grep -p '$F1($$$, function($$$) { $F2($$$, function($$$) { $F3($$$, function($$$) { $$$ }) }) })' --lang js
Promise Constructor Anti-pattern
# Wrapping already-async code in new Promise
ast-grep -p 'new Promise(($RESOLVE, $REJECT) => { $ASYNC_FUNC($$$).then($$$) })' --lang js
5. Code Complexity
Long Functions (Manual Review)
# Find function definitions, then count lines
ast-grep -p 'function $NAME($$$) { $$$ }' --lang js --json | jq '.[] | select(.range.end.line - .range.start.line > 50)'
Deep Nesting
# Nested if statements (4+ levels)
ast-grep -p 'if ($A) { if ($B) { if ($C) { if ($D) { $$$ } } } }' --lang js
Large Parameter Lists
ast-grep -p 'function $NAME($A, $B, $C, $D, $E, $$$)' --lang js
Cyclomatic Complexity Indicators
# Multiple conditionals in single function
ast-grep -p 'if ($$$) { $$$ } else if ($$$) { $$$ } else if ($$$) { $$$ }' --lang js
6. React/Pinia Store Patterns
Direct State Mutation (Pinia)
# Direct store state mutation outside actions
ast-grep -p '$STORE.$STATE = $VALUE' --lang js
Missing Dependencies in useEffect
ast-grep -p 'useEffect(() => { $$$ }, [])' --lang jsx
# Check if variables used inside are in dependency array
Inline Functions in JSX
ast-grep -p '<$COMPONENT => $$$} />' --lang jsx
ast-grep -p '<$COMPONENT => $$$} />' --lang jsx
7. Memory & Performance
Event Listeners Without Cleanup
ast-grep -p 'addEventListener($EVENT, $HANDLER)' --lang js
# Check for corresponding removeEventListener
setInterval Without Cleanup
ast-grep -p 'setInterval($$$)' --lang js
# Check for clearInterval
Large Arrays in Computed/Memos
ast-grep -p 'computed(() => $ARRAY.filter($$$))' --lang js
ast-grep -p 'useMemo(() => $ARRAY.filter($$$), [$$$])' --lang jsx
8. Security Concerns
eval Usage
ast-grep -p 'eval($$$)' --lang js
ast-grep -p 'new Function($$$)' --lang js
innerHTML Assignment (XSS Risk)
ast-grep -p '$ELEM.innerHTML = $$$' --lang js
ast-grep -p 'dangerouslySetInnerHTML={{ __html: $$$ }}' --lang jsx
Hardcoded Secrets
ast-grep -p "apiKey: '$$$'" --lang js
ast-grep -p "password = '$$$'" --lang js
ast-grep -p "secret: '$$$'" --lang js
SQL String Concatenation
ast-grep -p '"SELECT * FROM " + $VAR' --lang js
ast-grep -p '`SELECT * FROM ${$VAR}`' --lang js
9. Python Anti-patterns
Bare Except
ast-grep -p 'except: $$$' --lang py
Mutable Default Arguments
ast-grep -p 'def $FUNC($ARG=[])' --lang py
ast-grep -p 'def $FUNC($ARG={})' --lang py
Global Variable Usage
ast-grep -p 'global $VAR' --lang py
Type: ignore Without Reason
# Search in comments via grep
grep -r "# type: ignore$" --include="*.py"
Parallel Analysis Strategy
When analyzing a codebase, launch multiple agents in parallel to maximize efficiency:
Agent Delegation Pattern
1. **Language Detection Agent** (Explore)
- Detect project languages and frameworks
- Identify relevant file patterns
2. **JavaScript/TypeScript Agent** (code-analysis or Explore)
- JS anti-patterns
- TypeScript quality issues
- Async/Promise patterns
3. **Framework-Specific Agent** (code-analysis or Explore)
- Vue 3 anti-patterns (if Vue detected)
- React anti-patterns (if React detected)
- Pinia/Redux patterns (if detected)
4. **Security Agent** (security-audit)
- Security concerns
- Hardcoded values
- Injection risks
5. **Complexity Agent** (code-analysis or Explore)
- Code complexity metrics
- Long functions
- Deep nesting
6. **Python Agent** (if Python detected)
- Python anti-patterns
- Type annotation issues
Consolidation
After parallel analysis completes:
- Aggregate findings by severity (critical, high, medium, low)
- Group by category (security, performance, maintainability)
- Provide actionable remediation suggestions
- Prioritize fixes based on impact
YAML Rule Examples
Complete Anti-pattern Rule
id: no-empty-catch
language: JavaScript
severity: warning
message: Empty catch block suppresses errors silently
note: |
Empty catch blocks hide errors and make debugging difficult.
Either log the error, handle it specifically, or re-throw.
rule:
pattern: try { $$$ } catch ($E) { }
fix: |
try { $$$ } catch ($E) {
console.error('Error:', $E);
throw $E;
}
files:
- 'src/**/*.js'
- 'src/**/*.ts'
ignores:
- '**/*.test.js'
- '**/node_modules/**'
Vue Props Mutation Rule
id: no-props-mutation
language: JavaScript
severity: error
message: Never mutate props directly - use emit or local copy
rule:
all:
- pattern: props.$PROP = $VALUE
- inside:
kind: function_declaration
note: |
Props should be treated as immutable. To modify data:
1. Emit an event to parent: emit('update:propName', newValue)
2. Create a local ref: const local = ref(props.propName)
Integration with Commands
This skill is designed to work with the /code:antipatterns command, which:
- Detects project language stack
- Launches parallel specialized agents
- Consolidates findings into prioritized report
- Suggests automated fixes where possible
Best Practices for Analysis
- Start with language detection - Run appropriate patterns for detected languages
- Use parallel agents - Don't sequentially analyze; delegate to specialized agents
- Prioritize by severity - Security issues first, then correctness, then style
- Provide fixes - Don't just identify problems; suggest solutions
- Consider context - Some "anti-patterns" are acceptable in specific contexts
- Check test files separately - Different standards may apply to test code
Severity Levels
| Severity | Description | Examples |
|---|---|---|
| Critical | Security vulnerabilities, data loss risk | eval(), SQL injection, hardcoded secrets |
| High | Bugs, incorrect behavior | Props mutation, unhandled promises, empty catch |
| Medium | Maintainability issues | Magic numbers, deep nesting, large functions |
| Low | Style/preference | var usage, console.log, inline functions |
Resources
- ast-grep Documentation: https://ast-grep.github.io/
- ast-grep Playground: https://ast-grep.github.io/playground.html
- OWASP Top 10: https://owasp.org/www-project-top-ten/
- Clean Code Principles: https://clean-code-developer.com/
Converted and distributed by TomeVault — claim your Tome and manage your conversions.