About

Imported from sickn33/agentic-awesome-skills (skills/fp-react/SKILL.md). Install upstream with npx skills add sickn33/agentic-awesome-skills --skill fp-react. Copyright stays with the author.

Functional Programming in React

Name: fp-react
Author: sickn33

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 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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/sickn33-agentic-awesome-skills-fp-react/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

sickn33-agentic-awesome-skills-fp-react.ocm.jsonjson

{
  "ocm": "1",
  "id": "sickn33-agentic-awesome-skills-fp-react",
  "kind": "skill",
  "name": "fp-react",
  "description": "Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.",
  "publisher": "sickn33",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "math"
    ],
    "tags": [
      "skill-md",
      "fp-ts",
      "react",
      "typescript",
      "hooks",
      "state-management",
      "forms",
      "data-fetching",
      "remote-data",
      "react-19"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/sickn33/agentic-awesome-skills",
      "path": "skills/fp-react/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/sickn33/agentic-awesome-skills/blob/HEAD/skills/fp-react/SKILL.md",
      "key": "sickn33/agentic-awesome-skills/skills/fp-react/SKILL.md"
    }
  },
  "instructions": "# Functional Programming in React\n\nPractical patterns for React apps. No jargon, just code that works.\n\n---\n\n## Detailed Guide\n\nRead [the detailed guide](references/detailed-guide.md) 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.\n\n## When to Use What\n\n| Situation | Use |\n|-----------|-----|\n| Value might not exist | `Option<T>` |\n| Operation might fail (sync) | `Either<E, A>` |\n| Async o",
  "cost": {
    "context_tokens": 306
  }
}

Fetch it by URL: GET /api/v1/registry/sickn33-agentic-awesome-skills-fp-react/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.