ultrahand: tablet

將平板螢幕設計為互動式 Claude 產物（artifact）。此 artifact 可在 iPad 與 Android 平板尺寸之間切換（包含直橫方向），並可貼齊 1/3、1/2、2/3 的分割寬度；當您將視窗從全寬拖曳至 320 像素時，版面會即時重新排列。您應用的每一條規則皆載於 references/principles.md，且每條規則均註明引用來源 references/sources.md。尺寸、分割方式與尺寸類別則定義於 references/presets.md。

1. 收集需求

僅詢問您無法推斷的資訊。在開始繪製前，先確認以下事項：

平台： iPadOS、Android，或兩者皆支援。若兩者皆需，請使用 48 單位目標與平台中立模式。
範圍： 單一畫面或一套流程。若是流程，請列出所有畫面以及使用者如何在畫面間移動（側邊欄或導覽軌、列表到詳細頁、工作表、彈出視窗或新視窗）。
主要任務： 每個畫面的唯一用途，以及最適合它的標準佈局（列表-詳細、輔助窗格、動態消息或單一窗格）。
真實內容： 名稱、長度、數量以及最長的可能字串。請勿使用 lorem ipsum 進行設計。
資料狀態： 哪些資料會載入、哪些可能為空、哪些可能失敗或離線。
輸入方式： 僅觸控，或包含鍵盤、觸控板／滑鼠、Apple Pencil。除非特別說明，否則預設所有輸入方式皆有可能。
多工處理： 使用者在此應用程式之外可能進行的操作（如並排參考、拖曳內容進出）。視窗寬度應涵蓋從 320 到全螢幕。
限制條件： 品牌顏色、字型、現有設計系統，以及是原生應用程式還是網頁。
主題： 在選擇任何顏色、尺寸或間距前，請先查閱專案的主題（design/THEME.md、*.tokens.json；詳見 shared/theme/README.md）。若存在主題，請依其設計：執行 node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html，在建置時傳入 --head theme.html，僅使用其中的自訂屬性（var(--color-surface)、var(--space-gap-group)），並重複使用其庫存中的元件。當設計需要主題中未提供的內容時，請使用最接近的 token，並在待釐清問題中列出新增項目；請勿自行發明數值。若無主題，請遵循 shared/theme/rules.md 中的強制規範，並提供 theme 技能。

2. 閱讀參考資料

在開始設計前，請先閱讀 references/principles.md 與 references/presets.md。請使用平台自身的模式（側邊欄或導覽軌、分割畫面、彈出視窗、選單列指令），而非自行發明新的模式。

3. 組合畫面

通過各自檢查的元件組合起來仍可能造成畫面雜亂。在開始建置前，請規劃它們如何形成區塊，以及區塊如何形成畫面，使用外掛程式的組成規則（詳見 shared/composition/principles.md）：

撰寫區塊地圖。 為每個畫面列出其區塊（側邊欄、列表窗格、附帶工具列的詳細窗格、檢查器），每個區塊的單一職責、其成員依使用頻率排序、以及一個強調重點。說明哪些是主要內容，哪些是裝飾性元素：內容應佔主導地位，裝飾性元素則應退居次要。
用間距分組。 群組內部的間距應明顯小於群組之間的間距；僅在無法用間距表現分組時才加入容器。
同一角色同一外觀，每區一個強調重點。 相同角色使用相同樣式；狀態與標籤絕不能看起來像按鈕；強烈強調色僅用於每區一個元素，選取狀態則使用較低調的處理方式。
保持精簡。 約三種字體大小、一件事只出現在一處、常用成員保持可見、罕用成員收至選單後。當新增內容時，先重新組織，再只加入真正值得加入的元素。

4. 建置畫布 artifact

以外掛程式的共享可調整畫布為基礎（shared/canvas/；其 README.md 提供完整合約）。將畫面撰寫為 screen.html，並將設計本身設定寫入 config.json，置於一個工作資料夾中，然後建置：

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/tablet/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<設計名稱>" --out index.html

將 index.html 發佈為 artifact。畫布會從 references/presets.md 取得：

全螢幕： ipad-mini 744、ipad 820、ipad-13 1032 和 android-tablet 800。旋轉可獲得每個尺寸的橫向模式。
分割畫面： ipad-split、ipad-13-split 和 android-split，即橫向裝置中您的應用程式位於分隔線一側。分隔線可貼齊 1/3、1/2 和 2/3（拖曳它，或聚焦後按方向鍵）；Full 是橫向模式下的全螢幕預設值。
自由調整大小： 從預設尺寸向下拖曳調整把手至 320 × 450。
檢查點： 320 寬度重排，以及橫向含鍵盤（1180 × 420）。

