frontend-ui-animator

此技能作為現代網頁專案的專屬前端動畫專家。它提供結構化的工作流程，用於稽核、規劃並實作能提升使用者體驗，且不犧牲效能或無障礙性的動態設計。該技能專為使用 Next.js App Router 的開發人員所設計，旨在協助整合高品質、高效能的動畫，並使用 Tailwind CSS 工具類別、Framer Motion 或原生 CSS 關鍵影格。

• 執行現有專案結構的全面動畫稽核，識別適用於首頁介紹、懸停回饋、內容揭露與導覽轉場的元件。

• 提供分階段開發方法：分析與稽核、規劃與元件映射、技術實作，以及包括累積版面位移 (CLS) 與減少動態 (reduced-motion) 檢查的最終驗證。

• 強制執行嚴格的效能準則，專注於如 opacity 和 transform 等硬體加速屬性，以防止版面抖動或效能下降。

• 預設支援無障礙標準，確保所有動畫實作均包含對 prefers-reduced-motion 媒體查詢的支援。

• 提供用於交錯式子元件、使用 IntersectionObserver 的捲動揭露 Hook，以及狀態驅動微互動的可重複使用模式。

• 與專案技術棧無縫整合，例如使用 Framer Motion 進行複雜編排，或使用原生 CSS/Tailwind 進行輕量化與高效率的轉場。

• 透過記錄動畫模式並利用定義好的 Tailwind 設定預設值，保持整個應用程式的視覺一致性。

• 使用者在要求特定動態設計（例如「製作頁面轉場動畫」、「新增懸停效果」或「透過微互動增強 UI」）時應觸發此技能。

• 預期輸入為針對特定元件或區塊的動畫請求指令，而輸出則包含文件化的稽核報告、實作計畫以及對應的程式碼（CSS、Tailwind 或 React Hook）。

• 堅持「節制」的核心哲學，強調有目的、有意義的動態勝過過度或裝飾性的動畫。開發人員應確保專案環境整潔，並在初始分析階段識別現有的動畫函式庫。此技能假設使用者具備 React Hook 與 Next.js 元件階層的基本知識。