diff --git a/.agent/skills/ui-consistency/SKILL.md b/.agent/skills/ui-consistency/SKILL.md
index 11b3959..47440d8 100644
--- a/.agent/skills/ui-consistency/SKILL.md
+++ b/.agent/skills/ui-consistency/SKILL.md
@@ -706,6 +706,32 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
 
 ---
 
+## 11.4 對話框 (Dialog) 滾動與佈局
+
+當對話框內容可能超出螢幕高度時（如長表單或詳細資料），**請勿使用 `ScrollArea`**，應直接在 `DialogContent` 使用原生的 `overflow-y-auto`。
+
+**原因**：`ScrollArea` 在 Flex 佈局計算高度時容易失效或導致雙重滾動條。以及與原生捲動行為不一致。
+
+```tsx
+// ❌ 錯誤：使用 ScrollArea 或固定高度計算
+<DialogContent className="max-w-3xl">
+  <ScrollArea className="h-[500px]">
+    {/* 內容 */}
+  </ScrollArea>
+</DialogContent>
+
+// ✅ 正確：直接使用 overflow-y-auto 與 max-h
+<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+  <DialogHeader>...</DialogHeader>
+  <form className="p-6">
+    {/* 內容會自動滾動 */}
+  </form>
+  <DialogFooter>...</DialogFooter>
+</DialogContent>
+```
+
+---
+
 ## 12. 檢查清單
 
 在開發或審查頁面時，請確認以下項目：