skills.rest
mr-phariyawit
mr-phariyawitCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/mr-phariyawit/startup --skill orpc-contract-first-mr-phariyawit
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
YFGaiaYFGaia
2.2k

orpc-contract-first

Automate oRPC contract-first API setup in the Dify frontend.

Official
Advanced
EthanALXEthanALX

React API Layer Architecture

Standardize React data fetching with centralized HTTP clients and typed hooks.

Community
Advanced
ananddtyagiananddtyagi
687

API Contract Sync Manager

Validate API contracts against backend implementations and generate TypeScript clients.

Community
Advanced
furrycolombia-sysfurrycolombia-sys
1

graphql

Enforce typed GraphQL contracts to prevent data over-fetching and under-fetching.

Community
Intermediate