frontend

This skill provides standardized coding conventions and architectural patterns for frontend development within the Hippocampus platform, specifically targeting static frontends located in cluster/applications/. It acts as an authoritative reference for developers and AI agents to ensure consistency, accessibility, and framework adherence across all web-based UI components in the Kubernetes platform ecosystem.

Key features and capabilities include:

• Strict enforcement of Preact as the primary UI library for static frontend components.
• Mandated use of Tailwind CSS for styling to ensure design system uniformity.
• Prescriptive coding style using the Preact h() function over JSX/TSX syntax to maintain lightweight dependency footprints.
• Built-in accessibility compliance protocols for manual UI implementations.
• Specific guidance on DOM element associations, including required label-to-input mapping and ARIA attribute usage for forms and tables.

Usage notes, practical tips, and constraints:

• Always default to Preact and Tailwind for any UI components residing within the cluster/applications/ directory.
• Reserve Next.js and shadcn/ui exclusively for Cloudflare Workers environments defined in the workers/ directory.
• When implementing manual accessibility, always pair form inputs with explicit labels or use aria-label attributes where visual labels are omitted; for table headers, explicitly use scope attributes such as col or row.
• Follow the provided pattern of h(element, attributes, children) to ensure code remains compatible with the project's build pipeline.
• This skill should be triggered during the creation, modification, or code review process of any frontend-related JavaScript, HTML, or CSS files to catch violations early.
• Prioritize the 'sr-only' utility class from Tailwind to maintain semantic accessibility while adhering to custom design requirements for hidden labels.