Claude-skill-registry code-smell-checker
Review TypeScript + Vue code for maintainability issues. Use when checking code quality, architectural problems, type safety, or Vue best practices. Identifies technical debt in components, types, and reactive data handling.
install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/code-smell-checker" ~/.claude/skills/majiayu000-claude-skill-registry-code-smell-checker && rm -rf "$T"
manifest:
skills/data/code-smell-checker/SKILL.mdsource content
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
How to use
1. Identify scope:
- Which area? (types, components, reactive)
- 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
, overly broad typesobject- 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
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