拖曳過程中，版面必須即時重新排列。從全寬縮小至半寬時必須連續重新渲染，跨越 840 和 600 的斷點而不需重新載入或遺失狀態。顯示器會顯示當前寬度及其尺寸類別（compact、medium、expanded、large）。

config.json 設定 title 和 states（例如 default、loading、empty、error）。若為僅 Android 的設計，請設定 "initialPreset": "android-tablet"；若同時支援 iPadOS 與 Android，請設定 "minTarget": 48。
畫面合約： 一個 <template id="uh-screen">，內含 [data-screen] 區塊，以及用於點擊的 data-nav、data-nav-replace、data-nav-back 和 data-show-state。請依尺寸類別使用 @container screen (width >= 600px) 和 (width >= 840px)，或檢視區的 data-width-class 進行佈局，不可使用預設值或 @media。邊緣內距使用 var(--uh-safe-*)，宣告於 [data-screen] 上（:host 無法看見）。文字使用 rem；點擊區域、圖示與間距使用 px，因此 200% 文字僅放大字詞，不放大控制項。顏色使用 light-dark()。行為撰寫於 window.ultrahandSetup = function (canvas) { … } 中。
內建切換功能： 淺色／深色、200% 文字、狀態選擇器與顯示點擊目標。請勿自行建置。在開啟工作表、彈出視窗或選單後，請呼叫 canvas.refresh()。
指標與鍵盤始終啟用： 檢視者使用滑鼠與鍵盤操作 artifact，因此每個控制項都需具備懸停狀態、右鍵選單（平台有提供者）、可見的 :focus-visible 焦點以及快捷鍵提示。使用點擊目標疊層檢查觸控。請勿將這些功能隱藏在自己設定的切換開關之後。
在視窗化的 iPad 狀態下，請確保工具列左側按鈕不會與視窗左上方的控制項重疊。
主要流程必須可點擊：導覽切換、選取或推入列、隱藏與顯示窗格、以及開啟與關閉工作表和彈出視窗。絕不使用 alert、confirm 或 prompt。

5. 設計每個尺寸類別

從寬到窄進行設計，並在問題出現的尺寸處修正：

Expanded / large，橫向全螢幕（例如 ipad 1180）：選擇窗格、導覽方式（側邊欄或導覽軌）與密度。設定行長與控制項寬度上限。
Medium，直向全螢幕與 2/3 分割（例如 820、787）：收合為較少窗格，使用導覽軌或頂部分頁列。
Compact，1/2 與 1/3 分割（例如 590、393）：手機佈局，使用底部欄或分頁列，一次顯示一個窗格，並提供返回列表的按鈕。
拖曳從全寬緩慢拖曳至 320，再返回。檢查選取、捲動位置與已輸入文字是否保留。檢查列表-詳細佈局在縮小時是否保留開啟的詳細窗格，並在放大時選取該項目。

然後檢查額外情況：320 寬度重排、橫向含鍵盤、以及 android-tablet 預設值（若 Android 在範圍內）的直橫兩種方向。

6. 呈現前自我檢查

逐項檢查。修正任何失敗項目，或說明其可接受的原因。

組成（執行組成審計：node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs"，在最寬與最窄尺寸下進行，或以目視檢查）：

模糊處理後，畫面應顯示預期的區塊，且主要內容應最先吸引目光。無預期的亮點。
每個區塊有單一職責，其成員依功能與頻率分組，群組間間距明顯大於群組內間距。
每個區塊最多一個強烈強調的元素；選取狀態應低調。
同一角色同一樣式：計算每個區塊的控制樣式數量，並為任何額外樣式提供理由。標籤或狀態看起來不應像按鈕。
列與區塊對齊共享邊緣；畫面中約三種字體大小。
無重複顯示的資訊，且畫面中無不服務於當前任務的內容。
經過一輪修改後：列出新增的內容；畫面不應比必要情況更複雜。
僅使用主題值：無原始顏色、無偏離 8 點尺度的間距、無尺規外的字體大小，且庫存元件應重複使用而非重建（shared/theme/rules.md NN-1、NN-2、NN-6、EV-4）。

元件與平台：

7. 呈現

分享 artifact 連結。用幾行文字說明區塊地圖（每個區塊的職責與強調重點）、關鍵決策與其背後原則（註明來源鍵）、各寬度類別的佈局變化、任何您接受並附有理由的檢查項目、以及任何建議的主題新增項目（供 theme 技能使用），以及任何待釐清問題。

tablet（平板介面設計）