TypeScript Skills for LlamaFarm

Shared TypeScript best practices for Designer (React) and Electron App subsystems.

Overview

This skill covers idiomatic TypeScript patterns for LlamaFarm's frontend applications:

• designer/: React 18 + TanStack Query + TailwindCSS + Radix UI
• electron-app/: Electron 28 + Electron Vite

Tech Stack

Configuration

Both projects use strict TypeScript:

{
  "strict": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noFallthroughCasesInSwitch": true
}

Core Principles

1. Strict mode always - Never use any without explicit justification
2. Prefer interfaces - Use interface for object shapes, type for unions/intersections
3. Explicit return types - Always type public function returns
4. Immutability - Use readonly and as const where applicable
5. Null safety - Handle null/undefined explicitly, avoid non-null assertions

Related Documents

• patterns.md - Idiomatic TypeScript patterns
• typing.md - Strict typing, generics, utility types
• testing.md - Vitest and testing patterns
• security.md - XSS prevention, input validation

Quick Reference

React Component Pattern

interface Props {
  readonly title: string
  readonly onAction?: () => void
}

function MyComponent({ title, onAction }: Props): JSX.Element {
  return <button onClick={onAction}>{title}</button>
}

TanStack Query Hook Pattern

export const projectKeys = {
  all: ['projects'] as const,
  lists: () => [...projectKeys.all, 'list'] as const,
  detail: (id: string) => [...projectKeys.all, 'detail', id] as const,
}

export function useProject(id: string) {
  return useQuery({
    queryKey: projectKeys.detail(id),
    queryFn: () => fetchProject(id),
    enabled: !!id,
  })
}

Error Class Pattern

export class ApiError extends Error {
  constructor(
    message: string,
    public readonly status: number,
    public readonly response?: unknown
  ) {
    super(message)
    this.name = 'ApiError'
  }
}

Checklist Summary