Frontend

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