/typescript-skills

name: typescript-skills
description: Shared TypeScript best practices for Designer and Electron subsystems.
allowed-tools: Read, Grep, Glob
user-invocable: false

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

| Subsystem | Framework | Build | Key Libraries | |-----------|-----------|-------|---------------| | designer | React 18 | Vite | TanStack Query, Radix UI, axios, react-router-dom | | electron-app | Electron 28 | electron-vite | electron-updater, axios |

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](./patterns.md) - Idiomatic TypeScript patterns
• [typing.md](./typing.md) - Strict typing, generics, utility types
• [testing.md](./testing.md) - Vitest and testing patterns
• [security.md](./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

| Category | Critical | High | Medium | Low | |----------|----------|------|--------|-----| | Typing | 3 | 4 | 2 | 1 | | Patterns | 2 | 3 | 3 | 2 | | Testing | 2 | 3 | 2 | 1 | | Security | 4 | 2 | 1 | 0 |