designer-skills

Designer Skills for LlamaFarm

Framework-specific patterns and checklists for the Designer subsystem (React 18 + TanStack Query + TailwindCSS + Radix UI).

Overview

The Designer is a browser-based project workbench for building AI applications. It provides config editing, chat testing, dataset management, RAG configuration, and model selection.

Tech Stack

Technology	Version	Purpose
React	18.2	UI framework with StrictMode
TypeScript	5.2+	Type safety
TanStack Query	v5	Server state management
TailwindCSS	3.3	Utility-first CSS
Radix UI	1.x	Accessible component primitives
Vite	6.x	Build tooling and dev server
React Router	v7	Client-side routing
Vitest	1.x	Testing framework
axios	1.x	HTTP client
framer-motion	12.x	Animations

Directory Structure

designer/src/
  api/          # API service modules (axios-based)
  assets/       # Static assets and icons
  components/   # Feature-organized React components
    ui/         # Radix-based primitive components
  contexts/     # React Context providers
  hooks/        # Custom hooks (TanStack Query wrappers)
  lib/          # Utilities (cn, etc.)
  types/        # TypeScript type definitions
  utils/        # Helper functions
  test/         # Test utilities, factories, mocks

Prerequisites: Shared Skills

Before applying Designer-specific patterns, ensure compliance with:

• TypeScript Skills - Strict typing, patterns, security
• React Skills - Component patterns, hooks, state management

Framework-Specific Guides

Guide	Description
tanstack-query.md	Query/Mutation patterns, caching, invalidation
tailwind.md	TailwindCSS patterns, theming, responsive design
radix.md	Radix UI component patterns, accessibility
performance.md	Frontend optimizations, bundle size, lazy loading

Key Patterns

API Client Configuration

// Centralized client with interceptors
export const apiClient = axios.create({
  baseURL: API_BASE_URL,
  headers: { 'Content-Type': 'application/json' },
  timeout: 60000,
})

// Error handling interceptor
apiClient.interceptors.response.use(
  response => response,
  (error: AxiosError) => {
    if (error.response?.status === 422) {
      throw new ValidationError('Validation error', error.response.data)
    }
    throw new NetworkError('Request failed', error)
  }
)

Query Client Configuration

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      gcTime: 5 * 60_000,
      retry: 2,
      retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30_000),
      refetchOnWindowFocus: false,
    },
    mutations: { retry: 1 },
  },
})

Class Merging Utility

// lib/utils.ts - Always use cn() for Tailwind classes
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Theme Provider Pattern

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function useTheme() {
  const context = useContext(ThemeContext)
  if (!context) throw new Error('useTheme must be used within ThemeProvider')
  return context
}

// Apply via Tailwind dark mode class strategy
useEffect(() => {
  document.documentElement.classList.toggle('dark', theme === 'dark')
}, [theme])

Component Conventions

Feature Components

• Located in components/{Feature}/ directories
• One component per file, named after the component
• Co-located with feature-specific types and utilities

UI Primitives

• Located in components/ui/
• Wrap Radix UI primitives with Tailwind styling
• Use forwardRef for ref forwarding
• Set displayName for DevTools

Icons

• Located in assets/icons/
• Functional components accepting SVG props
• Use lucide-react for standard icons

Testing

// Use MSW for API mocking
import { server } from '@/test/mocks/server'
import { renderWithProviders } from '@/test/utils'

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

test('renders with query data', async () => {
  renderWithProviders(<MyComponent />)
  await screen.findByText('Expected text')
})

Checklist Summary

Category	Critical	High	Medium	Low
TanStack Query	3	4	3	2
TailwindCSS	2	3	4	2
Radix UI	3	3	2	1
Performance	2	4	3	2