app-shell-uilisted

# App Shell UI You are implementing **App Shell UI**: a reusable application chrome + visual language. Business content changes; the shell does not. ## Positioning (one line) Not a marketing landing page. Not a dense ops admin. **A system-settings / desktop-utility shell**: soft neutral canvas, raised cards, one accent, light borders, **stroke icons first** — in **both light and dark**. Content areas stay calm: **do not sprinkle emoji on every card/row**. ## When this skill applies - New page / demo / prototype in this style - Restyle an existing screen to match the family - Extract tokens / sidebar / settings list / empty composer - Add or fix **light + dark** theme pairs / theme toggle - User says: app shell、桌面工具风、系统设置感、浅色/深色侧栏、开关列表 If the user wants flashy landing, heavy Material elevation, or multi-primary rainbow dashboards — do **not** force this skill; ask or pick another direction. ## Workflow 1. **Pick a layout template** (required before pixels): - **设置型** — narrow left nav + form / toggle list - **控制台型** — left nav + card grid / status list - **工作台型** — session tree + centered empty state + composer card - **IM / 三栏型** — icon rail + list + detail 2. **Set the viewport budget** — define the target desktop viewport (minimum 1280×800) and the one primary task for the route before adding content. See `references/layouts.md` → *Viewport budget / 单页容量*. 3. **Lock dual-theme tokens** — use `references/tokens.md` (**light + dark** are both required