fp-react

Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.

Quality

61%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/fp-react/SKILL.md

Quality

Content

71%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a highly actionable skill with excellent, executable code examples covering a wide range of fp-ts + React patterns. Its main weaknesses are verbosity (some unnecessary commentary and explanations of concepts Claude already knows) and the monolithic structure that would benefit from splitting into separate files for each major pattern. The decision tables and cheat sheet sections are well-designed aids.

Suggestions

Split the content into separate files (e.g., OPTION.md, EITHER.md, TASKETHER.md, REMOTE-DATA.md, REACT19.md) and use SKILL.md as a concise overview with links to each pattern file.

Remove explanatory commentary that Claude doesn't need, such as 'No jargon, just code that works', the 'Why RemoteData Beats Booleans' comparison section, and inline comments like '// Option says this might not exist yet'.

Trim the cheat sheet section (Section 8) which partially duplicates patterns already shown in earlier sections, or consolidate it as the primary quick-reference and reduce earlier sections.

Dimension	Reasoning	Score
Conciseness	The skill is quite long (~500+ lines) with some unnecessary commentary like 'No jargon, just code that works', 'The Right Way to Handle Async State', and explanatory comments like '// Option says "this might not exist yet"'. The 'Why RemoteData Beats Booleans' section explains something Claude already understands. However, most code examples earn their place and the quick reference tables are efficient.	3 / 5
Actionability	Nearly all examples are fully executable, copy-paste ready TypeScript/React code. The skill covers complete component implementations, custom hooks, validation functions, testing patterns, and even includes npm install commands. Code covers common cases comprehensively with multiple patterns per concept.	5 / 5
Workflow Clarity	The skill is primarily a collection of patterns rather than a multi-step workflow, so destructive/batch operation concerns don't apply. The patterns are clearly sequenced from simple (Option) to complex (DI, React 19), and the 'When to Use What' table provides clear decision guidance. Minor gap: no explicit guidance on migration or adoption order when integrating these patterns into an existing codebase.	4 / 5
Progressive Disclosure	All content is inlined in a single large file with no references to supporting files. Given the length and breadth of topics (8 major sections covering Option, Either, TaskEither, RemoteData, referential stability, DI, React 19 patterns, and a cheat sheet), this content would benefit from being split into separate files. The internal structure with numbered sections and tables is decent, but the monolithic approach hurts navigability.	3 / 5
	Total	15 / 20 Passed

Description

52%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description identifies a clear niche (fp-ts + React integration) with useful version specifics, but it reads more like a topic list than an actionable skill description. The lack of a 'Use when...' clause significantly hurts completeness, and the listed areas (hooks, state, forms, data fetching) are categories rather than concrete actions Claude would perform.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when the user asks about integrating fp-ts with React components, handling Option/Either types in hooks, or building type-safe forms with functional programming patterns.'

Replace category labels with concrete actions, e.g., 'Wraps async data fetching in TaskEither, manages component state with Option types, validates forms using fp-ts codecs' instead of just 'hooks, state, forms, data fetching'.

Include additional trigger terms users might naturally say, such as 'functional programming', 'Option', 'Either', 'TaskEither', 'pipe', or 'monadic' to improve discoverability.

Dimension	Reasoning	Score
Specificity	Names the domain (fp-ts with React) and lists several areas (hooks, state, forms, data fetching) but these are more categories than concrete actions. It doesn't describe what specific operations are performed (e.g., 'creates type-safe form validation', 'wraps async calls in TaskEither').	3 / 5
Completeness	Has a reasonable 'what' (practical patterns for fp-ts with React covering hooks, state, forms, data fetching) but completely lacks a 'when' clause. There is no 'Use when...' guidance, which per the rubric should cap completeness at 3, and the 'what' is only moderately clear, placing this at 2.	2 / 5
Trigger Term Quality	Includes good natural keywords like 'fp-ts', 'React', 'hooks', 'state', 'forms', 'data fetching', 'Next.js', and specific version numbers (React 18/19, Next.js 14/15). Missing some synonyms like 'functional programming', 'Option', 'Either', 'TaskEither', or 'monads' that users might naturally mention.	4 / 5
Distinctiveness Conflict Risk	The combination of 'fp-ts' with 'React' is fairly distinctive and unlikely to conflict with generic React skills or generic functional programming skills. However, there could be minor overlap with a general fp-ts skill or a general React patterns skill.	4 / 5
	Total	13 / 20 Passed

Validation

81%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 9 / 11 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (793 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	9 / 11 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: skills/fp-react/SKILL.md
Commit: fbdfd63

Reviewed: 2 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.