types

urjitbhatia's avatarfrom urjitbhatia

TypeScript type generation and synchronization between backend OpenAPI and frontend. Auto-generates types from /openapi.json using openapi-typescript. Critical after any API change.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 26, 2025
[API Helpers]

When & Why to Use This Skill

This Claude skill automates the generation and synchronization of TypeScript types from backend OpenAPI specifications. It ensures end-to-end type safety by automatically updating frontend definitions whenever the API changes, significantly reducing manual effort and preventing runtime errors caused by out-of-sync schemas.

Use Cases

  • Automated Type Sync: Automatically regenerate and update TypeScript interfaces in the frontend project whenever the backend openapi.json is modified.
  • API Integration: Quickly generate accurate types for new API endpoints to enable IDE auto-completion and compile-time error checking for developers.
  • Consistency Maintenance: Resolve 'out-of-sync' errors between frontend expectations and backend reality by auditing and re-syncing types after API version updates.
  • Documentation to Code: Seamlessly convert complex OpenAPI documentation into usable TypeScript patterns and usage examples to streamline the development workflow.
nametypes
descriptionTypeScript type generation and synchronization between backend OpenAPI and frontend. Auto-generates types from /openapi.json using openapi-typescript. Critical after any API change.

Skill: Types

Type generation and synchronization between frontend and backend.

Routing Logic

Analyze the user's intent and route to the appropriate workflow:

Generate Types → workflows/generate.md

  • "Generate types"
  • "Update frontend types"
  • "Sync types from backend"
  • "Regenerate API types"

Type Usage → workflows/usage.md

  • "How do I use the generated types?"
  • "Import types for [endpoint]"
  • "Type the API response"

Troubleshooting → workflows/troubleshoot.md

  • "Types are out of sync"
  • "TypeScript error with API"
  • "Type doesn't match response"

Configuration Questions → context/config.md

  • "Where are types generated?"
  • "How does type generation work?"

Workflows

  • workflows/generate.md - Generate TypeScript types from OpenAPI
  • workflows/usage.md - How to use generated types
  • workflows/troubleshoot.md - Fix type issues

Context

  • context/config.md - Type generation configuration
  • context/patterns.md - Type usage patterns