Copilot instructions

1---
2applyTo: "apps/studio/**"
3---
4 
5# React Composition Patterns Review Rules
6 
7All comments are **advisory**.
8 
9## Core Principle
10 
11Avoid boolean prop proliferation. Use composition (compound components, explicit variants, children) instead of boolean flags to customize behavior.
12 
13## When to Flag
14 
15### 1. Boolean Prop Proliferation (HIGH)
16 
17Flag components accumulating boolean props like `isThread`, `isEditing`, `showAttachments`. Each boolean doubles the state space.
18 
19```tsx
20// BAD — unclear intent, combinatorial explosion
21<Composer isThread isDMThread isEditing isForwarding={false} />
22 
23// GOOD — self-documenting variants
24<ThreadComposer channelId="abc" />
25<EditMessageComposer messageId="xyz" />
26```
27 
28### 2. Render Props Instead of Children (MEDIUM)
29 
30Flag `renderX` callback props when `children` composition would work.
31 
32```tsx
33// BAD — render prop for structure
34<Composer renderFooter={() => <F />} />
35 
36// GOOD — compound component
37<Composer.Footer>
38  <Composer.Formatting />
39  <Composer.Emojis />
40</Composer.Footer>
41```
42 
43### 3. UI Coupled to State Implementation (MEDIUM)
44 
45Flag UI components calling specific state hooks like `useGlobalChannelState()` directly. The provider should own the state implementation; UI should only use a generic context interface.
46 
47```tsx
48// BAD — UI knows HOW state is managed
49const state = useGlobalChannelState(channelId)
50 
51// GOOD — provider owns implementation, UI uses context
52<ChannelProvider channelId={channelId}>
53  <Composer /> {/* reads from context */}
54</ChannelProvider>
55```
56 
57### 4. State Trapped in Child Components (MEDIUM)
58 
59Flag state that siblings or dialogs need but can't access without prop drilling or refs. Lift it into a provider.
60 
61```tsx
62// BAD — sibling can't access state
63function ForwardComposer() {
64  const [state, setState] = useState(init)
65}
66// ForwardButton is a sibling and can't reach state
67 
68// GOOD — provider at shared ancestor
69<ForwardMessageProvider>
70  <Composer />      {/* can access state */}
71  <ForwardButton /> {/* can also access state */}
72</ForwardMessageProvider>
73```
74 
75### 5. React 19 API Updates
76 
77Flag `forwardRef` and `useContext` in new code — use `ref` as a regular prop and `use()` instead.
78 
79```tsx
80// BAD
81const Input = forwardRef((props, ref) => <input ref={ref} />)
82const value = useContext(MyContext)
83 
84// GOOD
85function Input({ ref, ...props }) { return <input ref={ref} /> }
86const value = use(MyContext)
87```
88 
89## Key Principle
90 
91Lift state → Compose UI → Inject via generic context → No boolean prop proliferation.
92 
93Canonical standard: `.claude/skills/vercel-composition-patterns/SKILL.md`
94