CachiBot: Skill for Claude Code

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:

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 (
      <div className="flex h-full items-center justify-center">
        <p className="text-zinc-500">Select a bot to continue</p>
      </div>
    )
  }

  return (
    <div className="flex h-full flex-col bg-zinc-100 dark:bg-zinc-950">
      {/* Header */}
      <div className="flex items-center justify-between border-b border-zinc-200 bg-white px-6 py-4 dark:border-zinc-800 dark:bg-zinc-900/50">
        <div>
          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
            Your View Title
          </h2>
          <p className="text-sm text-zinc-500">Description text</p>
        </div>
        <button
          className="flex items-center gap-2 rounded-lg bg-cachi-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-cachi-500"
        >
          <Plus className="h-4 w-4" />
          Action
        </button>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-6">
        <div className="mx-auto max-w-4xl">
          {loading ? (
            <div className="flex items-center justify-center py-12">
              <Loader2 className="h-6 w-6 animate-spin text-zinc-400" />
            </div>
          ) : (
            <div className="space-y-4">
              {/* Your content here */}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}