nexus-gateway: Skill for Claude Code

Frontend Bug Trace

Full-stack bug tracing: Page -> Component -> API call -> Backend handler -> Database. Fix mismatches at every layer, then verify with real requests and DB queries.

Workflow

digraph trace {
  rankdir=TB;
  node [shape=box];

  identify [label="1. Identify Page & Component\n(URL + error stack trace)"];
  trace_api [label="2. Trace API Calls\n(find service file + useApi hooks)"];
  compare [label="3. Compare Frontend Types vs Backend Response\n(field names, types, nullability)"];
  check_backend [label="4. Check Backend Handler\n(SQL, field mapping, JSON tags)"];
  fix [label="5. Fix All Mismatches\n(backend fields, frontend types, null guards)"];
  build [label="6. Build Verification\n(go build + tsc)"];
  verify_api [label="7. Verify: curl login + call API\n(check response shape)"];
  verify_db [label="8. Verify: DB query via Docker\n(cross-check data)"];
  done [label="9. Report to user"];

  identify -> trace_api -> compare -> check_backend -> fix -> build -> verify_api -> verify_db -> done;
}

Step 1: Identify Page & Component

From the URL or error stack trace, locate the page component using route files first (not global search):

URL: /proxy/status
→ shellRouteConfig.tsx: path: 'proxy/status' → LazyPage: L.LazyProxyStatusCompliancePage
→ lazyPages.tsx: LazyProxyStatusCompliancePage → import('../pages/proxy/ProxyStatusCompliancePage')
→ Target: src/pages/proxy/ProxyStatusCompliancePage.tsx

Actions (in order — stop at first hit):

1. Route config lookup — Grep for the URL path segment (e.g. proxy/status) in src/routes/shellRouteConfig.tsx. This gives you the LazyPage component name.
2. Lazy page mapping — Grep for that LazyPage name in src/routes/lazyPages.tsx. This gives you the exact import path to the page component file.
3. Read the page component — follow the import path. If it's a wrapper (e.g. a tab container), read it to find the actual sub-component that renders the buggy UI.
4. Stack trace shortcut — if the user provided an error stack trace with a file:line, go directly to that file instead. Vite stack traces use src/ paths directly.