mcpField
A
app-renderer-systems

app-renderer-systems

github.com/pedronauck开发644285 次安装1 周前更新
代码仓库

关于 app-renderer-systems

app-renderer-systems 是用于扩展领域化 UI 系统的 Skill,强调保持分层边界和既有数据模式,并指导目录布局、适配器、Hook、查询、状态与测试,避免不必要的脚手架。

主要功能

  1. 01系统目录布局和模式指引
  2. 02组件、Hook 与适配器的分层边界
  3. 03查询键与缓存一致性实践
  4. 04类型化错误和取消操作指引
  5. 05按需使用 Context、状态管理和测试的建议

适用场景

  1. 01为现有 UI 系统添加功能
  2. 02调整适配器、查询或 Hook 行为
  3. 03确定功能的状态归属
  4. 04为变更后的约束更新测试

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/pedronauck/skills --skill app-renderer-systems

安装后在 Claude Code 中输入/app-renderer-systems确认已加载。

附带文件references/directory-layout.mdreferences/patterns.md

详细介绍

功能系统

systems/<domain>/ 模块负责其领域面向 UI 的适配器、数据访问、钩子、组件和公共导出文件。扩展现有系统;仅创建功能实际需要的层。修改局部组件并不意味着要搭建 CRUD 适配器、store、上下文提供程序,也不意味着每一层都要编写测试。

需要了解文件放置方式或如何新建系统时,请阅读 references/directory-layout.md;需要了解变更后的 API、查询或钩子模式时,请阅读 references/patterns.md。相关技能按需使用:组件或钩子行为涉及 React,Query、Router 或 Form 涉及 TanStack,store API 涉及 XState Store;编辑测试时,遵循现有测试运行器的指南。遇到尚未解决的故障时再参考调试指南,无需在每次系统修改时都查看。

  • 依赖方向应指向较低层:组件使用钩子,钩子使用查询选项和适配器;适配器不导入 UI。跨系统的使用方通过公共导出文件访问。
  • 在适配器和查询缓存中保留 API 封装;在读取边界将数据扁平化为组件视图模型。根据公共契约派生类型,并在负责该边界的层验证不可信输入。
  • 在加载器、钩子、变更操作和流写入器中复用规范的查询选项和键。包含稳定的作用域和筛选条件;对于无限查询,续页游标应放在 pageParam 中。
  • 通过适配器传递 AbortSignal,并使用项目的类型化错误契约表示错误。在请求边界处理缺失的作用域;仅有 enabled 并不能证明使用非空断言时值不为 null。
  • 遵循现有的数据新鲜度默认设置。通过规范键协调变更;仅当所属读取模型需要重新读取服务端数据时才使缓存失效。只有存在乐观更新契约时才添加乐观回调;取消冲突的读取、完整快照状态,并在失败时恢复。
  • 仅在需要通过子树共享状态时添加上下文。某些上下文适合使用允许为空的必需提供程序模式;只有在所有权或更新频率方面确有依据时,才拆分提供程序。
  • 将服务端状态保留在 Query 中。使用 XState Store 管理事件驱动的本地数据;显式生命周期模式或守卫有时更适合状态机。不要仅仅因为系统包含异步调用就引入 store。
  • 在导出文件中显式导出受支持的操作。复用负责维护各项变更不变量的现有测试套件,不要照着目录树为每一层都添加测试。

评论

支持 Markdown