mcpField
V
velt-notifications-best-practices

velt-notifications-best-practices

github.com/velt-js开发147 次安装4 周前更新
代码仓库

关于 velt-notifications-best-practices

面向 React 和 Next.js 中 Velt 通知功能的规则指南，将设置、数据访问、投递、界面定制和调试整理为按优先级划分的规则。

主要功能

  1. 01涵盖 10 类的 18 条规则
  2. 02配置通知面板和标签页
  3. 03通过 hooks 或 REST API 访问数据
  4. 04管理偏好设置和投递渠道
  5. 05设置邮件、webhook 和批处理
  6. 06定制通知界面并排查问题

适用场景

  1. 01在 React 应用中添加应用内通知
  2. 02管理每位用户的通知设置
  3. 03通过 SendGrid 发送邮件通知
  4. 04将通知事件连接到外部服务

安装

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

$npx skills add https://github.com/velt-js/agent-skills --skill velt-notifications-best-practices

安装后在 Claude Code 中输入/velt-notifications-best-practices确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.full.md
AGENTS.md
metadata.json
README.md
rules/react/data/
data-hooks.md
rules/react/debug/
debug-common-issues.md
rules/react/settings/
settings-channels.md
rules/shared/
_sections.md
_template.md
rules/shared/config/
config-cross-organization.md
rules/shared/core/
core-setup.md
rules/shared/data/
data-notification-actions.md
data-notification-data-provider.md
data-rest-api.md
rules/shared/delivery/
delivery-delay-batching.md
delivery-email.md
delivery-webhooks.md
rules/shared/panel/
panel-current-document-only.md
panel-display.md
panel-tabs.md
rules/shared/settings/
settings-config-rest-api.md
rules/shared/triggers/
triggers-custom.md
triggers-self-notifications.md
rules/shared/ui/
ui-wireframes.md
rules/shared/wireframe-variables/
wireframe-variables-notifications-panel.md
wireframe-variables-notifications-tool.md

详细介绍

Velt 通知最佳实践

Velt 通知系统在 React 和 Next.js 应用中的综合实施指南。包含 10 个类别中的 18 条规则，并按影响程度排序，以指导自动代码生成和集成模式。

适用场景

在以下情况下参考这些指南：

  • 向 React/Next.js 应用添加应用内通知
  • 设置 VeltNotificationsTool 和 VeltNotificationsPanel
  • 配置通知选项卡（For You、All、Documents、People）
  • 通过钩子或 REST API 访问通知数据
  • 管理用户通知偏好设置和渠道
  • 通过 REST API 读取或写入每位用户的通知配置（文档级或组织级）
  • 使用 SendGrid 设置电子邮件通知
  • 通过 REST API 创建自定义通知
  • 通过 Webhook 与外部服务集成
  • 配置通知延迟和批处理，以减少干扰

按优先级划分的规则类别

优先级类别影响前缀
1核心设置CRITICALcore-
2面板配置HIGHpanel-
3数据访问HIGHdata-
4设置管理MEDIUM-HIGHsettings-
5配置MEDIUMconfig-
6通知触发MEDIUMtriggers-
7投递渠道MEDIUMdelivery-
8UI 自定义MEDIUMui-
9线框变量MEDIUMwireframe-variables-
10调试与测试LOW-MEDIUMdebug-

快速参考

1. 核心设置（CRITICAL）
  • core-setup — 启用通知并添加 VeltNotificationsTool
2. 面板配置（HIGH）
  • panel-tabs — 配置通知面板选项卡（forYou、all、documents、people）
  • panel-display — 控制面板打开模式（弹出框或侧边栏）
3. 数据访问（HIGH）
  • data-hooks — 使用 React 钩子访问通知数据
  • data-rest-api — 使用 REST API 在服务端管理通知
  • data-notification-data-provider — 注册 NotificationDataProvider，将自定义通知的获取和删除操作路由到你自己的后端；仅适用于 notificationSource === 'custom' 的通知；处理顺序为 notification → user → comment
4. 设置管理（MEDIUM-HIGH）
  • settings-channels — 配置通知投递渠道
  • settings-config-rest-api — 通过 REST API 在文档级或组织级读取和写入每位用户的通知配置
5. 配置（MEDIUM）
  • config-cross-organization — 跨组织通知：enableCrossOrganization/disableCrossOrganization、CrossOrganizationConfig（organizationIds、excludeOrganizationIds）、合并“For You”信息流、getCrossOrganizationConfig$() 订阅
6. 通知触发（MEDIUM）
  • triggers-custom — 通过 REST API 创建自定义通知
7. 投递渠道（MEDIUM）
  • delivery-email — 使用 SendGrid 设置电子邮件通知
  • delivery-webhooks — 通过 Webhook 与外部服务集成
  • delivery-delay-batching — 配置选择启用的服务端延迟和批处理流程
8. UI 自定义（MEDIUM）
  • ui-wireframes — 使用线框自定义通知组件
9. 线框变量（MEDIUM）
  • wireframe-variables-notifications-panel — 使用模板变量绑定 Notifications Panel 线框槽位（选项卡、设置、每行未读状态、空状态）
  • wireframe-variables-notifications-tool — 使用模板变量绑定 Notifications Tool 线框槽位（替换铃铛图标、未读徽标、面板打开时的激活状态）
10. 调试与测试（LOW-MEDIUM）
  • debug-common-issues — 常见问题及解决方案

使用方法

阅读各条规则文件，了解详细说明和代码示例：

rules/shared/core/core-setup.md
rules/shared/panel/panel-tabs.md

每个规则文件都包含：

  • 简要说明其重要性
  • 附带说明的错误代码示例
  • 附带说明的正确代码示例
  • 官方文档的参考链接

编译后的文档

  • AGENTS.md — 包含所有规则及文件路径的精简索引（从这里开始）
  • AGENTS.full.md — 内联展开所有规则的完整详细指南

评论

支持 Markdown