langgenius/dify▌

Contract-first API patterns for Dify frontend using oRPC with TanStack Query integration. \n \n Define contracts in web/contract/* as single source of truth; consume via useQuery(consoleQuery.xxx.queryOptions(...)) at call sites for 1:1 endpoint mappings \n Use .key() for partial matching in invalidation/refetch, .queryKey() for specific query identity, and .mutationKey() for mutation defaults or status filtering \n Extract queryOptions helpers only when 3+ call sites share identical options; cr

Use this skill whenever the user asks to review, analyze, or improve backend code (e.g., .py) under the api/ directory. Supports the following review modes:

Automated frontend code review against a multi-category checklist, supporting both pending-change and targeted file reviews. \n \n Triggers on user requests to review frontend files ( .tsx , .ts , .js ) and applies a canonical checklist across Code Quality, Performance, and Business Logic categories \n Supports two review modes: pending-change review for staged/working-tree files before commit, and file-targeted review for specific named files \n Flags violations with urgency metadata (Urgent vs

Audit UI code against Web Interface Guidelines for compliance and best practices. \n \n Fetches the latest guidelines from Vercel Labs before each review to ensure current rule compliance \n Accepts file paths or patterns as arguments; prompts for files if none specified \n Outputs findings in concise file:line format for quick identification of violations \n Covers accessibility, design patterns, and UX best practices as defined in the guidelines repository \n

45 performance optimization rules for React and Next.js, organized by impact from critical waterfalls and bundle size down to advanced patterns. \n \n Covers 8 rule categories prioritized by performance impact: eliminating waterfalls, bundle optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns \n Each rule includes explanations, incorrect/correct code examples, and context to guide automated

$22

Refactor high-complexity React components in Dify frontend with structured patterns and incremental extraction. \n \n Targets components with complexity > 50 or line count > 300; use pnpm analyze-component --json to measure and pnpm refactor-component to generate refactoring prompts \n Six core patterns: custom hooks for state/logic, sub-components for UI sections, simplified conditionals, API/data extraction, modal management, and form logic \n Dify-specific conventions for context providers, w

Generate Vitest and React Testing Library tests for Dify frontend components, hooks, and utilities. \n \n Covers component rendering, props validation, user interactions, edge cases, and async operations with Vitest 4.0.16 and React Testing Library 16.0 \n Enforces incremental, one-file-at-a-time testing workflow for multi-file directories; process by complexity (utilities → hooks → simple components → complex components → integration) \n Requires integration-first approach: import real project