graphify

name	graphify
description	Read the codebase knowledge graph for Stetsom Front. The graph lives in graphify-out/ and was generated by Claude Code. Use it for codebase orientation, impact analysis, and dependency tracing. VSCode agents cannot regenerate the graph — use /graphify in Claude Code CLI for that.

Graphify — Reading the Stetsom Front Knowledge Graph

VSCode Copilot Chat agents can read the existing graph but cannot regenerate it (use the Claude Code CLI /graphify skill to rebuild).

How to Use

Codebase orientation (new area)

1. Read graphify-out/GRAPH_REPORT.md
2. Identify which community your target file belongs to
3. Look up its god nodes to understand what it depends on

Impact analysis (before a change)

1. Find your target symbol in graph.json under "nodes"
2. Look at all edges where it appears as source or target
3. Any target nodes with high degree are high-risk ripple targets

Finding hidden dependencies

The GRAPH_REPORT.md "Surprising Connections" section lists inferred edges that aren't obvious from reading the code — check these before refactoring.

Key Facts (last run: 2026-05-12)

Metric	Value
Files	58
Nodes	172
Edges	235
Communities	32

God nodes (touch carefully):

1. cn() — 41 edges — the universal Tailwind class merger
2. Button() — 7 edges
3. buttonVariants — 6 edges

Main communities:

• Utilities (contains cn, navigation, dropdowns)
• Pages & Routes (product listing, route types)
• UI Components (hero, FAQ, support page)
• Technology Stack (Next.js config, fonts, providers)

Stetsom Front Context

Key facts about this codebase that inform graph interpretation:

• cn() from src/lib/utils.ts is intentionally universal — it's the Tailwind class merger. High edge count is expected, not a smell.
• Button() from src/components/ui/button.tsx should only be imported where interaction is needed — unexpected usages in server components are a smell.
• _components/ directories are co-located and route-scoped — edges between different route's _components/ indicate unintended coupling.
• src/components/ui/ is the shared layer — components here should have many inbound edges from pages/sections.

Common CLI Commands

Build & Update

graphify .                          # Build/analyze entire codebase
graphify . --update                 # Re-extract only changed files
graphify . --cluster-only           # Rerun clustering on existing graph
graphify . --cluster-only --resolution 1.5      # More granular communities
graphify . --cluster-only --exclude-hubs 99     # Suppress utility super-hubs from god-node rankings
graphify . --no-viz                 # Skip HTML visualization
graphify . --wiki                   # Build markdown wiki
graphify export callflow-html      # Mermaid architecture/call-flow HTML

Query & Explore

graphify query "what connects auth to the database?"
graphify query "..." --dfs --budget 1500
graphify path "UserService" "DatabasePool"
graphify explain "RateLimiter"

Installation

uv tool install graphifyy --python 3.12
graphify install                    # User profile install
graphify install --project          # Project-scoped install (.claude/ + .agents/)
graphify hook install               # Post-commit + post-checkout hooks

Output Artifacts (committed to git)

graphify-out/
├── graph.json       ← Full graph data
├── graph.html       ← Interactive visualization
├── GRAPH_REPORT.md  ← Highlights & suggested questions
└── cost.json        ← Token cost (local only)

Regenerating the Graph

Run in Claude Code CLI terminal:

/graphify

Output goes to graphify-out/. Recommended after:

• Adding or removing 5+ source files
• Major refactor or modularization pass
• Before a full design-fidelity-audit