baseline-ui

Baseline UI

強制執行一套有觀點的 UI 基準，避免 AI 生成的介面雜亂無章。

使用方式

• /baseline-ui
  將這些限制套用到本次對話中的所有 UI 工作。

• /baseline-ui <file>
  根據以下所有限制審查該檔案，並輸出：

  • 違規項目（引用確切的行或程式碼片段）
  • 為何重要（一句簡短說明）
  • 具體修正方式（程式碼層級的建議）

技術棧

• 除非已有自訂值或明確要求，否則必須使用 Tailwind CSS 預設值
• 需要 JavaScript 動畫時，必須使用 motion/react（原名 framer-motion）
• 應使用 tw-animate-css 處理 Tailwind CSS 中的進場與微動畫
• 必須使用 cn 工具函式（clsx + tailwind-merge）處理 class 邏輯

元件

• 任何涉及鍵盤或焦點行為的元件，必須使用無障礙元件原語（Base UI、React Aria、Radix）
• 必須優先使用專案既有的元件原語
• 切勿在同一個互動介面中混用不同的原語系統
• 若技術棧相容，新增原語時應優先選用 Base UI
• 純圖示按鈕必須加上 aria-label
• 除非明確要求，否則切勿自行實作鍵盤或焦點行為

互動

• 破壞性或不可逆的操作必須使用 AlertDialog
• 載入狀態應使用結構化的骨架螢幕
• 切勿使用 h-screen，請用 h-dvh
• 固定定位元素必須遵守 safe-area-inset
• 錯誤訊息必須顯示在觸發動作的旁邊
• 切勿在 input 或 textarea 中阻擋貼上

動畫

• 除非明確要求，否則不要加入動畫
• 只能對合成器屬性（transform、opacity）進行動畫
• 切勿對版面屬性（width、height、top、left、margin、padding）進行動畫
• 應避免對繪製屬性（background、color）進行動畫，除非是小型區域性 UI（文字、圖示）
• 進場動畫應使用 ease-out
• 互動回饋的動畫時間不得超過 200ms
• 循環動畫在離開畫面時必須暫停
• 應尊重 prefers-reduced-motion
• 除非明確要求，否則不要引入自訂緩動曲線
• 應避免對大型圖片或全螢幕表面進行動畫

排版

• 標題必須使用 text-balance，內文/段落使用 text-pretty
• 資料必須使用 tabular-nums
• 密集的 UI 應使用 truncate 或 line-clamp
• 除非明確要求，否則不要修改 letter-spacing（tracking-*）

版面

• 必須使用固定的 z-index 層級（不要任意使用 z-*）
• 正方形元素應使用 size-* 而非 w-* + h-*

效能

• 切勿對大範圍的 blur() 或 backdrop-filter 表面進行動畫
• 切勿在非活躍動畫中套用 will-change
• 任何可用渲染邏輯表達的情境，都不要使用 useEffect

設計

• 除非明確要求，否則不要使用漸層
• 不要使用紫色或多色漸層
• 不要將發光效果作為主要提示
• 除非明確要求，否則應使用 Tailwind CSS 預設陰影層級
• 空狀態必須提供一個明確的下一步動作
• 每個畫面應限制使用一種強調色
• 在引入新顏色前，應優先使用既有主題或 Tailwind CSS 的顏色 token