CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills/skills/fp-react/SKILL.md

The canonical home for this skill is fp-react in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

63%Weight 40%Scale 1-5

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

A strong, pragmatic pattern cookbook: nearly everything is concrete, runnable TypeScript with honest treatment of fp-ts-specific React pitfalls (referential stability, impossible states). Its weaknesses are length-driven redundancy (duplicated decision tables, a section that builds a pattern the next section deprecates), a few incomplete snippets, and zero use of progressive disclosure — 793 lines in one file with no external references.

Suggestions

Split advanced material (React 19 patterns, dependency injection with Context/ReaderTaskEither and testing, the cheat sheet) into reference files and point to them from a lean SKILL.md overview.

Remove one of the two duplicate decision tables (Quick Reference vs 'When to Use What') and reconcile section 3's {data, error, loading} hook with section 4's RemoteData guidance so the skill does not teach then reject the same pattern.

Fix the incomplete snippets: add missing imports, define or stub helpers (submitToServer, Spinner, UserCard), and rewrite the field-level-errors example so it composes the Eithers instead of discarding pipe results via mutation.

DimensionReasoningScore

Conciseness

The body is code-heavy and generally tight, but at 793 lines it carries real redundancy: the opening 'Quick Reference' table duplicates the closing 'When to Use What' table, and section 3 builds a {data, error, loading} hook that section 4 then tells the reader to abandon. This matches 'mostly efficient but could be tightened' rather than the minor-trims anchor 4.

3 / 5

Actionability

Nearly all guidance is concrete, executable TypeScript covering the common cases (validation with applicatives, fetching, RemoteData state machine, React 19 hooks, testing with mock dependencies). Minor gaps keep it from 5: some snippets omit imports (useState in the SignupForm component), call undefined helpers (submitToServer, Spinner, UserCard), and the field-level-errors example discards pipe results and relies on mutation side effects.

4 / 5

Workflow Clarity

This is a pattern-selection skill rather than a sequenced process, and pattern choice is made unambiguous by two decision tables and consistent per-pattern 'Use When' framing. No destructive or batch operations exist, so the validation cap does not apply. It falls short of 5 because there is no guidance for sequencing a migration or integration, and the duplicated decision tables slightly muddy navigation.

4 / 5

Progressive Disclosure

No bundle files exist; the entire library — including advanced material like React 19 patterns, dependency injection with testing, a cheat sheet, and a library list — is inlined in one monolithic SKILL.md. Section headers give it structure, but content that clearly belongs in separate reference files is inline with no pointers, matching anchor 3.

3 / 5

Total

14

/

20

Passed

Description

66%Weight 40%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.

A solid, specific description that names the niche (fp-ts + React) and four concrete capability areas with version compatibility. Its main weakness is the complete absence of 'when to use this skill' trigger guidance, which caps completeness, and slightly generic trailing terms that invite overlap with general React skills.

Suggestions

Add an explicit trigger clause, e.g. 'Use when the user works with fp-ts in a React or Next.js codebase, or asks about functional programming patterns for React state, forms, or data fetching.'

Mention the core fp-ts constructs users would name (Option, Either, TaskEither, RemoteData) so natural queries like 'how do I use Either for form validation in React' match.

Include 'TypeScript' and 'functional programming' as trigger synonyms to widen natural-term coverage without adding vagueness.

DimensionReasoningScore

Specificity

The description lists several concrete capability areas ("hooks, state, forms, data fetching") beyond just naming the fp-ts/React domain, matching the 'several specific actions with minor gaps' anchor. It falls short of 5 because 'Practical patterns' is generic padding and no concrete fp-ts constructs (Option, Either, TaskEither, RemoteData) are named.

4 / 5

Completeness

The 'what' is clear (practical fp-ts patterns for hooks, state, forms, data fetching) but there is no 'Use when...' clause or equivalent trigger guidance — 'Works with React 18/19, Next.js 14/15' states version compatibility, not when to invoke the skill, capping completeness at 3 per the judging guidelines.

3 / 5

Trigger Term Quality

Good natural keyword coverage: 'fp-ts', 'React', 'hooks', 'state', 'forms', 'data fetching', 'Next.js 14/15' are phrases users would actually say. Not 5 because common variations like 'functional programming', 'Option', 'Either', and 'TypeScript' are absent.

4 / 5

Distinctiveness Conflict Risk

'fp-ts with React' is a clear, distinctive niche, but the generic terms 'hooks, state, forms, data fetching' create minor overlap risk with plain React or TypeScript skills, matching anchor 4 rather than the minimal-conflict anchor 5.

4 / 5

Total

15

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

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

14

/

16

Passed

Repository

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

plugins/AI-Agents-Safe-Coding-Skills/skills/fp-react/SKILL.md

Reviewed

Table of Contents

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.