Cursor rule

1> This file extends [common/patterns.md](../common/patterns.md) with web-specific patterns.
2 
3# Web Patterns
4 
5## Component Composition
6 
7### Compound Components
8 
9Use compound components when related UI shares state and interaction semantics:
10 
11```tsx
12<Tabs defaultValue="overview">
13  <Tabs.List>
14    <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
15    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
16  </Tabs.List>
17  <Tabs.Content value="overview">...</Tabs.Content>
18  <Tabs.Content value="settings">...</Tabs.Content>
19</Tabs>
20```
21 
22- Parent owns state
23- Children consume via context
24- Prefer this over prop drilling for complex widgets
25 
26### Render Props / Slots
27 
28- Use render props or slot patterns when behavior is shared but markup must vary
29- Keep keyboard handling, ARIA, and focus logic in the headless layer
30 
31### Container / Presentational Split
32 
33- Container components own data loading and side effects
34- Presentational components receive props and render UI
35- Presentational components should stay pure
36 
37## State Management
38 
39Treat these separately:
40 
41| Concern | Tooling |
42|---------|---------|
43| Server state | TanStack Query, SWR, tRPC |
44| Client state | Zustand, Jotai, signals |
45| URL state | search params, route segments |
46| Form state | React Hook Form or equivalent |
47 
48- Do not duplicate server state into client stores
49- Derive values instead of storing redundant computed state
50 
51## URL As State
52 
53Persist shareable state in the URL:
54- filters
55- sort order
56- pagination
57- active tab
58- search query
59 
60## Data Fetching
61 
62### Stale-While-Revalidate
63 
64- Return cached data immediately
65- Revalidate in the background
66- Prefer existing libraries instead of rolling this by hand
67 
68### Optimistic Updates
69 
70- Snapshot current state
71- Apply optimistic update
72- Roll back on failure
73- Emit visible error feedback when rolling back
74 
75### Parallel Loading
76 
77- Fetch independent data in parallel
78- Avoid parent-child request waterfalls
79- Prefetch likely next routes or states when justified
80