Developers building Dify frontend can use a contract-first approach to keep APIs consistent. The contract acts as a single source of truth in the web/contract folder. This method preserves TypeScript type inference and reduces errors.
The core workflow starts with defining a contract in the right domain file. You then register it in the router. Finally you consume the contract from UI call sites using TanStack Query. This keeps everything aligned.
There are clear rules for when to use queryOptions directly and when to extract helpers. Avoid creating thin use-* hooks for a single endpoint. This skill helps you decide the best pattern.
Global
mkdir -p ~/.claude/skills/orpc-contract-firstProject
mkdir -p .claude/skills/orpc-contract-firstSource Repository
Lark Openapi Explorerlarksuite/cli
Discover and call native Lark OpenAPIs not covered by existing CLI commands
Supabasesupabase/agent-skills
Add a database auth and APIs to your app with Supabase
Design An Interfacemattpocock/skills
Generate many different interface designs and pick the best one
Convex Quickstartget-convex/agent-skills
Rapidly set up a Convex backend for new or existing apps with one command
Convex Create Componentget-convex/agent-skills
Create reusable Convex components with isolated tables and clear APIs
Convexget-convex/agent-skills
Use this router to find the perfect Convex skill for your task
Firebase Remote Config Basicsfirebase/agent-skills
Change your app's behavior instantly without a new update
Notion Apiintellectronica/agent-skills
Automate your Notion workspace with simple API calls