Quick reference for fp-ts types. Use when user asks which type to use, needs Option/Either/Task decision help, or wants fp-ts imports.
✓Works with OpenClaudeWhich Type Should I Use?
Is the operation async?
├─ NO: Does it involve errors?
│ ├─ YES → Either<Error, Value>
│ └─ NO: Might value be missing?
│ ├─ YES → Option<Value>
│ └─ NO → Just use the value
└─ YES: Does it involve errors?
├─ YES → TaskEither<Error, Value>
└─ NO: Might value be missing?
├─ YES → TaskOption<Value>
└─ NO → Task<Value>
Common Imports
// Core
import { pipe, flow } from 'fp-ts/function'
// Types
import * as O from 'fp-ts/Option' // Maybe exists
import * as E from 'fp-ts/Either' // Success or failure
import * as TE from 'fp-ts/TaskEither' // Async + failure
import * as T from 'fp-ts/Task' // Async (no failure)
import * as A from 'fp-ts/Array' // Array utilities
One-Line Patterns
| Need | Code |
|---|---|
| Wrap nullable | O.fromNullable(value) |
| Default value | O.getOrElse(() => default) |
| Transform if exists | O.map(fn) |
| Chain optionals | O.flatMap(fn) |
| Wrap try/catch | E.tryCatch(() => risky(), toError) |
| Wrap async | TE.tryCatch(() => fetch(url), toError) |
| Run pipe | pipe(value, fn1, fn2, fn3) |
Pattern Match
// Option
pipe(maybe, O.match(
() => 'nothing',
(val) => `got ${val}`
))
// Either
pipe(result, E.match(
(err) => `error: ${err}`,
(val) => `success: ${val}`
))
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.