orpc-contract-first

Implement oRPC contract-first API patterns with typed client hooks.

Updated Jan 9, 2026

Search Tags:#typescript #frontend #contract-first #api-patterns #orpc #web-service

Ready to run

npx skills add https://github.com/mr-phariyawit/startup --skill orpc-contract-first-mr-phariyawit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: orpc-contract-first
Source: https://github.com/mr-phariyawit/startup/tree/main/.agent/skills/orpc-contract-first
Command: npx skills add https://github.com/mr-phariyawit/startup --skill orpc-contract-first-mr-phariyawit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to align API usage with backend contracts, leading to integration drift and inconsistent data shapes. This guide provides a structured approach to implementing oRPC contract-first patterns to ensure typed contracts, predictable endpoints, and seamless client integration.

Core Features & Use Cases

Establishes a contract-first workflow for frontend API layers, guiding contract creation, router wiring, and typed hooks.
Supports web/contract and web/service directories to keep API surface aligned with backend definitions.
Use Case: when adding a new domain, define the contract in web/contract/console, register it in web/contract/router.ts, and build hooks in web/service/use-{domain}.ts for typed data fetching.

Quick Start

Create a new contract under web/contract/console and wire it into the router and hooks as shown.

Frequently Asked Questions about orpc-contract-first

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

FAQPage Schema

How do I enforce contract-first API patterns in a TypeScript frontend?▼

Contract-first API patterns prevent frontend-backend integration drift by defining typed API contracts before implementation. This approach standardizes data shapes, ensures predictable endpoints, and provides seamless typed client integration across web service layers.

What is the workflow for adding a new API domain using oRPC contract-first patterns?▼

To set up a contract-first API workflow, create typed contracts in a web/contract directory, register them in a central router, and build typed hooks in web/service. This structured workflow ensures typed contracts, predictable endpoints, and seamless client integration.

How do I prevent API integration drift between frontend and backend?▼

Preventing API integration drift involves using a contract-first approach where frontend API usage aligns strictly with backend definitions. By defining typed contracts and registering them in a router, teams standardize data shapes and eliminate integration mismatches.

Can I use oRPC contract-first patterns to generate typed client hooks?▼

Yes, oRPC contract-first patterns support creating typed hooks for API calls. By defining contracts and wiring the router, you build typed hooks in the service layer to enable fully typed data fetching and seamless client integration.

Does contract-first API development require separating contracts and service layers?▼

Contract-first API development typically separates contracts and service layers into web/contract and web/service directories. Contracts and router wiring reside in the contract layer, while typed hooks for client integration are built in the service layer.