openapi-type-safe-sync

Generate TypeScript types and React Query hooks from openapi.json.

Updated Feb 24, 2026

Search Tags:#typescript #pydantic #openapi #zod #react-query #typing #api-contract

Ready to run

npx skills add https://github.com/SaintFore/OpenCodeSettings --skill openapi-type-safe-sync

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: openapi-type-safe-sync
Source: https://github.com/SaintFore/OpenCodeSettings/tree/main/skills/openapi-type-safe-sync
Command: npx skills add https://github.com/SaintFore/OpenCodeSettings --skill openapi-type-safe-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Maintains and synchronizes endpoint contracts between backend OpenAPI specs and frontend type systems, enabling automatic generation of openapi.json updates, TypeScript types, and a React Query-based request layer while aligning Zod and Pydantic validation.

Core Features & Use Cases

Generate TypeScript types from openapi.json using openapi-typescript.
Wrap openapi-fetch with React Query's useQuery and useMutation hooks.
Normalize and unify API errors via a Zod-based parsing layer compatible with backend schemas.
Ensure no manual frontend interface typing; all types derived from OpenAPI schemas and backend changes.

Quick Start

Install the toolchain and run the OpenAPI-driven sync workflow to regenerate types and client hooks from openapi.json.

Frequently Asked Questions about openapi-type-safe-sync

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

FAQPage Schema

How do I generate TypeScript types from OpenAPI for React Query?▼

Generate TypeScript types from OpenAPI by processing your openapi.json with openapi-typescript, then wrapping openapi-fetch with React Query useQuery and useMutation hooks to derive all frontend types automatically.

How do I sync Zod and Pydantic validation models for frontend and backend APIs?▼

Sync Zod and Pydantic validation models by normalizing API errors through a Zod-based parsing layer compatible with backend schemas, ensuring unified error handling across both frontend and backend systems.

Can I avoid manual interface typing when synchronizing frontend contracts with OpenAPI changes?▼

Avoid manual interface typing by deriving all TypeScript definitions directly from OpenAPI schemas and backend changes, ensuring frontend types stay locked to the backend openapi.json automatically.

What tools do I need to run end-to-end OpenAPI type generation and synchronization?▼

Run end-to-end OpenAPI type generation using a toolchain including openapi-typescript, openapi-fetch, and zod, alongside the openapi.json input and references documentation to complete the synchronization workflow.

Does openapi-typescript work with React Query for automatic type-safe API hook generation?▼

openapi-typescript works with React Query by generating TypeScript types from openapi.json, which are then wrapped with openapi-fetch inside useQuery and useMutation hooks for type-safe API requests.

What is the best way to handle unified API errors across Zod and Pydantic in a TypeScript frontend?▼

Handle unified API errors across Zod and Pydantic by implementing a Zod-based parsing layer that normalizes backend error schemas, keeping frontend error handling synchronized with backend validation models.