fp-ts-react
Assists in implementing fp-ts patterns like Option, Either, and TaskEither within React 18/19 projects.
Install
mkdir -p .claude/skills/fp-ts-react && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4038" && unzip -o skill.zip -d .claude/skills/fp-ts-react && rm skill.zipInstalls to .claude/skills/fp-ts-react
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.Key capabilities
- →Implements type-safe state with Option types
- →Manages async side effects with TaskEither
- →Pipes function transformations
- →Handles loading/error/success states via RemoteData
- →Constructs form validation with error accumulation
How it works
It replaces mutable or undefined-heavy state patterns with algebraic data types like Option and Either, wrapping interactions in pipeline operations.
Inputs & outputs
When to use fp-ts-react
- →Implementing type-safe state with Option and Either
- →Managing API side effects with TaskEither
- →Refactoring standard React hooks to functional patterns
- →Handling form validation with error accumulation
About this skill
Functional Programming in React
Practical patterns for React apps. No jargon, just code that works.
Detailed Guide
Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use This Skill
- When building React apps with fp-ts for type-safe state management
- When handling loading/error/success states in data fetching
- When implementing form validation with error accumulation
- When using React 18/19 or Next.js 14/15 with functional patterns
When to Use What
| Situation | Use |
|---|---|
| Value might not exist | Option<T> |
| Operation might fail (sync) | Either<E, A> |
| Async operation might fail | TaskEither<E, A> |
| Need loading/error/success UI | RemoteData<E, A> |
| Form with multiple validations | Either with validation applicative |
| Dependency injection | Context + ReaderTaskEither |
| Prevent re-renders with fp-ts | useMemo or fp-ts-react-stable-hooks |
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
When not to use it
- →When the team is unfamiliar with functional programming paradigms
- →When the project prefers standard React hook patterns
Prerequisites
Limitations
- →Increases code verbosity
- →Higher cognitive load for non-FP developers
How it compares
It forces type safety and functional purity, preventing common null-check bugs in React components.
Compared to similar skills
fp-ts-react side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| fp-ts-react (this skill) | 1 | 5mo | Review | Advanced |
| landing-page-guide-v2 | 48 | 10mo | Review | Intermediate |
| frontend-prompt-generator | 6 | 11mo | Review | Intermediate |
| ai-sdk-5 | 3 | 8mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by sickn33
View all by sickn33 →You might also like
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
frontend-prompt-generator
gharam1234
Generate structured prompts for frontend development tasks following established patterns. Use when the user requests prompts for wireframes, UI implementation, data binding, or routing functionality in React/Next.js projects with specific formatting requirements (Cursor rules, file paths, test-driven development).
ai-sdk-5
prowler-cloud
Vercel AI SDK 5 patterns. Trigger: When building AI features with AI SDK v5 (chat, streaming, tools/function calling, UIMessage parts), including migration from v4.
nx-generate
nrwl
Generate code using nx generators. USE WHEN scaffolding code or transforming existing code - for example creating libraries or applications, or anything else that is boilerplate code or automates repetitive tasks. ALWAYS use this first when generating code with Nx instead of calling MCP tools or running nx generate immediately.
prowler-ui
prowler-cloud
Prowler UI-specific patterns. For generic patterns, see: typescript, react-19, nextjs-15, tailwind-4. Trigger: When working inside ui/ on Prowler-specific conventions (shadcn vs HeroUI legacy, folder placement, actions/adapters, shared types/hooks/lib).
react-nextjs-development
netbarros
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.