debug-fe-be-integration

# Frontend-Backend Integration Debug Skill Systematic approach to debugging frontend-backend integration issues by analyzing backend logs, production errors, and source code to identify root causes and fix both sides. --- ## Step 0: Auto-Detect Stack Before debugging, discover the project's architecture. ### 0a. Detect Frontend Framework Read `package.json` and look for: | Signal | Framework | |--------|-----------| | `next` | Next.js | | `nuxt` | Nuxt | | `@remix-run/react` | Remix | | `@sveltejs/kit` | SvelteKit | | `vite` + `react` | Vite React SPA | | `@angular/core` | Angular | ### 0b. Detect Backend Framework ``` Glob: **/app/api/**/route.ts → Next.js App Router Glob: **/pages/api/**/*.ts → Next.js Pages Router Glob: **/server/api/**/*.ts → Nuxt server Glob: **/src/routes/**/*.ts → Express/Hono/Fastify Glob: **/src/app.ts or **/src/index.ts → Node backend entry Glob: **/main.py or **/app.py → Python backend Glob: **/main.go → Go backend ``` ### 0c. Detect API Style and Validation | Signal | Technology | |--------|-----------| | `@trpc/server` | tRPC (type-safe, no REST audit needed) | | `graphql` or `@apollo/server` | GraphQL | | `zod` in BE dependencies | Zod validation | | `joi` in BE dependencies | Joi validation | | `yup` in BE dependencies | Yup validation | | `class-validator` | NestJS-style validation | | `pydantic` | Python Pydantic validation | ### 0d. Find Route and Controller Patterns ``` Grep: pattern "router\.(get|post|patch|put|delete)" glob "...