| name | frontend-fundamentals |
| description | 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". |
Frontend Fundamentals Review
"A component should do ONE thing well. If you're describing it with 'and', split it."
When to Apply
Activate this skill when reviewing:
- React/Vue/Svelte components
- UI rendering logic
- State management code
- CSS/styling decisions
- Client-side routing
Review Checklist
Component Architecture
State Management
Performance
Accessibility
Common Mistakes (Anti-Patterns)
1. God Components
❌ 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)
2. Logic in Render
❌ 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>
3. Prop Drilling
❌ <App user={user}>
<Layout user={user}>
<Main user={user}>
<Widget user={user} />
✅ const user = useUser(); // in Widget.tsx
4. Boolean Prop Soup
❌ <Button primary secondary large small disabled loading />
✅ <Button variant="primary" size="large" state="loading" />
Socratic Questions
Ask the junior these questions instead of giving answers:
- Architecture: "What is the ONE job of this component?"
- Splitting: "If I asked you to use just the header part elsewhere, could you?"
- State: "Who needs this data? Should it live here or higher up?"
- Performance: "What happens when the parent re-renders?"
- Complexity: "Could a new developer understand this in 5 minutes?"
Standards Reference
See detailed patterns in:
/standards/frontend/component-architecture.md
Red Flags to Call Out
| 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?" |
