api-integration

The api-integration skill provides a robust framework for bridging backend OpenAPI specifications with React frontend architectures. By leveraging the apidog-mcp-server, it establishes a single source of truth for API definitions, ensuring that the AI agent generates accurate, type-safe code that stays synchronized with the backend. This skill is designed for engineering teams that prioritize maintainability and want to eliminate the manual overhead of writing boilerplate for HTTP requests, type definitions, and complex data-fetching logic.

• Automated Type Generation: Integrates with openapi-typescript and orval to produce precise TypeScript interfaces directly from OpenAPI 3.0/3.1 specs, reducing runtime errors and schema mismatches.

• Query Layer Orchestration: Implements a structured folder pattern (queries/mutations) using TanStack Query hooks, including query key factories, caching configurations, and stale time management for optimized data fetching.

• Resilient HTTP Client: Configures axios-based clients with interceptors for automatic JWT/Bearer token management and token refresh workflows, handling 401 errors gracefully to maintain session persistence.

• MCP-Driven Configuration: Supports dynamic configuration via .claude/mcp.json, enabling the agent to read local file-based specs or remote URLs, and supports multi-API projects through parallel MCP server definitions.

• When setting up a project, define the API specification source (URL or local path) in your MCP configuration to ensure the agent has read-access to the schema.

• Organize API-related code in a dedicated /src/api directory following the suggested pattern of types.ts, client.ts, and feature-based query/mutation files.

• Use Zod schemas in conjunction with OpenAPI definitions to provide runtime validation for data coming from the backend.

• The agent is capable of adapting to various authentication strategies; ensure the client interceptors are tailored to your specific auth middleware requirements.

• For large-scale APIs, rely on automated code generation tools like orval rather than hand-writing types to minimize drift between the API contract and frontend implementations.