skills.rest
MadAppGang
MadAppGangOFFICIAL
Explore all skills by this author →
WebsiteGitHub

api-integration

Generate TypeScript types, axios clients, and TanStack Query hooks from OpenAPI specs.

278|29|Updated Nov 4, 2025
Search Tags:#frontend#API integration#TypeScript#code generation#OpenAPI#HTTP client#Apidog
One-click install
npx skills add https://github.com/MadAppGang/claude-code --skill api-integration-madappgang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: api-integration
Source: https://github.com/MadAppGang/claude-code/tree/main/plugins/frontend/skills/api-integration
Command: npx skills add https://github.com/MadAppGang/claude-code --skill api-integration-madappgang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires axios, axios-auth-refresh, zod.

What problem does it solve?

Keeping frontend code synchronized with backend API changes, generating types, and building robust API clients can be a manual and error-prone process. This Skill streamlines OpenAPI integration with Apidog MCP.

Core Features & Use Cases

  • OpenAPI Synchronization: Use Apidog MCP to expose and read the latest OpenAPI specification as a single source of truth.
  • Type Generation: Automatically generate TypeScript types from OpenAPI schemas, ensuring type safety across your application.
  • Robust HTTP Client: Create an axios-based client with request/response interceptors for authentication and token refresh.
  • Use Case: Automatically generate TypeScript interfaces for your /users API endpoint, then implement a useUsers TanStack Query hook that uses the generated types and handles authentication.

Quick Start

Use the api-integration skill to set up an API client and generate types from the OpenAPI spec.

Frequently Asked Questions about api-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep TypeScript types synchronized with my OpenAPI specification?▼

Automatically generate TypeScript types from OpenAPI specs using Apidog MCP to sync frontend code with backend API changes. This ensures type safety across your application without manual updates whenever the API contract changes.

Can I generate an HTTP client from an OpenAPI spec with authentication handling?▼

Yes. Build an axios-based HTTP client with request and response interceptors that handle authentication and token refresh automatically from your OpenAPI specification, eliminating manual client setup.

How do I create TanStack Query hooks from an OpenAPI specification?▼

Generate TanStack Query hooks organized by feature directly from your OpenAPI spec. These hooks use your generated types and integrate with the axios client to provide type-safe data fetching with built-in caching.

Does this work with OpenAPI 3.0 and 3.1 specifications?▼

Yes. The Skill supports both OpenAPI 3.0 and 3.1 specifications, allowing you to work with the version your backend API exposes as the single source of truth.

What's the best way to automate API client generation for React frontends?▼

Use Apidog MCP to expose your backend's OpenAPI spec, then automatically generate TypeScript types, axios clients, and TanStack Query hooks. This eliminates manual code duplication and keeps frontend and backend in sync.

Do I need to manually write API client code if I use OpenAPI specifications?▼

No. Code generation from OpenAPI specs produces typed HTTP clients, request/response handling, and query hooks automatically, reducing boilerplate and the risk of type mismatches between frontend and API.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
7

bunjs-apidog

Generate and synchronize OpenAPI 3.0 specifications for Bun.js APIs with Apidog.

Official
Intermediate
7a336e6e7a336e6e
1

integrating-api

Implement a type-safe API client with TanStack Query and Axios/Fetch.

Community
Intermediate
manastalukdarmanastalukdar
1

openapi-types

Generate TypeScript types, client SDKs, and Zod schemas from OpenAPI 3.0 specifications.

Community
Advanced
RomualdPRomualdP

API Contracts Generator

Generate synchronized DTOs and TypeScript types for Next.js and NestJS API contracts.

Community
Advanced