skills.rest
Jason-hub-star
Jason-hub-starCOMMUNITY
Explore all skills by this author →
GitHub

be-fe-model-sync

Synchronize backend model changes to frontend TypeScript types and API clients.

Updated Feb 10, 2026
Search Tags:#typescript#frontend#pydantic#backend#types#api-client#model-sync
One-click install
npx skills add https://github.com/Jason-hub-star/GameLab --skill be-fe-model-sync-jason-hub-star
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: be-fe-model-sync
Source: https://github.com/Jason-hub-star/GameLab/tree/main/.claude/skills/gamelab-guide/mirror/be-fe-model-sync
Command: npx skills add https://github.com/Jason-hub-star/GameLab --skill be-fe-model-sync-jason-hub-star

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Backend and frontend codebases often drift when models change: BE schemas evolve, FE types and API clients lag, causing runtime errors and inconsistent data contracts. This Skill automates cross-language synchronization so BE changes are reflected in FE, ensuring alignment across Pydantic models, TypeScript interfaces, and export barrels.

Core Features & Use Cases

  • Automated synchronization of backend model changes to frontend type definitions and API client layers.
  • Consistent naming and casing (snake_case BE ➜ camelCase FE) with automatic aliasing.
  • Validation of re-exports and barrel structure to maintain a clean, import-friendly API surface.
  • Use Case: After adding a new field to backend/models/{domain}.py, FE types and API client calls stay up-to-date without manual edits.

Quick Start

Trigger this skill after editing backend/models to automatically mirror changes in FE types, API clients, and re-exports.

Frequently Asked Questions about be-fe-model-sync

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

FAQPage Schema
What is the best way to prevent data contract drift between Python and TypeScript?▼

Automated model synchronization maps snake_case backend Pydantic fields to camelCase frontend TypeScript interfaces, keeping API clients updated. This prevents runtime errors and data contract drift caused by manual edits when backend schemas evolve.

Do I need to manually update API client stubs when backend schemas change?▼

Mapping snake_case backend fields to camelCase frontend interfaces is handled automatically through aliasing during synchronization. This ensures consistent naming conventions across Pydantic models and TypeScript types without manual transformation.

When should I trigger backend and frontend model synchronization?▼

Yes, API client stubs are updated automatically alongside frontend type definitions when you modify backend domain schemas. This ensures API client calls reflect new fields or schema changes without requiring manual edits.

What tests are required after synchronizing backend and frontend models?▼

Trigger model synchronization after editing backend/app/models/*.py or domain schemas. The process automatically mirrors these backend changes to frontend types, API client stubs, and barrel exports to maintain alignment.

Related Skills

Explore More Software Engineering Skills→
liwooliwoo
16

goravel-type-check

Verify type consistency between Go structs and TypeScript interfaces.

Community
Advanced
ihj04982ihj04982

build-fix

Resolve TypeScript, compilation, and build errors with minimal diffs.

Community
Intermediate
kimjuyoung1127kimjuyoung1127

fullstack-mirror-arch

Map backend models and frontend types to a 1:1 mirror structure.

Community
Advanced
manastalukdarmanastalukdar
1

types-generate

Generate TypeScript types from JSON schemas, OpenAPI, GraphQL, and database definitions.

Community
Advanced