実装 / リファクタリング） は何をしますか？
真の情報源は上流リポジトリ https://github.com/Caho1/open-claude-ui (MIT) です：AGENTS.md（トークン、プリセット、コンポーネント）、code-examples/ および docs/v2/（Claude Desktop 2.0、v2.37337.1）。以下のパスはそのリポジトリからの相対パスです。プロジェクトと一緒にクローンまたは開くか、GitHubで読んでください。このスキルはワークフローであり、値を複製しません。タスクがv2の動作（密度、サイドバー、エフォート、コンポジターモーション、オフラインキュー）に触れる場合は references/v2-delta.md を読んでください。
0. 最初にベースラインを選ぶ
- CDS 1.x (
code-examples/のデフォルト)：暖色系クレイのアクセントカラー、20pxコンポーザー、8px半径、Framer Motionスプリング。 - CDS 2.0 (docs/v2)：寒色系
#FCFCFBキャンバス、12/14pxコンポーザー、6/8px半径、24/32pxコントロール、CSSコンポジターモーション。 どちらかを尋ねるか推測してください。1つのサーフェス内でこれらを混在させないでください。多くのv2トークン（--cds-h-control、data-density）はdocsに文書化されていますが、code-examples/cds-theme.cssにはまだ定義されていません。使用前に定義してください。
1. ワークフロー
- 分類：タスクを分類します。新しいコンポーネント / リススタイル / リファクタリング / 監査。
- 書く前に再利用：
code-examples/（30モジュール、AGENTS.md §3に索引）とsrc/index.tsを確認します。合成または拡張してください。再導出しないでください。 - トークン：すべての色、半径、期間、イージングは
--cds-*変数またはTailwindエイリアスから取得します。生の16進数は使わず、アドホックなmsも使わないでください。 - モーション：以下の表に従って選択します。
- エッジガード（セクション3）：入力、スクロール、iframeコードに対して実施します。
- 検証（セクション4）：失敗箇所をそのまま報告します。
2. 決定ルール
モーションの選択
| 状況 | 使用するもの |
|---|---|
| ホバー/プレス/フェード/スケルトン/エントランス、ストリーミング中に実行されるもの | Pure CSS + --cds-dur-* + --cds-ease-*（コンポジターのみ：transform、opacity、filter） |
| ドラッグリリース、速度やレイアウトに依存する幅/高さ | Framer Motion と SPRING_BOUNCY / SNAPPY / GENTLE / HEAVY_SNAP のいずれか |
| モーション軽減 | スナップ、状態変更は絶対に削除しない。prefers-reduced-motion を尊重する |
transition: all は絶対に使わず、linear も使わず、ハードコードされたスプリング数値も使わない。var(--cds-dur-*) を使用した transition のショートハンドは、トークンが未定義の場合に暗黙的に失敗するため、5つすべて（60ms / 120 / 200 / 300 / 450）を定義してください。 |
サーフェスと境界線：surface-0..3 とヘアラインの border-subtle（v2では0.5px）でレイヤリングします。ストロークは1つのみ：境界線のあるコンテナ内のコントロールは border-none を取得します。影は固定のアルファ黒ではなく、color-mix() を使用してサーフェスから導出します。純粋な #000 / #fff は絶対に使わないでください（コードブロックの #0d0d0c は除く）。
密度：--cds-h-control / --cds-radius / --cds-icon からコントロールのサイズを取得します。固定pxは使わないでください。これによりCompactとComfortableの両方で機能します。44pxのヒットエリアを下回るCompact行は、ネガティブマージンのタッチ拡張（--cmp-chin-touch-grow）を使用します。
数字：タイマー、カウンター、トークンゲージ、行番号はすべて tabular-nums を使用します。
情報設計（v2のスタンス）：チャットのおもちゃではなく、ワークステーションです。ゆったりしたカードよりも、密集したステータス行（28px、ブランチ、PR、実行ハートビート）を優先します。コスト/リスクを明示的に表示します（Max警告付きのエフォート階層、使用量ゲージ）。ユーザー入力を貴重なものとして扱います。
3. 非妥協のガード
- IME：Enter-to-sendの前に
if (e.nativeEvent.isComposing || e.keyCode === 229) return;を追加します。 - ストリーミングスクロール：
Date.now() - lastUserScroll < 150の場合は自動ピン留めしないでください。ピン留めは下端から40px以内の場合のみに行います。 - モデル生成HTMLのためのiframe：
allow-same-originなしでサンドボックス化し、オリジンチェック付きのpostMessage、navigator.userActivationでゲートします。 - ゼロロス入力：失敗/オフライン送信は永続化され（IndexedDBキュー）、リロード時に復元します。
- 環境の不変性：コンテキストウィンドウ / ワークツリー / MCP設定はセッション作成時に固定され、セッション中にそれらを編集するUIを構築しないでください。
- バイナリアセット（
.ttf/.otf/.mp3/.wav）は使用しません。システムフォントスタックとWeb Audio合成のみを使用します。 - ライトモード（
:root）とダークモード（.dark）の両方をチェックする必要があります。寒色系の紫/ネオングラデーション（1.x）は使用しません。 - キーボード：リスト/グリッドはロービングフォーカス（
useClaudeRovingFocus）を使用します。ダイアログはフォーカスをトラップします。
4. リファクタリング / 監査チェックリスト
ターゲットで以下をgrepします：16進数リテラル、rounded-[…px]、transition-all、ease-linear、duration-[…]、プリセット外の stiffness:、IMEガードがないEnterの onKeyDown、ストリーミングコード内の scrollTo/scrollTop =、allow-same-origin、境界線のある親にネストされた1px境界線。それぞれをトークン/プリセット/ガードに置き換えます。動作は維持し、要求されない限り表示のみを変更します。
次に、以下を実行し、すべてが終了コード0で終了する必要があります：
npm run typecheck && npm run check:tokens && npm run build
AGENTS.md に --cds-* リファレンスを追加した場合、check:tokens はそれが cds-theme.css に存在することを要求します。
5. 出力契約
使用したベースライン（1.x / 2.0）、再利用した既存モジュール、選択したトークン/プリセットとその理由、および検証結果を記述します。検証されていないもの（例：ビジュアルダークモードチェック）は「未検証」とマークします。