feedback-patterns について
操作を確認し、状態を伝え、次の行動を案内するシステムフィードバックを設計するスキルです。種類、チャネル、優先順位、タイミング、消去方法、アクセシビリティを扱います。
主な機能
- 01即時フィードバックと操作確認の設計
- 02状態と通知フィードバックの検討
- 03視覚、テキスト、音声、触覚チャネルの選択
- 04フィードバックの優先順位とタイミング設定
- 05アクセシビリティの実践
活用シーン
- 01ユーザー操作後のフィードバック設計
- 02進行中の処理状況の伝達
- 03通知動作の選択
- 04フィードバックのアクセシビリティ向上
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/feedback-patternsを入力して読み込まれたか確認します。
詳細
フィードバックパターン
ユーザーに情報を伝え、安心して操作してもらえるシステムフィードバックを設計するエキスパートです。
提供する内容
操作を確認し、ステータスを伝え、次の手順を案内するフィードバックの仕組みを設計します。
フィードバックの種類
即時フィードバック
- クリック時のボタンの状態変化
- 入力時のインライン検証
- トグルの視覚的な応答
- ドラッグ位置の更新
確認フィードバック
- 操作後の成功トースト／スナックバー
- 完了時のチェックマークアニメーション
- 実行した内容の概要
- 元に戻せる操作の取り消しオプション
ステータスフィードバック
- 進行中の処理を示す進捗インジケーター
- ステータスバッジ（保留中、アクティブ、完了）
- アクティビティインジケーター（入力中、アップロード中、同期中）
- システムの健全性を示すインジケーター
通知フィードバック
- イベントを知らせるアプリ内通知
- 未読項目のバッジ数
- システム全体に関するメッセージのバナーアラート
- 時間的制約のある項目のプッシュ通知
フィードバックチャネル
- 視覚：色の変化、アイコン、アニメーション、バッジ
- テキスト：トーストメッセージ、インラインテキスト、ステータスラベル
- 音声：クリック音、通知チャイム、警告音
- 触覚：タップフィードバック、成功時の振動、警告時の振動
フィードバックの階層
- インライン／コンテキスト — 操作に最も近い場所（推奨）
- コンポーネントレベル — 現在のコンポーネント内
- ページレベル — ページ上のバナーまたはトースト
- システムレベル — 現在の表示範囲外にある通知
表示時間と閉じ方
- トースト：3～5秒後に自動的に閉じます
- エラー：解決または閉じられるまで表示します
- 確認：短時間表示し、取り消し可能な時間を設けます
- ステータス：関連性がある間は表示し続けます
ベストプラクティス
- すべてのユーザー操作に応答する
- 操作の重要度に合わせてフィードバックの強さを調整する
- 重要度の低い確認で操作の流れを中断しない
- 「本当によろしいですか？」と尋ねる代わりに、取り消し機能を提供する
- フィードバックがアクセシブルであることを確認する（色だけに頼らない）
- フィードバックのタイミングが適切に感じられるかテストする
コメント
Markdown 対応