# Build Type-Safe React Apps with fp-ts

React async state and validation often become inconsistent. This skill provides fp-ts patterns for predictable hooks, forms, data fetching, and dependency injection.

## Install

```bash
npx skillstore add sickn33/fp-ts-react
```

## Metadata

- Status: approved
- Slug: sickn33-fp-ts-react
- Skillstore revision: r2
- Version status: missing
- Tree hash: 4c0a68e8baa3f90285a760aa8056d7c1b721e505c1c5915080097657cbbb5742
- Author: sickn33
- GitHub username: sickn33
- License: MIT
- Repository: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/fp-ts-react
- Ref: 88a8e9a07f4c54ab105c1c41b6267c287146b07b
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 76
- Public page: https://skillstore.pages.dev/skills/sickn33-fp-ts-react
- Manifest: https://skillstore.pages.dev/api/skills/sickn33-fp-ts-react/manifest

## Capabilities

- Models optional React state with Option and explicit fallback handling.
- Builds form validation with Either, including accumulated and field-level errors.
- Wraps asynchronous requests in TaskEither and composes sequential or parallel operations.
- Represents loading, failure, and success with a RemoteData state machine.
- Improves referential stability with useMemo and equality-aware hooks.
- Structures dependency injection, mock services, and React 19 form patterns.

## Use Cases

- Model Predictable UI State: Replace nullable values and conflicting loading flags with Option and RemoteData.
- Validate Complex Forms: Accumulate field errors and preserve typed success values with Either.
- Design Testable Service Access: Inject API and analytics services through context and verify components with mocks.

## Prompt Templates

### Convert Nullable State

```
Convert this React state from null handling to fp-ts Option and explain each match branch.
```

### Build Form Validation

```
Create typed Either validators for these fields and return every validation error at once.
```

### Compose API Requests

```
Refactor these dependent and parallel requests with TaskEither, preserving typed errors and loading states.
```

### Architect Functional Services

```
Design ReaderTaskEither dependencies, React context wiring, RemoteData rendering, and mock-based tests for this feature.
```

## Limitations

- Examples require adaptation to project types, APIs, and error models.
- The skill does not install dependencies or execute the documented code.
- Runtime response validation needs an additional library such as io-ts or Zod.
- React and fp-ts version compatibility still requires project-level testing.

## Best Practices

- Keep domain errors typed and map them to user messages near the interface.
- Memoize constructed fp-ts values when React dependency identity matters.
- Test every tagged state and both branches of Option or Either.

## Anti Patterns

- Do not combine independent loading, data, and error flags that permit impossible states.
- Do not recreate Option values each render when effects depend on reference identity.
- Do not cast unvalidated network responses directly into trusted domain types.

## Security Audit

- Audited at: 2026-07-23T22:33:46.941\+00:00
- Summary: All 85 static findings are false positives in Markdown documentation and TypeScript examples. Backticks format code or form template literals, while fetch calls use illustrative relative endpoints. No prompt injection, secret access, obfuscation, reconnaissance, or hidden command behavior was found.

## Stats

- Views: 98
- Downloads: 8
- Favorites: 0
- Popularity score: 0