--- name: cachibot-frontend-view description: Create new frontend views and components for CachiBot's React+TypeScript UI with Zustand state management. Use this skill when building new pages, views, panels, or major UI components — e.g., "add a dashboard view", "create a logs panel", "build a new settings tab". metadata: author: cachibot version: "1.0" --- # CachiBot Frontend View Creation Create new views and components for CachiBot's React frontend following its established patterns. ## Architecture Overview - **Framework**: React 19 + TypeScript (strict mode) - **State**: Zustand stores with localStorage persistence - **Styling**: Tailwind CSS (dark-first, zinc color palette) - **Icons**: lucide-react - **Routing**: React Router v7 - **Path alias**: `@/*` maps to `src/*` ## Step-by-Step Process ### 1. Create the View Component Create `frontend/src/components/views/YourView.tsx`: ```tsx import { useState, useEffect } from 'react' import { /* icons you need */ Loader2, Plus } from 'lucide-react' import { useBotStore } from '../../stores/bots' import { useYourStore } from '../../stores/your-store' // if needed import { cn } from '../../lib/utils' export function YourView() { const { getActiveBot } = useBotStore() const activeBot = getActiveBot() const [loading, setLoading] = useState(false) if (!activeBot) { return (

Select a bot to continue

) } return (

{/* Header */}

Your View Title

Description text

{/* Content */}

{loading ? (

) : (

{/* Your content here */}

)}

) } ``` ### 2. Export from Views Index Add to `frontend/src/components/views/index.ts`: ```typescript export { YourView } from './YourView' ``` ### 3. Add to View Type Edit `frontend/src/types/index.ts` — add to `BotView`: ```typescript export type BotView = 'chats' | 'tasks' | 'tools' | 'settings' | 'voice' | 'work' | 'schedules' | 'your-view' ``` ### 4. Add Navigation in BotSidebar Edit `frontend/src/components/layout/BotSidebar.tsx` — add a nav button: ```tsx // Add import for your icon import { YourIcon } from 'lucide-react' // In the navigation section, add: ``` ### 5. Add View Routing in MainLayout Edit `frontend/src/components/layout/MainLayout.tsx` — add the view case: ```tsx // Add import import { YourView } from '../views/YourView' // In the view switch/conditional rendering: {activeView === 'your-view' && } ``` ## Styling Conventions ### Color Palette (Dark-First) ``` Background: bg-zinc-950 (page), bg-zinc-900/50 (cards/headers) Borders: border-zinc-800 Text primary: text-zinc-100 Text secondary: text-zinc-400, text-zinc-500 Accent: bg-cachi-600, text-cachi-400, hover:bg-cachi-500 Success: text-green-400 Error: text-red-400 Warning: text-amber-400 ``` ### Common Component Patterns **Card:** ```tsx

{/* content */}

``` **Empty state:** ```tsx

No items yet

Description of what to do

``` **Action button row:** ```tsx

``` ### Zustand Store Pattern If your view needs its own store, create `frontend/src/stores/your-store.ts`: ```typescript import { create } from 'zustand' import { persist } from 'zustand/middleware' interface YourState { items: YourItem[] loading: boolean setItems: (items: YourItem[]) => void addItem: (item: YourItem) => void removeItem: (id: string) => void } export const useYourStore = create()( persist( (set) => ({ items: [], loading: false, setItems: (items) => set({ items }), addItem: (item) => set((s) => ({ items: [...s.items, item] })), removeItem: (id) => set((s) => ({ items: s.items.filter((i) => i.id !== id), })), }), { name: 'cachibot-your-store' } // localStorage key ) ) ``` ### API Client Function If the view fetches data from the backend, add to `frontend/src/api/client.ts`: ```typescript export async function getYourItems(botId: string): Promise { const res = await fetchWithAuth(`/api/bots/${botId}/your-domain`) if (!res.ok) throw new Error('Failed to fetch items') return res.json() } ``` ## Checklist - [ ] View component created in `frontend/src/components/views/` - [ ] View exported from `frontend/src/components/views/index.ts` - [ ] `BotView` type updated in `frontend/src/types/index.ts` - [ ] Navigation button added in `BotSidebar.tsx` - [ ] View routing added in `MainLayout.tsx` - [ ] TypeScript types defined in `frontend/src/types/index.ts` - [ ] Zustand store created (if needed) in `frontend/src/stores/` - [ ] API client functions added (if needed) in `frontend/src/api/` - [ ] Dark-mode-first styling with zinc/cachi color palette - [ ] `npm run build` passes with no type errors

cachibot-frontend-view

Scan your own AI components