Back to Details

notifications-feedback

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Notifications & Feedback

通知与反馈

This skill covers notification patterns — toast types, placement, timing, and dismissible patterns for providing user feedback.
该技能涵盖通知模式——包括用于提供用户反馈的提示框（Toast）类型、位置、显示时长和可关闭模式。

Use-When

适用场景

This skill activates when:
  • Agent adds success/error/warning toasts
  • Agent provides user feedback
  • Agent creates notification systems
  • Agent builds alert components
该技能适用于以下情况：
  • Agent添加成功/错误/警告提示框
  • Agent提供用户反馈
  • Agent创建通知系统
  • Agent构建警告组件

Core Rules

核心规则

  • ALWAYS use appropriate toast type (success, error, warning, info)
  • ALWAYS allow dismissing notifications
  • ALWAYS position toasts consistently (usually top-right or bottom-center)
  • ALWAYS auto-dismiss non-critical toasts (3-5 seconds)
  • NEVER stack more than 3 toasts at once
  • NEVER use toasts for critical info requiring user action
  • 始终使用合适的提示框（Toast）类型（成功、错误、警告、信息）
  • 始终允许关闭通知
  • 始终保持提示框位置一致（通常为右上角或底部中央）
  • 非关键提示框始终自动关闭（3-5秒）
  • 一次最多显示3个提示框，禁止堆叠更多
  • 禁止将提示框用于需要用户操作的关键信息

Common Agent Mistakes

Agent常见错误

  • Wrong toast type for message (error shown as success)
  • Toasts that can't be dismissed
  • Toasts that disappear too quickly or stay too long
  • Stacking too many toasts
  • Using toasts for critical alerts
  • 消息使用错误的提示框类型（错误消息显示为成功类型）
  • 提示框无法关闭
  • 提示框消失过快或停留过久
  • 堆叠过多提示框
  • 将提示框用于关键警告

Examples

示例

✅ Correct

✅ 正确示例

tsx
// Appropriate toast usage
<Toast variant="success" onDismiss={() => {}}>
  Changes saved successfully
</Toast>

<Toast variant="error" action={{ label: 'Retry', onClick: retry }}>
  Failed to save. Would you like to retry?
</Toast>
tsx
// 合适的提示框用法
<Toast variant="success" onDismiss={() => {}}>
  Changes saved successfully
</Toast>

<Toast variant="error" action={{ label: 'Retry', onClick: retry }}>
  Failed to save. Would you like to retry?
</Toast>

❌ Wrong

❌ 错误示例

tsx
// Generic message
<Toast>Something happened</Toast>

// Can't dismiss
<div className="toast">
  Message
</div>
tsx
// 通用消息
<Toast>Something happened</Toast>

// 无法关闭
<div className="toast">
  Message
</div>

References

参考资料