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