AgentSkillsCN

frontend-patterns

结合 ORPC 与 React Query，运用 React 模式进行数据获取、表单处理、状态变更及状态管理。适用于构建页面、表单或数据组件时使用。

SKILL.md
--- frontmatter
name: frontend-patterns
description: React patterns for data fetching, forms, mutations, and state management with ORPC + React Query. Use when building pages, forms, or data components.
globs:
  - src/app/**/*.tsx
  - src/components/**/*.tsx
alwaysApply: false

Frontend Patterns

Use these patterns when building React components that interact with the API.

When to Use

  • •Creating pages that fetch data
  • •Building forms that mutate data
  • •Implementing optimistic updates
  • •Managing loading/error states

Key Files

  • •src/utils/orpc.ts - ORPC client and query utilities
  • •src/components/providers.tsx - QueryClient provider setup
  • •src/components/ui/ - UI component library

Pattern Files