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.