Communitygithub.com

sujith011/agentic-pro-skills

设计或修复客户端、URL和服务器状态的所有权,包括请求竞争、乐观更新和会话变更。

agentic-pro-skills 是什么?

该技能专注于前端状态管理,帮助开发者或AI代理明确客户端、URL和服务器状态的所有权,解决常见的竞争条件、乐观更新和会话变更问题。它支持所有主流前端框架(如React、Vue、Angular),通过分类每个值的所有权(如持久服务器数据、可共享URL/导航状态、表单草稿或临时展示状态)来优化状态管理。技能强调使用现有状态/数据获取工具,避免引入不必要的共享状态,并推荐显式建模加载、空、错误和成功状态。对于乐观更新,它提供了与服务器协调和定义失败行为的最佳实践,同时建议使用取消或结果验证来处理并发请求。通过验证回退/前进导航、重试、快速输入变更和账户切换等场景,该技能确保状态管理的健壮性和可维护性。

兼容平台✓Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add https://github.com/sujith011/agentic-pro-skills/tree/HEAD/skills/frontend-state

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

前端状态

流程

  1. 对每个值进行分类:持久化服务器数据、可共享的URL/导航状态、表单草稿或临时展示状态。选择一个权威的所有者。
  2. 重用已安装的状态/数据获取工具。将本地状态保持在其消费者附近;仅在存在具体的协调需求时引入共享状态。
  3. 根据所有查询和授权维度对服务器缓存进行键控。在登出、租户切换和身份变更时清除或隔离它们。
  4. 显式建模加载、空、错误和成功状态。对于并发请求,取消可以减少工作量,但也要防护结果接受,以便旧响应不能替换新意图。
  5. 对于乐观更新,与服务器协调并定义失败行为。回滚不得擦除新的成功变更;追踪操作或使用库支持的并发模式。
  6. 验证前进/后退导航、重试、快速输入变更、失败变更和账户切换。

示例

搜索A后搜索B,B先返回而A后返回。显示的结果保持为B,URL反映当前搜索而非响应完成顺序。

停止条件

不要为解决本地竞态而替换状态库。将相同的服务器值重复复制到独立的全局存储中会产生同步义务。

证据

  • 状态所有权映射和缓存键。
  • 竞态/回滚/会话切换检查。
  • 可见的加载和恢复行为。

参考

在参考react-state-management后独立编写的工作流。

相关技能