// WRONG - return before hooks
if (!isAuthenticated) {
  return <Login />;  // ❌ Hook call below is unreachable sometimes
}
const user = useUser();  // VIOLATION

// RIGHT - hooks always execute
const user = useUser();
if (!isAuthenticated) {
  return <Login />;
}

// WRONG - missing dependency
const context = useContext(MyContext);
useEffect(() => {
  doSomething(context);
}, []);  // ❌ Missing `context`

// RIGHT - include all dependencies
useEffect(() => {
  doSomething(context);
}, [context]);

// WRONG - context object changes on every render
const Provider = ({ children }) => {
  const value = { user: currentUser };  // New object every render
  return (
    <MyContext.Provider value={value}>  // ❌ Causes infinite loop
      {children}
    </MyContext.Provider>
  );
};

// RIGHT - memoize context value
const Provider = ({ children }) => {
  const value = useMemo(() => ({ user: currentUser }), [currentUser]);
  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

./scripts/log-skill.sh react-hooks