ui

UI 技能是一項專業的代理程式功能，旨在產生前端介面元件、登陸頁面 Hero 區塊及互動式回饋表單。它作為紀律嚴明的 UI 開發夥伴，確保所有生成的程式碼均符合嚴格的無障礙 (a11y) 標準，包括強制執行 alt 屬性、邏輯標題結構及鍵盤導航互動元素。此技能透過分層優先級系統運作：預設參考標準 UI 最佳實務，僅在使用者明確要求時才允許使用特定品牌或高度獨特的設計需求。透過結構化的品質閘道方法 (Step 0)，代理程式會在交付前評估每個元件的螢幕閱讀器相容性、對比度及焦點管理。此技能非常適合需要快速建構介面同時保持一致且高品質前端架構的開發者。它僅在明確指示下支援複雜動畫控制、自訂 easing 函式及基於漸層的裝飾，以維持標準任務的程式碼庫整潔。此代理程式嚴格限定於 UI 生成，不應被用於後端邏輯、資料庫建模或驗證流程。

• 自動生成響應式 React 或 HTML/CSS UI 元件與 Hero 版面區塊。

• 整合無障礙審計 (a11y)，確保符合 WCAG 原則，如 Tab 索引、焦點狀態管理及語意化 HTML 結構。

• 具備內建驗證佔位符的回饋與聯絡表單生成。

• 情境感知的樣式調整，並在明確要求時支援品牌強化、自訂動畫與複雜 easing。

• 結構化品質閘道系統 (Step 0)，提供針對影像、表單與互動元素鍵盤可操作性的交付前檢查清單。

• 當使用者明確要求 UI 更新、設計原型、Hero 區塊、表單或視覺元件修改時，請使用此技能。

• 避免將此技能用於後端 API 實作、業務邏輯處理、資料庫結構設計或安全的驗證/授權功能。

• 確保所有產生的元件均符合 ui-skills.md 與 frontend-design.md 定義的參考檔案。

• 對於每個 UI 任務，優先執行標準無障礙檢查清單，確保開發具包容性。

• 當要求複雜視覺效果（如發光或動畫）時，請確認使用者已明確授權，因為這些項目被排除在預設模式之外。