codebase-index

Mapping component dependencies and relationships in a React or Vue codebase is done by scanning source trees and parsing imports to generate comprehensive graphs. This Skill auto-detects your framework and outputs component usage and data flow maps.

Generating an AI-friendly dependency graph for Svelte or Next.js projects involves outputting parsed imports and component relationships into TOON or JSON artifacts. These artifacts are saved under an .ai folder for seamless tooling compatibility.

Framework auto-detection works for Angular and Solid when indexing a codebase. The tool automatically identifies your project's framework to accurately parse imports and map component data flows without requiring manual configuration.

You can output codebase relationship maps in JSON format instead of the default TOON. Both formats are supported and generated under the .ai folder, providing flexibility for different AI consumption and downstream tooling requirements.

Indexing an Astro codebase to visualize data queries and utility imports requires running the index script on your project source tree. It parses your imports and generates comprehensive relationship maps including utilities and data flows.

Limitations when generating dependency maps for component-based codebases include reliance on static import parsing and framework auto-detection. If your project uses unsupported frameworks or dynamic imports, the generated component graphs and data flows may be incomplete.