Frontend Patterns

React patterns for data fetching, forms, mutations, and state management with ORPC + React Query. Use when building pages, forms, or data components.

grmkris Updated

File contents

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

  • data-fetching.md - Query and mutation patterns
  • forms.md - Form patterns with validation
  • optimistic.md - Optimistic update patterns

grmkris/agent-next-app/tree/main/.claude/skills/frontend-patterns commit 2e629e9a46

Frequently asked questions

npx skillmds@latest add grmkris/frontend-patterns