skills.rest
CloudyWing
CloudyWingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

openapi-client

Generate TypeScript API clients and types from OpenAPI specifications.

Updated Mar 1, 2026
Search Tags:#typescript#openapi#error-handling#code-generation#api-client#axios#type-synchronization
One-click install
npx skills add https://github.com/CloudyWing/ai-dotfiles --skill openapi-client
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: openapi-client
Source: https://github.com/CloudyWing/ai-dotfiles/tree/main/skills/openapi-client
Command: npx skills add https://github.com/CloudyWing/ai-dotfiles --skill openapi-client

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents manual drift between backend API contracts and frontend code by establishing a reproducible workflow to generate TypeScript types and client wrappers from OpenAPI specifications, reducing runtime type errors and inconsistent request handling.

Core Features & Use Cases

  • Code-first generation: Prefer generating frontend types and clients from OpenAPI/Swagger specs to ensure exact correspondence with backend DTOs and to enable CI-friendly artifacts.
  • Axios wrapper conventions: Centralize HTTP logic in a shared apiClient instance with interceptors for token injection and global error handling, keeping API modules pure and side-effect free.
  • Domain-organized modules: Organize one API module per domain with clear input and return types, unwrapped from transport-layer response shapes for easier consumption.
  • Error handling and validation: Normalize ProblemDetails-style errors, provide utilities to extract validation errors and user messages, and surface friendly messages to UI layers.
  • Cancellation and uploads: Support request cancellation patterns for rapid interactions and consistent multipart uploads with progress reporting.
  • Use Case: Keep generated type files under version control, run generation during CI so frontend builds never depend on a running backend, and consistently handle authentication expiry and validation errors across the app.

Quick Start

Generate TypeScript types from the backend OpenAPI spec and update the frontend API clients while using a centralized apiClient wrapper for requests and error handling.

Frequently Asked Questions about openapi-client

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

FAQPage Schema
How do I generate TypeScript types from an OpenAPI specification?▼

To generate TypeScript types from an OpenAPI specification, you use a code-first generation workflow that creates type-safe frontend API clients and synchronizes types directly from backend OpenAPI or Swagger definitions to prevent manual contract drift.

What is the best way to handle API validation errors in Axios?▼

The best way to handle API validation errors in Axios is to normalize ProblemDetails-style errors within centralized Axios wrapper interceptors, extracting validation errors and user messages to surface friendly notifications to the UI layer.

How do I structure frontend API modules for domain organization?▼

To structure frontend API modules for domain organization, you create one API module per domain with clear input and return types, unwrapping transport-layer response shapes for easier consumption while keeping modules pure and side-effect free.

Can I generate frontend API clients in CI without a running backend?▼

Yes, you can generate frontend API clients in CI without a running backend by keeping generated type files under version control and running the generation process during continuous integration to produce CI-friendly, versioned type artifacts.

How do I support request cancellation and file uploads with Axios?▼

To support request cancellation and file uploads with Axios, implement request cancellation patterns for rapid interactions and use consistent multipart upload conventions with progress reporting centralized in a shared apiClient instance.

Why do I need type synchronization between backend contracts and frontend code?▼

You need type synchronization between backend contracts and frontend code to prevent manual drift between API specifications and TypeScript types, reducing runtime type errors and inconsistent request handling across the application.

Related Skills

Explore More Software Engineering Skills→
AZANIRAZANIR
2

qa-api-contract-curator

Generate OpenAPI 3.x specifications and detect breaking changes from API sources.

Community
Advanced
FlorianRiquelmeFlorianRiquelme

Global Error Handling

Implement global error handling with retry logic and user-friendly messages.

Community
Basic
remiverdiesenremiverdiesen
6

ark-sdk-development

Convert CRD YAML to OpenAPI schemas and generate Python models.

Community
Advanced
Sumeet138Sumeet138
1

openapi-spec-generation

Generate and validate OpenAPI 3.1 specifications from code and design inputs.

Community
Advanced