cliqrelay

Implement HTTP handlers that parse requests, invoke use cases, and format responses following REST conventions.

Centralize all configuration constants — environment variables, cache keys — in the constants/ directory with strict naming and export conventions

Handle errors across the three tiers — HTTP/Drizzle layer rejection, service factory validation failure, and component-level try/catch with toast notifications

Implement the functional factory method pattern used across all service layers — the single most important architectural convention in this project

Build forms using TanStack Form with Zod — `formOptions`, `useForm` with `validators`, render-prop `form.Field`, and try/catch submission with toast errors

Apply functional dependency injection where dependencies are passed as function parameters instead of constructor injection — enables trivial testability and loose coupling

Use @repo/api-client SDK hooks (preferred) or raw fetch directly in domain-specific HTTP implementations (extension app only) — no generic HTTP wrapper layer needed

Use when writing, refactoring, or reviewing React components inside a TanStack Start application. Focuses on SOLID component design, composition, and correct use of loaders, server functions, and React Query for client-side state.

Use TanStack React Query with auto-generated hooks from @repo/api-client (preferred) or a centralized QueryKeys enum and cache utility for manual setup

Structure every domain using @repo/api-client (preferred) or as three independent tiers — HTTP/Drizzle implementation, business logic factory, and wiring composition

Wire factories to implementations at a single composition point — but the primary pattern uses @repo/api-client which needs no composition

Reusable frontend patterns for React projects — covering forms, error handling, service architecture, state management, HTTP, validation, testing, and configuration conventions

Define TypeScript function signature types in each project's models/ folder — for domains not covered by @repo/api-client, these types act as contracts between service factories and their implementations

Write tests at two layers — server function tests with mocked api-client (preferred) or factory function tests with mocked dependencies

Use Zod schemas for runtime validation of form data — API response validation is handled by @repo/api-client which provides auto-generated Zod schemas

Manage global application state using Zustand — each domain gets its own store file with typed state and actions, consumed via selector-based hooks

Use this skill to write and generate documents using Typst, a markup-based typesetting system. Provides structured access to Typst's full reference documentation: tutorial chapters, language reference modules, and standalone pages for syntax, scripting, styling, and context.