baseline-ui

baseline-ui 技能是前端開發的架構守護者，確保 UI 實作維持極高的無障礙性、效能與視覺一致性。專為現代 React 與 Tailwind CSS 專案的開發者與 AI 代理設計，透過系統化的組件構建與互動規則，消除了設計中的不一致（如隨意的間距、不連貫的焦點狀態與管理不當的動畫），確保所有 UI 成果符合業界標準。

• 強制執行組件原始基準，使用 Radix UI、Base UI 或 React Aria 來實現鍵盤導航與螢幕閱讀器相容性。

• 實作嚴格的動畫準則，優先使用複合屬性 (transform, opacity) 並限制動畫影響排版屬性，以維持 60fps 的效能。

• 透過 'cn' 工具 (clsx + tailwind-merge) 標準化類別邏輯，避免樣式衝突並維護整潔的 CSS。

• 提供命令列介面 (/baseline-ui <file>)，針對指定檔案自動審核是否符合規範，指出違規事項並提供具體修復建議。

• 規定無障礙設計模式，例如圖示按鈕必須包含 aria-label，並確保用戶操作錯誤時有明確的顯示邏輯。

• 確保響應式 UI 的安全性，強制使用 h-dvh 取代 h-screen，並正確遵循 safe-area-inset。

• 透過規範 text-balance、text-pretty 與固定 z-index 比例，統一字體排版與層級，防止設計失控。

• 適用於管理複雜的 Astro/React 專案 UI 開發，確保樣式與效能的一致性。

• 在互動對話中使用 '/baseline-ui' 指令套用規範，使用 '/baseline-ui <file>' 進行具體的程式碼稽核。

• 在 Tailwind CSS 4.x 與 Framer Motion 環境下執行效果最佳，應避免使用自訂曲線或大型排版動畫。

• 確保所有互動回饋均保持在 200ms 延遲閾值內，以達成最佳使用者體驗。

• 嚴格禁止使用 'useEffect' 處理本應在渲染階段完成的邏輯，以提升應用程式效能。