frontend

name	frontend
description	UI design guidelines for Kubani web interfaces. Use when building or reviewing web components, pages, or the Kubani dashboard.

Frontend Development

Guidelines for building Kubani web interfaces.

Tech Stack

• Framework: Next.js (React)
• UI: Tailwind CSS, Radix UI primitives
• State: React Query for server state
• Location: ui/

Design Principles

• Distinctive design: Avoid generic "AI slop" aesthetics — no default Inter/Roboto, no cliched purple gradients
• Bold choices: Pick a clear aesthetic direction and commit to it
• Typography: Choose distinctive fonts that match the context
• Motion: Use CSS animations and transitions for micro-interactions
• Accessibility: Follow WCAG 2.1 AA guidelines

Kubani Dashboard Components

The main UI provides:

• Agent monitoring (status, health, versions)
• Skill browser and management
• Learning visualization (critic evaluations, reflections)
• Deployment management
• Temporal workflow visibility

Guidelines

When building frontend components:

1. Match existing patterns in ui/
2. Use Tailwind utility classes consistently
3. Keep components small and composable
4. Use server components where possible (Next.js)
5. Test with React Testing Library