toast
Toast notifications with Sonner for user feedback. Use for success/error messages, async operation feedback, and temporary notifications. Always use when using Sonner.
ソース情報
- リポジトリ
- udecode/kitcn
- ソースの最終更新活動
- 2026年3月30日 13:19
- 検出された SKILL.md の言語
- 英語
- スター
- 450
- フォーク
- 34
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- description
- Toast notifications with Sonner for user feedback. Use for success/error messages, async operation feedback, and temporary notifications. Always use when using Sonner.
- name
- toast
- metadata
- {"skiller":{"source":".agents/rules/toast.mdc"}}
# Toast Notifications
## Context
- When displaying temporary notifications to users
- For success, error, or informational messages
- For async operation feedback
- DO NOT overuse toasts, follow the standard UX patterns
## Requirements
- Import toast from 'sonner' package
- Use toast.promise() for async operations with loading/success/error states
- Use direct toast methods for immediate notifications
- Keep messages concise and informative
## Examples
<example>
// For async operations
const promise = someAsyncOperation();
toast.promise(promise, {
loading: 'Operation in progress...',
success: 'Operation successful!',
error: 'Operation failed.',
});
</example>
<example>
// For immediate notifications
toast.success('Action completed successfully!');
toast.error('An error occurred.');
toast.info('Here's some information.');
</example>
<example type="invalid">
// Don't create custom toast implementations
const showToast = (message) => {
const toastElement = document.createElement('div');
toastElement.innerText = message;
document.body.appendChild(toastElement);
setTimeout(() => toastElement.remove(), 3000);
};
</example>
<example type="invalid">
// Don't use alert() for notifications
alert('Operation successful!');
</example>
GitHubで見る