CLSkills
Back to the library
FREE
Frontend

fp-option-ref

Quick reference for Option type. Use when user needs to handle nullable values, optional data, or wants to avoid null checks.

Try it — you'd type
Help me with fp-option-ref.
And you'd get back
Quick reference for Option type.
Use when user needs to handle nullable values, optional data, or wants to avoid null checks.
Adding it takes about 30 seconds
1

Click Get this skill. Grab the .md file, one click, no account needed.

2

Add it to Claude. Drop it into ~/.claude/skills/. Claude picks it up the next time you open a session.

3

Ask normally. Type your question. The skill triggers on the right keywords — you don't have to remember anything.

Unlock all skills — $25
You might also like
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

SKILL FILEWhat Claude actually reads
Option = value that might not exist. `Some(value)` or `None`.

## Create

```typescript
import * as O from 'fp-ts/Option'

O.some(5)              // Some(5)
O.none                 // None
O.fromNullable(x)      // null/undefined → None, else Some(x)
O.fromPredicate(x > 0)(x) // false → None, true → Some(x)
```

## Transform

```typescript
O.map(fn)              // Transform inner value
O.flatMap(fn)          // Chain Options (fn returns Option)
O.filter(predicate)    // None if predicate false
```

## Extract

```typescript
O.getOrElse(() => default)  // Get value or default
O.toNullable(opt)           // Back to T | null
O.toUndefined(opt)          // Back to T | undefined
O.match(onNone, onSome)     // Pattern match
```

## Common Patterns

```typescript
import { pipe } from 'fp-ts/function'
import * as O from 'fp-ts/Option'

// Safe property access
pipe(
  O.fromNullable(user),
  O.map(u => u.profile),
  O.flatMap(p => O.fromNullable(p.avatar)),
  O.getOrElse(() => '/default-avatar.png')
)

// Array first element
import * as A from 'fp-ts/Array'
pipe(
  users,
  A.head,  // Option<User>
  O.map(u => u.name),
  O.getOrElse(() => 'No users')
)
```

## vs Nullable

```typescript
// ❌ Nullable - easy to forget checks
const name = user?.profile?.name ?? 'Guest'

// ✅ Option - explicit, composable
pipe(
  O.fromNullable(user),
  O.flatMap(u => O.fromNullable(u.profile)),
  O.map(p => p.name),
  O.getOrElse(() => 'Guest')
)
```

Use Option when you need to **chain** operations on optional values.