api-contract-sync
Automatically detect and synchronize API contracts between backend and frontend when data structures, endpoints, or message formats change. Ensures type safety and prevents runtime errors from contract mismatches.
npx skills add majiayu000/claude-skill-registry --skill api-contract-sync --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
--- name: api-contract-sync description: Use this skill when backend API contracts change and frontend types need synchronization. Triggers on: Pydantic model changes, REST endpoint updates, WebSocket message formats, or GraphQL schema modifications. Dynamically detects contract type from context. NOT for unrelated type definitions or internal backend-only changes. --- # API Contract Sync ## Overview Automatically detect and synchronize API contracts between backend and frontend when data structures, endpoints, or message formats change. Ensures type safety and prevents runtime errors from contract mismatches. ## Core Principle: Context-Driven Detection This skill **does not assume** Pydantic ↔ TypeScript. It: 1. **Detects contract type** from project context (REST, WebSocket, GraphQL, gRPC) 2. **Identifies source of truth** (backend models, OpenAPI spec, GraphQL schema) 3. **Determines target** (TypeScript types, Zod schemas, client SDKs) 4. **Syncs appropriately** based on detected patterns ## When to Use Invoke this skill when: - **Backend model changes**: Pydantic models, SQLAlchemy models, dataclasses modified - **Endpoint modifications**: New fields, renamed properties, chang
- Overview
- Core Principle: Context-Driven Detection
- When to Use
- Contract Detection Workflow
- Step 1: Identify Contract Type
- Step 2: Extract Backend Contract
- Step 3: Generate Frontend Types
- Step 4: Validate Synchronization
- Step 5: Handle Mismatches
- Contract Sync Patterns
- Pattern 1: Pydantic Models → TypeScript (Direct)
- Pattern 2: OpenAPI → TypeScript (Automated)
- Pattern 3: GraphQL Schema → TypeScript (Codegen)
- Pattern 4: WebSocket Messages → Discriminated Unions
Use GraphQL Code Generator npx graphql-codegen --config codegen.yml Use OpenAPI TypeScript generator npx openapi-typescript http://localhost:8000/openapi.json -o frontend/types/api.ts npm run generate:api git add frontend/types/
What does the api-contract-sync skill do?
Automatically detect and synchronize API contracts between backend and frontend when data structures, endpoints, or message formats change. Ensures type safety and prevents runtime errors from contract mismatches.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill api-contract-sync --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.