技能 fp-ts-react
📦
fp-ts-react
内容修订 r2 安全 ⚙️ 外部命令🌐 网络访问
使用 fp-ts 构建类型安全的 React 应用
使用 fp-ts 的 React 团队经常难以将函数式类型与 hooks、表单和异步 UI 连接起来。此 skill 提供用于编写更安全的 React 和 Next.js 代码的实用模式。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "fp-ts-react" from https://skillstore.io/skills/sickn33-fp-ts-react.md and its manifest at https://skillstore.io/api/skills/sickn33-fp-ts-react/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“fp-ts-react”。 一个个人资料组件将用户数据存储为 null，并在多个渲染分支中检查它。
预期结果:
- 响应建议对用户状态使用 Option。
- 它解释如何清晰地渲染空状态和已加载状态。
- 它指出在何处使用简单默认值比条件分支更好。
正在使用“fp-ts-react”。 一个注册表单在遇到第一个无效字段后就停止，并给出不清晰的反馈。
预期结果:
- 响应建议使用带累积错误的 Either 验证。
- 它将字段验证与提交行为分离。
- 它描述用户如何一次性看到所有可操作的错误。
正在使用“fp-ts-react”。 一个仪表盘分别使用 loading、data 和 error 布尔值，这些状态可能相互冲突。
预期结果:
- 响应建议使用 RemoteData 状态模型。
- 它描述四种允许的状态以及每种状态的预期 UI。
- 它强调如何移除不可能的状态组合。
安全审计
安全v5 • 2026/7/23 打开版本化报告
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.
1
已扫描文件
803
分析行数
0
复核项
0
已忽略误报
风险因素
⚙️ 外部命令 (50)
SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:36 SKILL.md:40-80 SKILL.md:80-84 SKILL.md:84-105 SKILL.md:105-111 SKILL.md:111 SKILL.md:115-135 SKILL.md:135-139 SKILL.md:139-217 SKILL.md:217-221 SKILL.md:221-238 SKILL.md:238-248 SKILL.md:248-259 SKILL.md:259-305 SKILL.md:305-309 SKILL.md:309-312 SKILL.md:312-314 SKILL.md:314-318 SKILL.md:318-322 SKILL.md:322-338 SKILL.md:338-344 SKILL.md:344-348 SKILL.md:348-377 SKILL.md:377-381 SKILL.md:381-401 SKILL.md:401-414 SKILL.md:414-418 SKILL.md:418-430 SKILL.md:430-436 SKILL.md:436-440 SKILL.md:440-450 SKILL.md:450-454 SKILL.md:454-469 SKILL.md:469-473 SKILL.md:473-475 SKILL.md:475-477 SKILL.md:477-493 SKILL.md:493-503 SKILL.md:503-533 SKILL.md:533-537 SKILL.md:537-554 SKILL.md:554-558 SKILL.md:558-579 SKILL.md:579-587 SKILL.md:587-606
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/sickn33-fp-ts-react/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-fp-ts-react?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-fp-ts-react?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-fp-ts-react/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-fp-ts-react.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
sickn33. (2026). fp-ts-react security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-fp-ts-react/audits/5BibTeX 引用
@techreport{sickn33-sickn33-fp-ts-react-2026,
author = {sickn33},
title = {fp-ts-react security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-fp-ts-react/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "fp-ts-react security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/sickn33-fp-ts-react/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-fp-ts-react:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
85
内容
68
社区
74
规范符合性
你能构建什么
重构可空状态
用 Option 替代 null 检查，使 React 组件中缺失数据的处理更加明确。
改进表单验证
使用 Either 模式返回有用的验证错误，避免混合无效状态和有效状态。
标准化异步 UI
采用 TaskEither 和 RemoteData 模式，实现一致的加载、错误和成功页面。
试试这些提示
解释 fp-ts 类型
解释如何在包含可空用户数据的 React 组件中使用 Option。示例要实用且简洁。
重构表单验证
将此 React 表单验证重构为使用 Either，并收集所有验证错误。保留当前用户体验。
设计异步状态
为此仪表盘数据流设计一种 TaskEither 和 RemoteData 方案。包括加载、重试和错误显示行为。
审查 React 架构
审查此 Next.js 功能中的 fp-ts React 模式。识别不安全的状态、薄弱的验证和可避免的重新渲染风险。
最佳实践
- 当值可能不存在且这种缺失是预期情况时，使用 Option。
- 当必须在类型系统中表示失败时，使用 Either 或 TaskEither。
- 通过将异步工作流建模为显式状态，保持 React 渲染状态简单。
避免
- 当普通 TypeScript 更清晰时，不要将每个值都包装在 fp-ts 类型中。
- 当 loading、data 和 error 状态可能相互冲突时，不要混用这些布尔值。
- 不要在渲染逻辑或验证函数中隐藏副作用。
常见问题
谁应该使用此 skill？
如果你使用 TypeScript 构建 React 或 Next.js 应用，并希望获得实用的 fp-ts 模式，就可以使用它。
它需要高级函数式编程知识吗？
不需要。示例通过常见 React 任务介绍 Option、Either、TaskEither 和 RemoteData。
它能帮助处理 React 表单吗？
可以。它展示如何验证表单并使用 Either 返回有用的错误信息。
它能帮助处理数据获取吗？
可以。它涵盖 TaskEither、自定义 fetch hooks、链式请求、并行请求和 RemoteData 状态。
它支持 React 19 模式吗？
可以。它包含 React 19 工作流中 use、useActionState 和 useOptimistic 的示例。
它会自动运行命令吗？
不会。它是文档指导。在项目中运行任何包安装命令之前，请先审查该命令。