hwc-ux-feedback

ユーザー体験とフィードバック

Hotwire に、横断的なフィードバックと体感パフォーマンスのパターンを実装します。

コアワークフロー

1. フィードバックの必要性を特定します：読み込み、送信中のアクティビティ、進捗状況の報告、楽観的更新、または画面遷移。
2. まず組み込みの Turbo セマンティクス（busy、プログレスバーのフック、送信／レンダリングのライフサイクルイベント）を優先します。
3. 楽観的更新は、明確な整合性確保の方法がある場合にのみ追加します。
4. 画面遷移のロジックは、明示的なライフサイクルイベントと、キャッシュ／プレビューに安全な経路に限定します。
5. ネットワークが遅い場合、戻る／進む操作後にバック／フォワードキャッシュから復元する場合、送信に失敗した場合の UX の挙動を確認します。

ガードレール

• ネットワークやレンダリングの完了を示す代わりに、固定のタイムアウトを使用しないでください。
• プレビューとキャッシュからの復元時は、アニメーション／画面遷移を制御してください。
• 送信のロックと解除が、開始イベントと終了イベントの間で対称になるようにしてください。
• UX フィードバックのロジックは、ドメイン固有のフォーム／メディア／ナビゲーションの実装から分離してください。

必要なリファレンスのみを読み込む

現在のリクエストに必要なファイルのみを開いてください。

• Turbo プログレスバーの再利用：references/2023-07-18-turbo-drive-progress-bar.md
• フォームのアクティビティインジケーター：references/2023-06-06-turbo-drive-form-activity-indicators.md
• レンダリングの割り込みとページ遷移：references/2023-04-25-turbo-drive-render-interception.md
• Swiper のような画面遷移の挙動：references/2024-11-19-turbo-drive-swiper-view-transitions.md
• Frame のビジースピナーのパターン：references/2026-01-20-turbo-frames-loading-spinner.md
• Turbo morph による整合性確保を伴う楽観的 UI：references/2024-03-26-optimistic-ui-with-turbo-8-morphs.md
• ULID に基づく楽観的な識別戦略：references/2024-08-13-turbo-drive-ulid.md

全カタログは references/INDEX.md を参照してください。

関連スキルへのエスカレーション

• フォームのバリデーションと送信の正確性に関する懸念：hwc-forms-validation を使用します
• ナビゲーション／履歴／キャッシュのフローに関する懸念：hwc-navigation-content を使用します
• リアルタイムのプッシュ更新とストリームアクション：hwc-realtime-streaming を使用します
• メディア固有の再生／アップロードに関する懸念：hwc-media-content を使用します
• Stimulus API／コントローラーの基本事項：hwc-stimulus-fundamentals を使用します