version: "1.0.1" 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:
- Match existing patterns in
ui/ - Use Tailwind utility classes consistently
- Keep components small and composable
- Use server components where possible (Next.js)
- Test with React Testing Library