From a5ab99f055072de046451fc8e517b80359e5c8eb Mon Sep 17 00:00:00 2001
From: YuTengjing <ytj2713151713@gmail.com>
Date: Wed, 3 Jun 2026 18:45:40 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20agent=20code=20sty?=
 =?UTF-8?q?le=20guidance=20(#15434)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 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 | 4 ++++
 AGENTS.md                     | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/.agents/skills/react/SKILL.md b/.agents/skills/react/SKILL.md
index c750fe96ac..b68b378933 100644
--- a/.agents/skills/react/SKILL.md
+++ b/.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.
diff --git a/AGENTS.md b/AGENTS.md
index ffd256e92f..39ff598430 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -124,6 +124,10 @@ cd packages/database && bunx vitest run --silent='passed-only' '[file]'
 - For dev preview: translate `locales/zh-CN/` and `locales/en-US/`
 - `pnpm i18n` is slow; run it manually when locale keys need updating (e.g. before opening a PR).
 
+### Code Style
+
+- When a single file grows beyond \~800 lines, consider splitting it into multiple files (extract sub-components, hooks, helpers, or types). Smaller, focused files are friendly to humans and agents.
+
 ### Code Review
 
 Before reviewing a PR / diff / branch change, read the **review-checklist** skill (`.agents/skills/review-checklist/SKILL.md`) — it lists the recurring mistakes specific to this codebase.