# Frontend Patterns

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

- Skill: `grmkris/frontend-patterns` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add grmkris/frontend-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/grmkris/frontend-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: grmkris (https://skillmd.com/u/grmkris)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/grmkris/frontend-patterns

---


# 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](data-fetching.md) - Query and mutation patterns
- [forms.md](forms.md) - Form patterns with validation
- [optimistic.md](optimistic.md) - Optimistic update patterns