frontend-query-mutation
Frontend Query & Mutation
Intent
- Keep contract as the single source of truth in
web/contract/*. - Prefer contract-shaped
queryOptions()andmutationOptions(). - Keep default cache behavior with
consoleQuery/marketplaceQuerysetup, and keep business orchestration in feature vertical hooks when direct contract calls are not enough. - Treat
web/service/use-*query or mutation wrappers as legacy migration targets, not the preferred destination. - Keep abstractions minimal to preserve TypeScript inference.
Workflow
- Identify the change surface.
- Read
references/contract-patterns.mdfor contract files, router composition, client helpers, and query or mutation call-site shape. - Read
references/runtime-rules.mdfor conditional queries, default options, cache updates/invalidation, error handling, and legacy migrations. - Read both references when a task spans contract shape and runtime behavior.
- Read
- Implement the smallest abstraction that fits the task.
- Default to direct
useQuery(...)oruseMutation(...)calls with oRPC helpers at the call site. - Extract a small shared query helper only when multiple call sites share the same extra options.
- Default to direct
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.
757orpc-contract-first
Guide for implementing oRPC contract-first API patterns in Dify frontend. Trigger when creating or updating contracts in web/contract, wiring router composition, integrating TanStack Query with typed contracts, migrating legacy service calls to oRPC, or deciding whether to call queryOptions directly vs extracting a helper or use-* hook in web/service.
717web-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".
690