ast-code-analysis

Analyze TypeScript/React codebases for circular references and cyclomatic complexity.

Updated Apr 22, 2026
One-click install
npx skills add https://github.com/aroido/vibesmith --skill ast-code-analysis
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ast-code-analysis
Source: https://github.com/aroido/vibesmith/tree/main/.cursor/skills/ast-code-analysis
Command: npx skills add https://github.com/aroido/vibesmith --skill ast-code-analysis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires madge, ts-complexity, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill identifies structural issues in TypeScript/React code, such as circular dependencies and high cyclomatic complexity, to improve code quality and maintainability.

Core Features & Use Cases

  • Circular Reference Detection: Finds and reports circular dependencies between code modules.
  • Complexity Analysis: Measures cyclomatic complexity to identify overly complicated functions.
  • Dependency Graphing: Visualizes code dependencies to understand project structure.
  • Hook Dependency Validation: Ensures correct dependency arrays for React hooks.
  • Type Safety Checks: Promotes the minimization of any types and as casting.
  • Use Case: Before merging a new feature, run this skill to ensure it doesn't introduce circular dependencies or overly complex code, maintaining a clean and robust frontend architecture.

Quick Start

Analyze the code in the 'packages/web/src/' directory for circular references and complexity.

Frequently Asked Questions about ast-code-analysis

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I detect circular dependencies in a TypeScript React codebase?

Measure cyclomatic complexity in TypeScript code by analyzing functions to identify overly complicated logic. This process highlights areas needing refactoring, ensuring frontend architecture remains robust and maintainable as the project scales.

What is the best way to visualize code dependencies for a React project?

Visualize code dependencies for a React project by generating dependency graphs that map module relationships. This provides a clear understanding of project structure, helping developers trace imports and maintain architectural rules across the codebase.

Does this code analysis approach validate React hook dependency arrays?

Yes, this code analysis approach validates React hook dependency arrays to ensure correctness. It checks dependency arrays against React conventions, preventing stale closures and unexpected side effects in functional components during structural integrity checks.

Can I check for type safety issues like 'any' types and 'as' casting in TypeScript?

Check for type safety issues like 'any' types and 'as' casting in TypeScript by running structural analysis that promotes minimization of unsafe patterns. This enforces adherence to architectural rules and TypeScript conventions for cleaner code.

What are the limitations of using madge and ts-complexity for code analysis?

Using madge and ts-complexity for code analysis limits scope to detecting circular references and measuring cyclomatic complexity. It focuses on structural integrity and quality issues, meaning it may not catch runtime logic errors or enforce styling conventions.