skills.rest
friedbotstudio
friedbotstudioOFFICIAL
Explore all skills by this author →
GitHub

code-browser

Trace UI elements and features from entry points to source files.

5|Updated Apr 29, 2026
Search Tags:#dependency-graph#code-navigation#source-tracing#api-discovery#component-mapping#route-analysis
One-click install
npx skills add https://github.com/friedbotstudio/baseline --skill code-browser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: code-browser
Source: https://github.com/friedbotstudio/baseline/tree/main/.claude/skills/code-browser
Command: npx skills add https://github.com/friedbotstudio/baseline --skill code-browser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It answers code-navigation questions by finding where a feature, UI element, route, handler, or command is defined and where its data comes from.

Core Features & Use Cases

  • Top-down source tracing: Start at an entry point and follow imports until you reach the real data source, API call, query, or file read.
  • Framework-agnostic navigation: Works across frontend and backend codebases in any language when structural relationships matter more than keyword matches.
  • Reverse lookup support: Helps answer questions like which page uses a given endpoint or which component renders a specific panel.
  • Use case: When a user asks where a button, panel, or feature comes from, this Skill identifies the exact files to inspect instead of relying on noisy search results.

Quick Start

Ask this skill to trace the requested feature from its entry point down through imports until it reaches the source file or boundary you need.

Frequently Asked Questions about code-browser

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

FAQPage Schema
How do I trace a UI element back to its source code definition?▼

You trace a UI element to its source by starting at the entry point and following imports structurally until you reach the exact file where the feature, component, or data boundary is defined.

What is the best way to find which page uses a specific API endpoint?▼

Finding which page uses a specific API endpoint requires a reverse lookup, mapping from the endpoint or handler backward through dependencies to identify the exact pages or components rendering it.

Does code navigation work for backend codebases or only JavaScript and TypeScript?▼

Code navigation works across frontend and backend codebases in any language by analyzing structural relationships, with optional JavaScript and TypeScript acceleration through convention-aware indexing.

How do I follow imports to find where a feature gets its data?▼

You follow imports to find feature data by performing a structural walk from the feature's entry point down to leaf API calls, queries, or file reads at the IO boundary.

When should I use structural source tracing instead of keyword search?▼

Use structural source tracing instead of keyword search when you need to map routes, handlers, or components across files, because keyword matches produce noisy results compared to following structural import relationships.

Related Skills

Explore More Software Engineering Skills→
JoranHonigJoranHonig
63

cartography

Document code execution flows and map source files into cartography markdown.

Community
Advanced
ImaginerLabsImaginerLabs

react-component-refactor

Refactor TypeScript React components into subcomponents and hooks.

Official
Advanced
artosetrovartosetrov

figma-code-connect

Generate parserless .figma.js Code Connect templates from Figma component selections.

Community
Intermediate
tomguntomgun

exploring-codebase

Locate files, symbols, and dependency chains in a codebase.

Community
Intermediate