Web React Skill

Version: 1.0 Stack: React (vanilla) + Apollo Client

React gives you infinite freedom to structure components, which means infinite freedom to create a mess. Components grow to 500 lines because "it all goes together." Business logic ends up in JSX because "it's just one function." Server state gets duplicated in useState because "I need to filter it." Every shortcut creates a component that's hard to test, hard to reuse, and hard for the next person to modify.

Small components with extracted hooks and Apollo-managed server state produce code where each piece has one job and one place to find it. No framework abstractions — just clean React.

Core Principles

1. Components Stay Small — Under 200 lines. If larger, split it.
2. Hooks for Logic — Extract business logic into custom hooks.
3. Apollo for Server State — Don't duplicate server state in local state.
4. Props Down, Events Up — Clear data flow, no prop drilling beyond 2 levels.
5. Colocation — Keep related code together (component + styles + tests).