# Frontend

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

- Skill: `diegosouzapw/frontend-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/frontend-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/frontend-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/diegosouzapw/frontend-2

---


# 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