orpc-contract-first
Contract-first API patterns for Dify frontend using oRPC with TanStack Query integration.
- Define contracts in
web/contract/*as single source of truth; consume viauseQuery(consoleQuery.xxx.queryOptions(...))at call sites for 1:1 endpoint mappings - Use
.key()for partial matching in invalidation/refetch,.queryKey()for specific query identity, and.mutationKey()for mutation defaults or status filtering - Extract queryOptions helpers only when 3+ call sites share identical options; create
use-*hooks only for multi-query orchestration or domain-level derived state - Follow input structure
{ params, query?, body? }in contracts; omit.input(...)for GET endpoints without input; group router nesting by API prefix
oRPC Contract-First Development
Intent
- Keep contract as single source of truth in
web/contract/*. - Default query usage: call-site
useQuery(consoleQuery|marketplaceQuery.xxx.queryOptions(...))when endpoint behavior maps 1:1 to the contract. - Keep abstractions minimal and preserve TypeScript inference.
Minimal Structure
web/contract/
├── base.ts
├── router.ts
├── marketplace.ts
└── console/
├── billing.ts
└── ...other domains
web/service/client.ts
More from langgenius/dify
frontend-code-review
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
7.4Kcomponent-refactoring
Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
3.3Kfrontend-testing
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
2.3Kskill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
757web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
690backend-code-review
Review backend code for quality, security, maintainability, and best practices based on established checklist rules. Use when the user requests a review, analysis, or improvement of backend files (e.g., `.py`) under the `api/` directory. Do NOT use for frontend files (e.g., `.tsx`, `.ts`, `.js`). Supports pending-change review, code snippets review, and file-focused review.
688