Appendix C: Quick Reference
Effect Cheat Sheet​
Creating Effects​
Effect.succeed(value) // Always succeeds with value
Effect.fail(error) // Always fails with error
Effect.sync(() => value) // Synchronous, no errors
Effect.try({ try: () => x, catch: (e) => err }) // Sync, may fail
Effect.tryPromise({ try: () => p, catch: (e) => err }) // Async, may fail
Effect.gen(function* () { ... }) // Generator syntax (recommended)
Composing Effects​
Effect.map(effect, (a) => b) // Transform success
Effect.flatMap(effect, (a) => effect2) // Chain effects
Effect.tap(effect, (a) => logEffect) // Side effect, keep original
Effect.all([e1, e2, e3]) // Run all (parallel options)
Effect.forEach(items, (item) => effect) // Map with effects
Error Handling​
Effect.catchAll(effect, (e) => fallback) // Catch all errors
Effect.catchTag("MyError", (e) => fallback) // Catch by tag
Effect.catchTags({ Err1: h1, Err2: h2 }) // Multiple tags
Effect.either(effect) // Convert to Either
Effect.retry(effect, Schedule.recurs(3)) // Retry with schedule
Effect.timeout(effect, Duration.seconds(10)) // Add timeout
Services​
// Define
class MyService extends Context.Tag("MyService")<MyService, { readonly doThing: () => Effect.Effect<string> }>() {}
// Use
const program = Effect.gen(function* () {
const svc = yield* MyService;
return yield* svc.doThing();
});
// Provide
Layer.succeed(MyService, { doThing: () => Effect.succeed("done") })
Layer.effect(MyService, Effect.gen(function* () { /* build service */ }))
Layer.scoped(MyService, Effect.gen(function* () { /* with cleanup */ }))
Running Effects​
Effect.runSync(effect) // Sync execution (throws on async/failure)
Effect.runPromise(effect) // Async execution (rejects on failure)
Effect.runPromiseExit(effect) // Async, returns Exit (success or failure info)
ManagedRuntime.make(layer) // Create runtime with pre-provided services
runtime.runPromise(effect) // Run with runtime's services
TanStack Query Key Conventions​
// Pattern: [entity, scope, ...identifiers]
["projects", "list", { orgId, status, page }] // Filtered list
["projects", "detail", projectId] // Single item
["projects", "detail", projectId, "tasks"] // Nested resource
["users", "me"] // Current user
["notifications"] // Global list
// Invalidation patterns
queryClient.invalidateQueries({ queryKey: ["projects"] }) // All project queries
queryClient.invalidateQueries({ queryKey: ["projects", "list"] }) // All project lists
queryClient.invalidateQueries({ queryKey: ["projects", "detail", id] }) // Specific project
Prisma Schema Cheat Sheet​
// Field types
String @id @default(cuid()) // Primary key
String @unique // Unique constraint
String? // Nullable
String @default("value") // Default value
DateTime @default(now()) // Auto timestamp
DateTime @updatedAt // Auto-update timestamp
Int @default(autoincrement()) // Auto-increment
Json // JSON column
Boolean @default(false)
// Relations
model Post {
authorId String
author User @relation(fields: [authorId], references: [id])
}
// Indexes
@@index([field1, field2]) // Composite index
@@unique([field1, field2]) // Unique constraint (also an index)
// Column/table mapping
@map("column_name") // Map field to DB column
@@map("table_name") // Map model to DB table
// Common commands
prisma migrate dev --name name // Create + apply migration
prisma migrate deploy // Apply in production
prisma db push // Quick sync (no migration file)
prisma generate // Regenerate client
prisma studio // Visual database browser
TypeScript Utility Types for React​
// Extract component props
type ButtonProps = React.ComponentProps<typeof Button>;
// Make some props required
type RequiredProps<T, K extends keyof T> = T & Required<Pick<T, K>>;
// Polymorphic component type
type PolymorphicProps<E extends React.ElementType, P = {}> = P &
Omit<React.ComponentPropsWithoutRef<E>, keyof P> & { as?: E };
// Discriminated union props
type CardProps =
| { variant: "link"; href: string }
| { variant: "button"; onClick: () => void }
| { variant: "static" };
// Strict omit (errors on non-existent keys)
type StrictOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
// Extract brand type
type BrandOf<T> = T extends string & { readonly [K: string]: any } ? T : never;
Tailwind CSS v4 Quick Reference​
/* Configuration in CSS */
@import "tailwindcss";
@theme {
--color-brand: oklch(0.55 0.2 250);
--font-sans: "Inter", sans-serif;
--spacing-18: 4.5rem;
--breakpoint-3xl: 1920px;
--animate-fade-in: fade-in 0.15s ease-in;
}
/* Container queries */
<div class="@container">
<div class="@sm:flex @lg:grid">
</div>
/* Key utilities */
bg-{color} text-{color} border-{color}
p-{size} m-{size} gap-{size}
w-{size} h-{size} max-w-{size}
flex grid hidden
rounded-{size} shadow-{size} opacity-{n}
transition-{prop} duration-{ms} ease-{fn}
hover: focus: active:
sm: md: lg: xl:
dark: group-hover: peer-checked:
Common File Patterns​
Feature structure:
features/{name}/
├── components/ # React components
├── hooks/ # Custom hooks
├── services/ # Effect service definitions
├── schemas/ # Effect Schema definitions
├── domain/ # Entities, errors, rules
│ ├── entities/
│ ├── errors/
│ └── ports/
├── infrastructure/ # Prisma implementations
├── types/ # TypeScript types
└── index.ts # Public API
Route file:
src/routes/_layout/$param.tsx
→ createFileRoute() with loader, component, validateSearch
Test file:
src/features/{name}/**/__tests__/{file}.test.ts
→ describe() blocks, Effect.runPromise with test layers
CLI Commands Quick Reference​
# Development
pnpm dev # Start dev server
pnpm storybook # Start Storybook
pnpm db:studio # Prisma visual browser
# Quality
pnpm lint # ESLint
pnpm typecheck # TypeScript check
pnpm format:check # Prettier check
# Testing
pnpm test # Vitest watch mode
pnpm test:run # Vitest single run
pnpm test:coverage # With coverage
pnpm test:e2e # Playwright
# Database
pnpm db:migrate # Create + apply migration
pnpm db:push # Quick schema sync
pnpm db:seed # Seed data
pnpm db:generate # Regenerate client
# Build
pnpm build # Production build
pnpm preview # Preview production build