From 91abfda3b24a8d7641c7584fb1b81db4031533e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Fri, 24 Oct 2025 18:57:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(agents):=20=E4=BC=98=E5=8C=96=20NGrid=20?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E5=B8=83=E5=B1=80=E4=BD=BF=E7=94=A8=E5=BB=BA?=
 =?UTF-8?q?=E8=AE=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/AGENTS.md b/AGENTS.md
index d284de4..61b2c6b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -26,12 +26,13 @@ Multiple auto-import systems are active:
   - ❌ Avoid: `<component :is="`icon-${name}`" />`
   - ✅ Use: `<icon-foo v-if="condition" />` with `v-if`/`v-else-if`/`v-else` directives
 - **In TypeScript/TSX files**: Auto-import does NOT work. You must explicitly import icons using the `~icons/` prefix:
+
   ```tsx
   import IconMenuRounded from '~icons/material-symbols/menu-rounded';
 
   // Then use in JSX/TSX
   const menuOption = {
-    icon: () => <IconMenuRounded />
+    icon: () => <IconMenuRounded />,
   };
   ```
 
@@ -40,6 +41,26 @@ Multiple auto-import systems are active:
 Project has multiple UI frameworks configured:
 
 - **Naive UI**
+  - **Form Layout**: When using `NGrid` for form layouts, prefer `NFormItemGi` over nesting `NFormItem` inside `NGridItem` for more concise code.
+
+    ```vue
+    <!-- ❌ Avoid: Verbose nesting -->
+    <NGrid :cols="4">
+      <NGridItem>
+        <NFormItem label="Username">
+          <NInput />
+        </NFormItem>
+      </NGridItem>
+    </NGrid>
+
+    <!-- ✅ Use: Concise and direct -->
+    <NGrid :cols="4">
+      <NFormItemGi label="Username">
+        <NInput />
+      </NFormItemGi>
+    </NGrid>
+    ```
+
 - **PrimeVue**:
 
 ### Styling