📝 docs: add agent code style guidance (#15434)

* 📝 docs: add code style guidance for hook extraction and file splitting

* 📝 docs: tighten file-splitting guidance

* 📝 docs: clarify agent guidance wording

.agents/skills/react/SKILL.md

@@ -53,6 +53,10 @@ For Modal specifically, see the dedicated **modal** skill — use the imperative
 | Layout       | Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow                             |
 | Navigation   | Burger, Menu, SideNav, Tabs                                                           |
 
+## State
+
+When a feature component manages more than 3 pieces of state (`useState`/`useReducer`/derived state), extract the logic into a custom hook (e.g. `useXxx`). Keep the component focused on rendering — the hook holds state and handlers, so logic can be unit-tested without rendering the component.
+
 ## Layout
 
 Use `Flexbox` and `Center` from `@lobehub/ui`. See `references/layout-kit.md` for full props and examples.