Can I use this for projects with custom folder structures?

Yes, the indexer is flexible and scans common patterns like /src/, /app/, and /components/, and can be manually pointed to specific directories.

Which frameworks does Codebase Indexer support?

The skill automatically detects and supports React, Vue, Svelte, Astro, Next.js, Angular, and Solid codebases.

How does the TOON format help with AI coding?

TOON is a data format optimized for LLMs that uses 30-60% fewer tokens than JSON while maintaining higher comprehension accuracy (70.1% vs 65.4% for JSON).

Where are the index files saved?

The files are typically generated in a `src/.ai/` directory, creating a centralized location for AI-readable codebase metadata.

Does this tool track CSS and API calls?

Yes, it maps CSS structure (classes and design tokens) as well as data query patterns including CMS fetches, Axios, and standard fetch calls.

Codebase Indexer

Name: Codebase Indexer
Author: cris-achiardi

bycris-achiardi

•

학습 및 문서화

Generates comprehensive relationship and dependency maps for component-based codebases to optimize AI context and project understanding.

Codebase Indexer is a specialized utility designed to map the architecture of modern component-based projects across frameworks like React, Vue, Svelte, Astro, and Next.js. By scanning imports, dependencies, and data flows, it creates a structured index that helps Claude understand unfamiliar projects instantly. It uniquely supports the TOON format, which reduces token consumption by 30-60% compared to standard JSON, making it an essential tool for maintaining deep codebase context within LLM token limits without sacrificing accuracy.

주요 기능

01Automatic framework detection for React, Vue, Svelte, Astro, Next.js, Angular, and Solid

02Maps component usage graphs including 'usedBy' and 'uses' relationships

03Generates token-efficient TOON format files for 30-60% reduction in context usage

04Auto-categorizes components (atoms, molecules, organisms) based on directory patterns

05Tracks NPM dependencies, utility functions, and API/CMS data query patterns

0619 GitHub stars

사용 사례

01Optimizing context window usage when working with large projects via the TOON format

02Rapidly onboarding Claude to a large, complex codebase to improve its reasoning accuracy

03Visualizing and documenting component dependencies and architecture during refactoring

주요 기능

01Automatic framework detection for React, Vue, Svelte, Astro, Next.js, Angular, and Solid

02Maps component usage graphs including 'usedBy' and 'uses' relationships

03Generates token-efficient TOON format files for 30-60% reduction in context usage

04Auto-categorizes components (atoms, molecules, organisms) based on directory patterns

05Tracks NPM dependencies, utility functions, and API/CMS data query patterns

0619 GitHub stars

사용 사례

01Optimizing context window usage when working with large projects via the TOON format

02Rapidly onboarding Claude to a large, complex codebase to improve its reasoning accuracy

03Visualizing and documenting component dependencies and architecture during refactoring