Reviews React/Vue component architecture, state, and hooks. Use when junior builds components, forms, modals, uses useState, useEffect, adds state, or asks "is this good React".
"A component should do ONE thing well. If you're describing it with 'and', split it."
Activate this skill when reviewing:
❌ UserDashboard.tsx (1000 lines)
- fetches data, manages state, renders UI, handles routing
✅ Split into:
- UserDashboardPage.tsx (container)
- UserStats.tsx (presentation)
- UserActivity.tsx (presentation)
- useUserData.ts (hook)
❌ return <div>{users.filter(u => u.active).map(u => ...)}</div>
✅ const activeUsers = useMemo(() => users.filter(u => u.active), [users]);
return <div>{activeUsers.map(u => ...)}</div>
❌ <App user={user}>
<Layout user={user}>
<Main user={user}>
<Widget user={user} />
✅ const user = useUser(); // in Widget.tsx
❌ <Button primary secondary large small disabled loading />
✅ <Button variant="primary" size="large" state="loading" />
Ask the junior these questions instead of giving answers:
See detailed patterns in:
/standards/frontend/component-architecture.md| Flag | Question to Ask |
|---|---|
| File > 200 lines | "Can we split this into smaller pieces?" |
| > 5 useState calls | "Should some of this state be lifted or combined?" |
| useEffect with [] deps but uses external values | "Are we missing dependencies?" |
| Direct DOM manipulation | "Is there a React way to do this?" |
| Inline styles everywhere | "Should we use a consistent styling approach?" |
