鉄則: チャットインターフェースを構築する前にこのスキルを読み込んでください。ストリーミングやメッセージフォーマットを、このスキルのパターンに照らし合わせて検証することなくハードコーディングしてはいけません。

AI チャットインターフェーススキル

テックスタック: Angular 21.x (signals、daisyUI、TailwindCSS) | Flutter 3.41.x (Riverpod、Dart 3.10.9)

アクティベート時機

以下のいずれかのタスクが含まれる場合、このスキルを読み込んでください:

• LLM レスポンスのストリーミングレンダリング (SSE / チャンク化 HTTP)
• アシスタント/ユーザーバブル付きのチャットメッセージリスト
• トークンコンテキストウィンドウインジケータ
• 再生成 / 生成停止コントロール
• 👍👎 フィードバック収集
• マルチモーダル入力 (チャットボックスへのファイル/画像添付)
• AI 固有のエラー状態 (拒否、レート制限、コンテキスト超過)
• メッセージスレッド内のツール呼び出し可視化

コード記述前チェックリスト

コンポーネント作成前に確認してください:

1. Angular: angular-spa スキルを読む — signal/OnPush/daisyUI の基線を確認
2. Flutter: flutter-mobile スキルを読む — Riverpod/AppSpacing/colorScheme の基線を確認
3. ドキュメント: Context7 MCP を使用して、このセッション内で確認されていないライブラリ (marked、flutter_markdown など) について確認

コアコンポーネント概要

コンポーネント	Angular	Flutter
メッセージバブルリスト	ChatMessageListComponent	ChatMessageList ウィジェット
ストリーミングメッセージ表示	StreamingMessageComponent	StreamedMessageWidget
トークンインジケータ	TokenIndicatorComponent	TokenIndicatorWidget
チャット入力 (マルチモーダル)	ChatInputComponent	ChatInputWidget
フィードバックバー	FeedbackComponent	FeedbackBar ウィジェット
AI エラー表示	AiErrorComponent	AiErrorWidget
ツール呼び出し可視化	ToolCallCardComponent	ToolCallCard ウィジェット

クイックスタート

エントリーポイントの配線 (Angular ChatComponent + Flutter ChatScreen) については reference/quick-start.md を参照してください。

キーパターン (概要 — 詳細は参考ファイルを参照)

ストリーミング (Angular)

• AbortController を使用して SSE ストリーム送信中をキャンセル
• オートスクロール: ユーザーが画面下部から 100px 以内にいる場合のみスクロール
• computed() シグナルでレンダリングされるマークダウンを導出 — チャンクごとの再解析を防止
• aria-live="polite" がメッセージリストをラップ

ストリーミング (Flutter)

• AsyncNotifier で Stream.listen を使用して state を段階的に更新
• ScrollController + addPostFrameCallback でフレーム後のオートスクロール
• スクロール애니메이션 前に MediaQuery.of(context).disableAnimations を確認

トークンコンテキスト

• Angular: TokenIndicatorComponent が daisyUI の progress + 80%/100% 時点で text-warning/text-error クラスを使用
• Flutter: LinearProgressIndicator で colorScheme.error / colorScheme.tertiary
• 常に「残り ~N メッセージ」を表示 — 生のトークン数は表示しない

AI エラー

• すべての AI エラータイプは異なるUIステートを持つ — reference/ai-error-handling.md を参照
• AI エラーを無音で無視してはいけません — 常にユーザーが見えるフィードバックとアクションを表示

フィードバック

• Angular: signal<'up'|'down'|null> で選択された👍を追跡; 再生成はプロンプトを再発行
• Flutter: 👍 押下時に HapticFeedback.lightImpact(); アクティブ状態で colorScheme.primary

マルチモーダル入力

• Angular: Angular CDK drag-drop でファイルゾーン; Enter で送信、Shift+Enter で改行
• Flutter: 添付ファイルに image_picker; 自動展開する TextField は maxLines: null

参考ファイル

ファイル	内容
reference/quick-start.md	Angular ChatComponent と Flutter ChatScreen のエントリーポイント配線
reference/streaming-patterns.md	ストリーミング UX、オートスクロール、メモ化、停止コントロール
reference/context-management.md	トークンインジケータ、閾値ロジック、サマリー化トリガー
reference/ai-error-handling.md	拒否、レート制限、コンテキスト超過、タイムアウト、幻覚フラグ
reference/feedback-loops.md	👍👎、コピー、再生成 — Angular & Flutter
reference/multimodal-input.md	ファイル添付、プレビューチップ、自動展開 textarea/field

アンチパターン — 硬い禁止事項

• ストリーミングチャンクごとにマークダウンを再解析してはいけません — computed() / 導出状態でメモ化
• 無条件でオートスクロールしてはいけません — ユーザーのスクロール位置を読取中に奪います
• 生のトークン数をエンドユーザーに表示してはいけません — 人間が読める近似を使用
• AI エラーレスポンスを無音で無視してはいけません — すべてのエラーをログに記録 + ユーザーフィードバックを表示
• エラー/警告ステート用に色をハードコーディングしてはいけません — daisyUI トークンまたは colorScheme を使用
• Angular でコンストラクタ DI を使用してはいけません — inject() を使用
• @Input()/@Output() デコレータを使用してはいけません — input()、output()、model() シグナルを使用
• Flutter で生の EdgeInsets 数値リテラルを使用してはいけません — AppSpacing トークンを使用
• Flutter で Color(0x...) リテラルを使用してはいけません — Theme.of(context).colorScheme を使用

コード記述後レビュー

実装後、以下のレビュアーエージェントを配置します:

項目	エージェント
Angular コード品質	code-reviewer
アクセシビリティ (ARIA、キーボード操作)	accessibility-auditor
Flutter/Riverpod パターン	riverpod-reviewer
セキュリティ (ファイルアップロード、コンテンツレンダリング)	security-reviewer
UI/UX 一貫性	ui-standards-expert