Frontend Development
frontend
UI design guidelines for Kubani web interfaces. Use when building or reviewing web components, pages, or the Kubani dashboard.
SKILL.md
Full skill instructions
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