code-antipatterns-analysis

# 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** ```bash # 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** ```bash # 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** ```bash ast-grep -p 'try { $$$ } catch ($E) { }' --lang js ``` **Console Statements (Debug Leftovers)** ```bash ast-grep -p 'console.log($$$)' --lang js ast-grep -p 'console.debug($$$)' --lang js ast-grep -p 'console.warn($$$)' --lang js ``` **var Instead of let/const** ```bash ast-grep -p 'var $VAR = $$$' --lang js ``` ### 2. Vue 3 Anti-patterns **Props Mutation** ```yaml # YAML rule for props mutation detection id: vue-props-mutation language: JavaScript message: Avoid mutating props directly rule: pattern: props.$PROP = $VALUE ``` ```bash # Direct prop assignment ast-grep -p 'props.$PROP = $VALUE' --lang js ``` **Missing Keys in v-for** ```bash # 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** ```bash # 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** ```bash # 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** ```bash ast-grep -p ': any' --lang ts ast-grep -p 'as any' --lang ts ast-grep -p '<any>' --lang ts ``` **Non-null Assertions** ```bash ast-grep -p '$VAR!' --lang ts ast-grep -p '$VAR!.$PROP' --lang ts ``` **Type Assertions Instead of Guards** ```bash ast-grep -p '$VAR as $TYPE' --lang ts ``` **Missing Return Types** ```bash # Functions without return type annotations ast-grep -p 'function $NAME($$$) { $$$ }' --lang ts # Check if return type is present ``` ### 4. Async/Promise Patterns **Unhandled Promises** ```bash # 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)** ```bash ast-grep -p '$F1($$$, function($$$) { $F2($$$, function($$$) { $F3($$$, function($$$) { $$$ }) }) })' --lang js ``` **Promise Constructor Anti-pattern** ```bash # 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)** ```bash # 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** ```bash # Nested if statements (4+ levels) ast-grep -p 'if ($A) { if ($B) { if ($C) { if ($D) { $$$ } } } }' --lang js ``` **Large Parameter Lists** ```bash ast-grep -p 'function $NAME($A, $B, $C, $D, $E, $$$)' --lang js ``` **Cyclomatic Complexity Indicators** ```bash # Multiple conditionals in single function ast-grep -p 'if ($$$) { $$$ } else if ($$$) { $$$ } else if ($$$) { $$$ }' --lang js ``` ### 6. React/Pinia Store Patterns **Direct State Mutation (Pinia)** ```bash # Direct store state mutation outside actions ast-grep -p '$STORE.$STATE = $VALUE' --lang js ``` **Missing Dependencies in useEffect** ```bash ast-grep -p 'useEffect(() => { $$$ }, [])' --lang jsx # Check if variables used inside are in dependency array ``` **Inline Functions in JSX** ```bash ast-grep -p '<$COMPONENT onClick={() => $$$} />' --lang jsx ast-grep -p '<$COMPONENT onChange={() => $$$} />' --lang jsx ``` ### 7. Memory & Performance **Event Listeners Without Cleanup** ```bash ast-grep -p 'addEventListener($EVENT, $HANDLER)' --lang js # Check for corresponding removeEventListener ``` **setInterval Without Cleanup** ```bash ast-grep -p 'setInterval($$$)' --lang js # Check for clearInterval ``` **Large Arrays in Computed/Memos** ```bash ast-grep -p 'computed(() => $ARRAY.filter($$$))' --lang js ast-grep -p 'useMemo(() => $ARRAY.filter($$$), [$$$])' --lang jsx ``` ### 8. Security Concerns **eval Usage** ```bash ast-grep -p 'eval($$$)' --lang js ast-grep -p 'new Function($$$)' --lang js ``` **innerHTML Assignment (XSS Risk)** ```bash ast-grep -p '$ELEM.innerHTML = $$$' --lang js ast-grep -p 'dangerouslySetInnerHTML={{ __html: $$$ }}' --lang jsx ``` **Hardcoded Secrets** ```bash ast-grep -p "apiKey: '$$$'" --lang js ast-grep -p "password = '$$$'" --lang js ast-grep -p "secret: '$$$'" --lang js ``` **SQL String Concatenation** ```bash ast-grep -p '"SELECT * FROM " + $VAR' --lang js ast-grep -p '`SELECT * FROM ${$VAR}`' --lang js ``` ### 9. Python Anti-patterns **Bare Except** ```bash ast-grep -p 'except: $$$' --lang py ``` **Mutable Default Arguments** ```bash ast-grep -p 'def $FUNC($ARG=[])' --lang py ast-grep -p 'def $FUNC($ARG={})' --lang py ``` **Global Variable Usage** ```bash ast-grep -p 'global $VAR' --lang py ``` **Type: ignore Without Reason** ```bash # 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 ```markdown 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: 1. Aggregate findings by severity (critical, high, medium, low) 2. Group by category (security, performance, maintainability) 3. Provide actionable remediation suggestions 4. Prioritize fixes based on impact ## YAML Rule Examples ### Complete Anti-pattern Rule ```yaml 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 ```yaml 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: 1. Detects project language stack 2. Launches parallel specialized agents 3. Consolidates findings into prioritized report