mcpField
V
velt-notifications-best-practices

velt-notifications-best-practices

github.com/velt-js開発147 回インストール4 週間前に更新
リポジトリ

velt-notifications-best-practices について

React と Next.js で Velt の通知機能を実装するためのルールガイドです。セットアップ、データアクセス、配信、UI のカスタマイズ、デバッグを優先度別に整理しています。

主な機能

  1. 0110 カテゴリにわたる 18 のルール
  2. 02通知パネルとタブの設定
  3. 03hooks または REST API によるデータアクセス
  4. 04通知設定と配信チャネルの管理
  5. 05メール、Webhook、バッチ処理の設定
  6. 06通知 UI のカスタマイズと問題の調査

活用シーン

  1. 01React アプリへのアプリ内通知の追加
  2. 02ユーザーごとの通知設定の管理
  3. 03SendGrid によるメール通知の送信
  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 通知のベストプラクティス

React および Next.js アプリケーションにおける Velt の通知システムの包括的な実装ガイドです。影響度に応じて優先順位を付けた 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 対応