Guide for implementing oRPC contract-first API patterns in Dify frontend. Triggers when creating new API contracts, adding service endpoints, integrating TanStack Query with typed contracts, or migrating legacy service calls to oRPC. Use for all API layer work in web/contract and web/service directories.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i langgenius/dify/.agents/skills/orpc-contract-firstMethod 2 - openskills (supports sync & update)
npx openskills install langgenius/difyAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
No setup needed. Let our cloud agents run this skill for you.
Select Provider
Select Model
Best for coding tasks
No setup required
web/contract/
├── base.ts # Base contract (inputStructure: 'detailed')
├── router.ts # Router composition & type exports
├── marketplace.ts # Marketplace contracts
└── console/ # Console contracts by domain
├── system.ts
└── billing.ts
Create contract in web/contract/console/{domain}.ts
base from ../base and type from @orpc/contractpath, method, input, outputRegister in router at web/contract/router.ts
billing: { invoices, bindPartnerStack }Create hooks in web/service/use-{domain}.ts
consoleQuery.{group}.{contract}.queryKey() for query keysconsoleClient.{group}.{contract}() for API calls{ params, query?, body? } format{paramName} in path, match in params object/billing/* → billing: {})@/types/, use type<T>() helperexport type ConsoleInputs = InferContractRouterInputs<typeof consoleRouterContract>