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:
```json
{
  "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
```tsx
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
```typescript
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
```typescript
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 |