Quick reference for Either type. Use when user needs error handling, validation, or operations that can fail with typed errors.
✓Works with OpenClaudeEither = success or failure. Right(value) or Left(error).
Create
import * as E from 'fp-ts/Either'
E.right(value) // Success
E.left(error) // Failure
E.fromNullable(err)(x) // null → Left(err), else Right(x)
E.tryCatch(fn, toError) // try/catch → Either
Transform
E.map(fn) // Transform Right value
E.mapLeft(fn) // Transform Left error
E.flatMap(fn) // Chain (fn returns Either)
E.filterOrElse(pred, toErr) // Right → Left if pred fails
Extract
E.getOrElse(err => default) // Get Right or default
E.match(onLeft, onRight) // Pattern match
E.toUnion(either) // E | A (loses type info)
Common Patterns
import { pipe } from 'fp-ts/function'
import * as E from 'fp-ts/Either'
// Validation
const validateEmail = (s: string): E.Either<string, string> =>
s.includes('@') ? E.right(s) : E.left('Invalid email')
// Chain validations (stops at first error)
pipe(
E.right({ email: 'test@example.com', age: 25 }),
E.flatMap(d => pipe(validateEmail(d.email), E.map(() => d))),
E.flatMap(d => d.age >= 18 ? E.right(d) : E.left('Must be 18+'))
)
// Convert throwing code
const parseJson = (s: string) => E.tryCatch(
() => JSON.parse(s),
(e) => `Parse error: ${e}`
)
vs try/catch
// ❌ try/catch - errors not in types
try {
const data = JSON.parse(input)
process(data)
} catch (e) {
handleError(e)
}
// ✅ Either - errors explicit in types
pipe(
E.tryCatch(() => JSON.parse(input), String),
E.map(process),
E.match(handleError, identity)
)
Use Either when error type matters and you want to chain operations.
Related Frontend Skills
Other Claude Code skills in the same category — free to download.
Component Generator
Generate React/Vue/Svelte components with props
Responsive Layout
Create responsive layouts with Tailwind/CSS Grid
Form Builder
Build forms with validation (React Hook Form, Formik)
State Management Setup
Set up state management (Zustand, Redux, Jotai)
Animation Creator
Create animations with Framer Motion or CSS
Dark Mode Setup
Implement dark/light mode toggle
Lazy Loading
Add lazy loading for images and components
SEO Optimizer
Add SEO meta tags, structured data, sitemap
Want a Frontend skill personalized to YOUR project?
This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.