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 工具类，在保持语义化无障碍的同时满足自定义设计需求。