CDS 前端（設計/實作/重構）
來源為上游儲存庫 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 Spring 動態。 - CDS 2.0（docs/v2）：冷色
#FCFCFB畫布、12/14px 合成器、6/8px 圓角、24/32px 控制項、CSS 合成器動態。 請詢問或推斷使用哪個版本；切勿在單一介面中混用。許多 v2 設計符號（--cds-h-control、data-density）已在 docs 中記載，但尚未定義於code-examples/cds-theme.css：請在使用前先行定義。
1. 工作流程
- 分類任務：新元件 / 重新樣式 / 重構 / 稽核。
- 先重用再撰寫：檢查
code-examples/（30 個模組，索引位於 AGENTS.md §3）與src/index.ts。組合或擴充，勿重新推導。 - 設計符號：每個顏色、圓角、持續時間與緩動函數皆來自
--cds-*CSS 變數或 Tailwind 別名。無原始色碼、無臨時ms值。 - 動態：依據下方表格選擇。
- 邊界防護（第 3 節）：適用於任何輸入、滾動或 iframe 程式碼。
- 驗證（第 4 節）。逐字回報失敗項目。
2. 決策規則
動態選擇
| 情境 | 使用方式 |
|---|---|
| 懸停/按壓/淡入/骨架/進場，以及任何在串流期間運行的動畫 | 純 CSS + --cds-dur-* + --cds-ease-*（僅限合成器屬性：transform、opacity、filter） |
| 拖曳放開、依賴速度或佈局的寬度/高度 | Framer Motion 搭配 SPRING_BOUNCY / SNAPPY / GENTLE / HEAVY_SNAP 之一 |
| 減少動態模式 | 瞬間切換，絕不移除狀態變更。遵循 prefers-reduced-motion |
絕不使用 transition: all、絕不使用 linear、絕不使用硬編碼的 Spring 數值。使用 var(--cds-dur-*) 的 transition 捷徑會在設計符號未定義時靜默失效，因此請定義全部五個（60ms/120/200/300/450）。 |
表面與邊框：使用 surface-0..3 分層 + border-subtle 細線（v2 中為 0.5px）。僅一層邊框：位於有邊框容器內部的控制項應設為 border-none。使用 color-mix() 從表面顏色衍生陰影，而非固定的黑色不透明度。絕不使用純 #000/#fff（程式碼區塊 #0d0d0c 除外）。
密度：控制項大小來自 --cds-h-control / --cds-radius / --cds-icon，絕不使用固定 px，因此緊湊與舒適模式皆可運作。低於 44px 點擊區域的緊湊列使用負外邊距觸控擴展（--cmp-chin-touch-grow）。
數字：任何計時器、計數器、設計符號計量器、行號皆使用 tabular-nums。
資訊設計（v2 立場）：工作站，而非聊天玩具。偏好密集的狀態列（28px、分支、PR、執行心跳）而非寬鬆的卡片；明確顯示成本/風險（含「最大」警告的努力層級、使用量計量器）；將使用者輸入視為珍貴資源。
3. 非妥協防護
- 輸入法（IME）：在任何 Enter 鍵送出動作之前，加入
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. 重構/稽核查驗清單
在目標中搜尋：色碼、rounded-[…px]、transition-all、ease-linear、duration-[…]、預設值外的 stiffness:、缺少輸入法防護的 onKeyDown Enter 處理、串流程式碼中的 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）、重用了哪些現有模組、選擇了哪些設計符號/預設值及其理由，以及驗證結果。標記任何未經驗證的項目（例如視覺暗色模式檢查）為未驗證。