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.
Install with Tessl CLI
npx tessl i github:langgenius/dify --skill orpc-contract-firstOverall
score
81%
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillEvaluation — 100%
↑ 2.00xAgent success when using this skill
Validation for skill structure
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.tsCreate 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>If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.