frontend-backend-integration

What problem does it solve?

Frontend code frequently breaks due to mismatched API wire shapes between client wrappers and backend implementations, as plan documents are often outdated or inaccurate compared to the actual backend source code. This leads to runtime errors like 400 validation failures, broken form submissions, and UI inconsistencies that are only caught late in the development cycle.

Core Features & Use Cases

• Wire Shape Verification: Enforces checking actual backend route files for exact field names, types, auth requirements, and status codes before writing client wrappers, eliminating bugs from outdated plan specs.
• Common Integration Patterns: Provides reusable reference guides for fixing form prefill race conditions, refactoring pages into tabbed layouts without duplicate chrome, and implementing URL-driven tabs with react-router.
• Verification Tools: Includes a bash script to confirm extracted modals appear exactly once in production JS bundles, preventing duplicate component drift.
• Use Cases: Writing new API client wrappers, refactoring admin pages into tabbed settings layouts, fixing form prefill bugs that overwrite user input, and resolving discrepancies between plan documents and shipped backend code.

Quick Start

Use the frontend-backend-integration skill to write a new API client wrapper for the user settings endpoint, first verifying the exact field names and types against the corresponding backend route file.