frontend

此技能為 Hippocampus 平台的前端開發提供了標準化的編碼規範與架構模式，特別針對 cluster/applications/ 目錄下的靜態前端應用。它作為開發人員與 AI 代理的權威參考，確保 Kubernetes 平台生態系統中所有網頁 UI 元件的一致性、無障礙支援與框架遵循。

主要功能與能力包括：

• 強制執行 Preact 作為靜態前端元件的主要 UI 函式庫。
• 指定使用 Tailwind CSS 進行樣式設計，確保設計系統的統一性。
• 要求使用 Preact 的 h() 函式而非 JSX/TSX 語法，以維持輕量級的依賴需求。
• 提供手動實作 UI 時的無障礙遵循協定。
• 針對表單與表格的 DOM 元素關聯提供具體指導，包括 label 與 input 的對應以及 ARIA 屬性的使用。

使用說明、實務建議與限制：

• 針對所有位於 cluster/applications/ 目錄下的 UI 元件，請一律使用 Preact 與 Tailwind。
• Next.js 與 shadcn/ui 僅限於 workers/ 目錄下的 Cloudflare Workers 環境使用。
• 在手動實作無障礙功能時，務必將表單輸入與明確標籤配對，或在省略可視標籤時使用 aria-label；表格標頭則須顯式使用 scope 屬性（如 col 或 row）。
• 遵循 h(element, attributes, children) 的編碼模式，以確保程式碼符合專案的建置流程。
• 在建立、修改或審查任何與前端相關的 JavaScript、HTML 或 CSS 檔案時，應觸發此技能，以便儘早發現不符規範的代碼。
• 優先使用 Tailwind 的 sr-only 工具類別，在保持語意化無障礙的同時滿足自定義設計需求。