codebase-index

Generate framework-agnostic relationship and dependency maps for component-based codebases.

4|1|Updated Oct 29, 2025
One-click install
npx skills add https://github.com/bacchus-labs/wrangler --skill codebase-index-bacchus-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codebase-index
Source: https://github.com/bacchus-labs/wrangler/tree/main/.wrangler/memory/knowledge-base/reference-prompts/skills/codebase-index
Command: npx skills add https://github.com/bacchus-labs/wrangler --skill codebase-index-bacchus-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of detailed relationship and dependency maps for component-based codebases, making complex projects understandable and navigable.

Core Features & Use Cases

  • Component Relationship Mapping: Visualizes how components use and are used by others (uses/usedBy).
  • Dependency Tracking: Identifies NPM packages, utility functions, CSS, and data queries used across the project.
  • Framework Agnostic: Automatically detects and supports various frameworks like React, Vue, Svelte, Astro, Next.js, Angular, and Solid.
  • Token-Efficient Output: Generates output in the TOON format, reducing token count by 30-60% for better LLM comprehension.
  • Use Case: When onboarding a new developer to a large project, use this Skill to generate a comprehensive map of all components and their interdependencies, allowing them to quickly grasp the project's architecture.

Quick Start

Run the codebase-index skill to scan the current project directory and generate relationship maps.

Frequently Asked Questions about codebase-index

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

FAQPage Schema
How do I generate a dependency map for a React or Vue codebase?▼

The codebase-index skill automatically detects frameworks like React, Vue, Svelte, Astro, Next.js, Angular, and Solid. It maps component relationships, NPM dependencies, and utility functions without requiring manual framework configuration.

How do I map component usage and relationships in a large project?▼

Mapping component usage in a large project requires analyzing how components use and are used by others. The codebase-index skill scans your directory to generate comprehensive uses/usedBy relationship maps for onboarding and navigation.

Can I export codebase component analysis to JSON?▼

Yes, you can export codebase component analysis to JSON. The skill supports both JSON and the token-efficient TOON format, which reduces token count by 30-60% to optimize LLM comprehension of your project architecture.

Does the codebase mapping tool work with Svelte and Astro projects?▼

Yes, the codebase mapping tool works with Svelte and Astro projects. It features auto-detection for multiple frameworks including Svelte, Astro, Next.js, Angular, and Solid to analyze component dependencies seamlessly.

What is the best way to document CSS structure and utility functions across a component-based codebase?▼

The best way to document CSS structure and utility functions is to use an automated relationship mapper like codebase-index. It tracks CSS usage, utility functions, and data queries across your project to output a complete architectural overview.