docs: expose UI design references through one skill

2026-11-09 20:07:43 +08:00 · 2026-11-03 20:39:03 +08:00
parent f9a806c0f1
commit 47e4bbe3db
13 changed files with 43 additions and 58 deletions
@@ -1,11 +1,11 @@
 ---
 name: dsh-client-ui-ux
-description: Use before DSH user-visible UI changes and during UI review in client, experimental and app packages. Select design rules before coding and verify affected rendered results before handoff.
+description: "Design and review DSH user-visible UI: alignment, spacing, icons, visual foundation, geometry and interaction. Use before UI changes in client, experimental and app packages; verify affected rendered results before handoff."
 ---
 # DeepSeek Harness UI development
-This entry owns the UI workflow, visual foundation, geometry and interaction guidance. Apply it to the task, not as an exhaustive checklist. Linked owners define specialized rules and values; examples explain judgment, not coverage.
+Use this skill as the entry point for UI design and review. It owns the workflow, visual foundation, geometry and interaction guidance; alignment, spacing and icon details live in its references below. Load only the references relevant to the task; examples explain judgment, not coverage.
 <a id="required-review-loop"></a>
 ## UI change workflow
@@ -39,13 +39,13 @@ These effort levels change only the additional design-review procedure. Existing
 ## Select the rule owners
-Read alignment and spacing before layout changes; otherwise select the applicable owners. Preserve existing relationships and keep each numeric scale with its owner.
+For layout changes, read the alignment and spacing references; for icon selection, drawing or review, read the icon reference. Other tasks use the relevant sections below. Do not load all references by default. Existing responsive and official-artwork skills retain their scopes; numeric scales stay with their implementation owners.
-| Decision needed before implementation | Owner |
+| Decision needed before implementation | Section or reference |
 |---|---|
-| Shared axes, text starts, centering, tree indentation, complete icon boxes | [Alignment](../dsh-ui-alignment/SKILL.md) |
+| Shared axes, text starts, centering, tree indentation, complete icon boxes | [Alignment](references/alignment.md) |
-| Semantic groups, inner/outer gaps, repeated rhythm, section separation | [Spacing and grouping](../dsh-ui-spacing/SKILL.md) |
+| Semantic groups, inner/outer gaps, repeated rhythm, section separation | [Spacing and grouping](references/spacing.md) |
-| Interface icon selection, drawing, supplied-artwork normalization, style, optical weight, icon/label color | [Icons](../dsh-ui-icons/SKILL.md) |
+| Interface icon selection, drawing, supplied-artwork normalization, style, optical weight, icon/label color | [Icons](references/icons.md) |
 | Color, typography and existing treatments | [Visual foundation](#visual-foundation); [Web styling](../../../docs/web-styling.md) owns tokens/materials |
 | Component geometry, nested contours and state fills | [Geometry decisions](#component-geometry); [radius standard](../../../docs/ui-radius.md) owns values and exceptions |
 | Feedback lifetime, loading, overlays, scrolling and platform clearance | [Interaction and feedback](#interaction-and-feedback); [error handling](../dsh-error-handling/SKILL.md) owns failure guarantees |
@@ -56,7 +56,7 @@ Read alignment and spacing before layout changes; otherwise select the applicabl
 ## Reuse before adding
-Extend existing components, containers and interactions when the capability fits. Register right-sidebar content through a slot in the existing sidebar; do not create a separate sidebar. Follow [icon reuse](../dsh-ui-icons/SKILL.md#reuse-existing-icons-first). Before restructuring, read [client instructions](../../../packages/client/AGENTS.md) and [client defensive patterns](../../../docs/defensive-patterns/client-components.md) for component/state ownership and layering.
+Extend existing components, containers and interactions when the capability fits. Register right-sidebar content through a slot in the existing sidebar; do not create a separate sidebar. Follow [icon reuse](references/icons.md#reuse-existing-icons-first). Before restructuring, read [client instructions](../../../packages/client/AGENTS.md) and [client defensive patterns](../../../docs/defensive-patterns/client-components.md) for component/state ownership and layering.
 ## Visual foundation
@@ -64,7 +64,7 @@ Extend existing components, containers and interactions when the capability fits
 - Verify colors in light and dark themes; keep ink/background pairs readable, especially dimmed text.
 - Feature CSS you add or change uses **font weight ≤500**; emphasize with size or ink. ui-theme markdown typography tokens are the exception.
 - Use theme typography roles, then the page's scale, then a comparable page's size/spacing ratios. Do not invent a size for a single element. Peers share sizes; keep the scale small (13px is the established row/detail size).
- Apply [alignment](../dsh-ui-alignment/SKILL.md) and the [same-foreground rule](../dsh-ui-icons/SKILL.md#placement-and-use) to icon/text relationships, including value chevrons and search prompts.
+- Apply [alignment](references/alignment.md) and the [same-foreground rule](references/icons.md#placement-and-use) to icon/text relationships, including value chevrons and search prompts.
 ## Component geometry
@@ -110,7 +110,7 @@ Inspect the composition, then affected internal/cross-group relationships, dista
 ## Maintain one owner per rule
-Update the existing owner; add a skill and routing row only for a distinct decision. Keep examples in the [case reference](../../../docs/ui-design-review-cases.md); AGENTS and PR workflows link here instead of duplicating rules.
+Update the owning section or reference within this skill; do not expose its design specialties as separate skills. Keep examples in the [case reference](../../../docs/ui-design-review-cases.md); AGENTS and PR workflows link here instead of duplicating rules.
 Rule changes state applicability, decisions, exceptions and observable verification; update a distinguishing case and remove superseded statements elsewhere. Declare migration versus future-edit scope without implying existing UI conforms. Automate only mechanically decidable checks. Local review tools consume repository rules and retain source/rule revisions rather than maintaining another standards copy.
@@ -1,11 +1,6 @@
 ---
 name: dsh-ui-alignment
 description: Design or review DSH shared text columns, icon/label placement, tree indentation and centering. Apply before positioning elements and when checking rendered results.
 ---
 # UI alignment
-Apply within the [UI development loop](../dsh-client-ui-ux/SKILL.md#required-review-loop). Align comparable peers, including slots for optional icons and actions.
+Apply within the [UI development loop](../SKILL.md#required-review-loop). Align comparable peers, including slots for optional icons and actions.
 ## Layout structure first, visual calibration second
@@ -34,4 +29,4 @@ For a trigger and its menu, or search field and result rows, compare the complet
 Center a button within its own bounds, a welcome group within the main pane, and an empty state within the content remaining below headings/filters. A fixed top margin is not centering. When a short window cannot fit the group, preserve scroll access with a compact top-aligned layout instead of clipping.
-Normalize peer control sizes and slots before any necessary small optical offsets; verify comparable uses. Preserve usable, non-overlapping hit targets and do not hide inconsistent parent layout with transforms. Transparent hit padding can exceed the painted icon slot; check neighboring target edges after tightening a cluster. Check [spacing](../dsh-ui-spacing/SKILL.md) without moving the chosen axes; consult [cases](../../../docs/ui-design-review-cases.md#alignment) for uncertain judgments.
+Normalize peer control sizes and slots before any necessary small optical offsets; verify comparable uses. Preserve usable, non-overlapping hit targets and do not hide inconsistent parent layout with transforms. Transparent hit padding can exceed the painted icon slot; check neighboring target edges after tightening a cluster. Check [spacing](spacing.md) without moving the chosen axes; consult [cases](../../../../docs/ui-design-review-cases.md#alignment) for uncertain judgments.
@@ -1,11 +1,6 @@
 ---
 name: dsh-ui-icons
 description: Select, draw, normalize or review DSH action, navigation, file and status icons. Covers system style, optical size, clarity and text relationships; official plugin artwork has its own skill.
 ---
 # UI icons
-Apply within the [UI development loop](../dsh-client-ui-ux/SKILL.md#required-review-loop), in the affected page or modal context.
+Apply within the [UI development loop](../SKILL.md#required-review-loop), in the affected page or modal context.
 ## Reuse existing icons first
@@ -13,7 +8,7 @@ Search the library and comparable UI for the intended meaning and supported vari
 Draw only when existing artwork cannot express the meaning or the user requests a distinct design. Before drawing, explain the closest alternatives and the unmet meaning or requested design difference. New glyphs require designer approval before landing; requested drafts can be prepared locally. Do not redraw a shared glyph to fix one consumer.
-The [primitives icon contract](../../../packages/client/ui-primitives/README.md#controls-and-icons) and icon source own available variants, stroke scaling and menu sizes; [official artwork](../dsh-official-plugin-artwork/SKILL.md) owns package artwork.
+The [primitives icon contract](../../../../packages/client/ui-primitives/README.md#controls-and-icons) and icon source own available variants, stroke scaling and menu sizes; [official artwork](../../dsh-official-plugin-artwork/SKILL.md) owns package artwork.
 ## System style
@@ -24,13 +19,13 @@ The [primitives icon contract](../../../packages/client/ui-primitives/README.md#
 ## Optical size and clarity before implementation
-Use the owning control's supported size and weight. [Shared menu sizes and stroke scaling](../../../packages/client/ui-primitives/README.md#controls-and-icons) belong to primitives; [permission triggers](../../../packages/client/ui-permission-presets/README.md) and [settings navigation](../../../packages/client/ui-settings-general/README.md) belong to their feature packages. A reviewed proposal for a larger or heavier trigger is not a statement that every existing consumer already uses it. Compare at the owning control's size, weight, colors and label, using an outlined circle and rectangular control as references. Open silhouettes may need more extent than dense fills; supporting chevrons, handles and dots keep their roles. Do not normalize by ink area or fill every view box.
+Use the owning control's supported size and weight. [Shared menu sizes and stroke scaling](../../../../packages/client/ui-primitives/README.md#controls-and-icons) belong to primitives; [permission triggers](../../../../packages/client/ui-permission-presets/README.md) and [settings navigation](../../../../packages/client/ui-settings-general/README.md) belong to their feature packages. A reviewed proposal for a larger or heavier trigger is not a statement that every existing consumer already uses it. Compare at the owning control's size, weight, colors and label, using an outlined circle and rectangular control as references. Open silhouettes may need more extent than dense fills; supporting chevrons, handles and dots keep their roles. Do not normalize by ink area or fill every view box.
 A shared view-box change affects every consumer at its own CSS size. Inspect both compact menus and larger icon-only controls; a clearer small chevron can become oversized in a floating button. Adjust a consumer’s supported icon size when needed while retaining its button base and hit target.
 For softness, check CSS dimensions and ancestor transforms, view box and drawing bounds, stroke versus filled contour, device-pixel placement, then color/opacity. Non-16 view boxes are valid; compare identical artwork before attributing sharpness to inline SVG versus sprites.
-Use the [implemented stroke behavior](../../../packages/client/ui-primitives/README.md#controls-and-icons): source stroke widths scale with the SVG viewport, and filled outlines scale as geometry. Do not add non-scaling strokes or convert filled contours during an ordinary placement or reuse fix. A change to that rendering contract belongs to a separately scoped library change with consumer validation; retain intentional silhouettes and knockouts.
+Use the [implemented stroke behavior](../../../../packages/client/ui-primitives/README.md#controls-and-icons): source stroke widths scale with the SVG viewport, and filled outlines scale as geometry. Do not add non-scaling strokes or convert filled contours during an ordinary placement or reuse fix. A change to that rendering contract belongs to a separately scoped library change with consumer validation; retain intentional silhouettes and knockouts.
 Check straight-stroke edges at actual DPR after all scaling: center and width jointly determine coverage. Integer source coordinates alone do not guarantee crisp edges. Round positioned overlays in device pixels only when layout places otherwise crisp artwork between pixels; preserve anchoring and viewport containment. Keep antialiasing on curves/diagonals; do not globally round paths or use `crispEdges` to hide placement errors. Partial coverage is legitimate for 1.3px strokes.
@@ -52,10 +47,10 @@ Distinguish click target, visible button base, icon slot and painted glyph. Equa
 An icon and its associated text for one action, value or input prompt must share foreground color, effective opacity and state changes. This includes submenu value chevrons and search placeholders; inherit the shared role instead of assigning an independent icon token. Typed text and independent clear actions may differ; status, warning and brand roles retain semantic colors. Check computed color and ancestor opacity in both themes. Apply the rule to changed consumers; updating it does not certify untouched UI. Compare native file icons and folder outlines deliberately; do not normalize logos, status dots or decorative illustrations to toolbar icons.
-Use the shared Tooltip for unclear icon-only actions and HoverCard for informational content requiring hover or selection; prefer these primitives over ad-hoc `title` attributes. [Responsive UI](../dsh-responsive-ui/SKILL.md) owns mobile tooltips and label collapse. Every right-sidebar tab needs a meaningful icon. Preserve accessible labels and focus; [alignment](../dsh-ui-alignment/SKILL.md) owns positioning and [spacing](../dsh-ui-spacing/SKILL.md) owns gaps.
+Use the shared Tooltip for unclear icon-only actions and HoverCard for informational content requiring hover or selection; prefer these primitives over ad-hoc `title` attributes. [Responsive UI](../../dsh-responsive-ui/SKILL.md) owns mobile tooltips and label collapse. Every right-sidebar tab needs a meaningful icon. Preserve accessible labels and focus; [alignment](alignment.md) owns positioning and [spacing](spacing.md) owns gaps.
 ## Verification and handoff
 For ordinary icon reuse or placement changes, inspect the affected control at its actual size and relevant states; no fixed size/DPR matrix or separate raster report is required. For new or changed artwork, strokes or rendering, compare affected sizes and weights with peers; check DPR 1 and 2 when stroke scaling or pixel placement can change, and both themes when color or optical weight is affected. Keep before/after captures when needed for the change or requested deliverable. Judge recognition, clipping, center, gaps and neighboring text at actual size; enlarged views diagnose pixels only.
-After a set-wide change, trace affected families, consumers and weights, including unchanged artwork whose rendering can change. Use unchanged peers for comparison. An explicitly requested full-set review inventories and compares every glyph under matching conditions. Consolidate duplicate artwork only when necessary for the current fix; record unrelated duplicates separately instead of expanding the task. Consult [cases](../../../docs/ui-design-review-cases.md#icon-optics) for uncertain judgments.
+After a set-wide change, trace affected families, consumers and weights, including unchanged artwork whose rendering can change. Use unchanged peers for comparison. An explicitly requested full-set review inventories and compares every glyph under matching conditions. Consolidate duplicate artwork only when necessary for the current fix; record unrelated duplicates separately instead of expanding the task. Consult [cases](../../../../docs/ui-design-review-cases.md#icon-optics) for uncertain judgments.
@@ -1,11 +1,6 @@
 ---
 name: dsh-ui-spacing
 description: Design or review DSH semantic grouping, internal/external spacing and repeated rhythm, including wrapped or expanded content.
 ---
 # UI spacing and grouping
-Apply within the [UI development loop](../dsh-client-ui-ux/SKILL.md#required-review-loop). Distance should explain which text, input and action belong together.
+Apply within the [UI development loop](../SKILL.md#required-review-loop). Distance should explain which text, input and action belong together.
 ### Identify the group before choosing the gap
@@ -21,4 +16,4 @@ Judge actual whitespace at normal size, including padding, line-height, glyph wh
 When matching two visible gaps, name both pairs of endpoints and include each container’s padding, border and text line box. Equal visible gaps may require unequal margins. A control’s painted edge and a text glyph’s edge are different endpoints; keep that choice stable through review.
-Reuse page spacing and [style tokens](../../../docs/web-styling.md), preserve [alignment](../dsh-ui-alignment/SKILL.md) axes, and consult [cases](../../../docs/ui-design-review-cases.md#grouping) for uncertain judgments. This skill defines no numeric scale.
+Reuse page spacing and [style tokens](../../../../docs/web-styling.md), preserve [alignment](alignment.md) axes, and consult [cases](../../../../docs/ui-design-review-cases.md#grouping) for uncertain judgments. This skill defines no numeric scale.
@@ -16,7 +16,7 @@ Before drawing a larger image for the top of an official bundle's detail documen
 ## Establish the subject
 - Inspect the actual feature, its output, and its owning manifest before drawing. A badge-producing skill may need a tag, not a medal. Reuse designer-supplied assets; do not invent a brand mark or change product names, identifiers, or unrelated icons without approval.
- Read the [existing artwork](../../../packages/client/ui-primitives/src/plugin-artwork.tsx) and the nearest relevant package SVGs. Borrow one coherent treatment, not every reference's effects. Action icons remain with [the interface icon skill](../dsh-ui-icons/SKILL.md).
+- Read the [existing artwork](../../../packages/client/ui-primitives/src/plugin-artwork.tsx) and the nearest relevant package SVGs. Borrow one coherent treatment, not every reference's effects. Action icons remain with [the UI design entry](../dsh-client-ui-ux/SKILL.md#select-the-rule-owners).
 - Check every affected entry, list, detail, and component row. Bundle artwork and a component's name and icon can have separate metadata owners; changing one does not update the other.
 ## Draw and refine
@@ -157,7 +157,7 @@ Real-API tests/demos read `DEEPSEEK_API_KEY`, optional `DEEPSEEK_BASE_URL`, and
 - **Create Agent Notes only for durable decision rationale;** mechanical/local edits are exempt, including local UI changes ([scope](.agents/notes/README.md#when-to-write-one)). Archived notes are frozen: never edit or treat them as current authority ([archive policy](.agents/notes/README.md#archiving-and-deletion)).
 - **Official plugin artwork:** use [dsh-official-plugin-artwork](.agents/skills/dsh-official-plugin-artwork/SKILL.md) for official and official experimental plugin icons; obtain designer approval before landing new glyphs.
 - **Client UI copy is locale-owned.** Route product text through typed dictionaries and `t` or localized primitive props; `verify-client-ui-i18n` rejects hardcoded copy ([decision](.agents/notes/implemented/architecture/2026-08-23-locale-owned-client-ui-copy.md)). English copy, including plugin titles, uses sentence case ([rule](.agents/skills/dsh-prose-standard/SKILL.md#required-coverage-by-prose-location)).
- **UI changes:** use the [UI development skill](.agents/skills/dsh-client-ui-ux/SKILL.md) for rules and effort by impact: targeted development checks or explicitly scoped audits. Existing tests, GUI GIFs and designer/product approval still apply.
+- **UI changes:** use [dsh-client-ui-ux](.agents/skills/dsh-client-ui-ux/SKILL.md) as the design and review entry point; load its references only as needed.
 - **Testing policy** — [docs/testing.md](docs/testing.md). Every non-trivial model- or product-user-visible change updates a keyless recorded-session snapshot; [snapshot ownership](snapshots/AGENTS.md) reserves the top-level tree for session-driven cases and keeps other expected output owner-local. Fixtures replay on macOS/Linux; fix fixtures, not normalizers.
 - **Design each tool's UI presentation up front.** Host presenters stay pure; Web cards derive from raw events and persisted result metadata ([cookbook](docs/cookbook/adding-a-tool.md)).
 - **Plan unit, e2e, and snapshot coverage** for capability seams, lifecycle paths, and transcript output; include missing snapshot-harness support in the same change.
@@ -9,8 +9,8 @@
  en: d42b121ca63177aa
  zh: 68b637fae3252c7b
 /cookbook-review-a-ui-design/summary:
-  en: 71c864587a5d4433
+  en: 8a1ff691b28a2533
-  zh: fb58eb9ae3f2ed94
+  zh: 8c54ae85df6f6e12
 /cookbook-review-a-ui-design/table-of-contents:
  en: 84af073b2a7eca95
  zh: 750633fa3c458d5b
@@ -12,7 +12,7 @@ Use this cookbook for explicitly requested comprehensive reviews and for evidenc
 Check the complete icon box, including intentional internal whitespace, text columns and gaps before judging the drawn contour. Hit targets are not icon boxes; do not align each glyph’s painted pixels independently. See the [alignment principle](../ui-design-review-cases.md#alignment).
-Check associated icons and text against the [same-foreground rule](../../.agents/skills/dsh-ui-icons/SKILL.md#placement-and-use), including submenu values with chevrons and search placeholders with magnifiers. Compare rendered color and opacity in both themes; preserve semantic exceptions.
+Check associated icons and text against the [same-foreground rule](../../.agents/skills/dsh-client-ui-ux/references/icons.md#placement-and-use), including submenu values with chevrons and search placeholders with magnifiers. Compare rendered color and opacity in both themes; preserve semantic exceptions.
 ## Table of Contents
@@ -12,7 +12,7 @@ description: "把 DSH 页面或弹窗作为整体审查，按设计原则说明
 对齐审查先核对图标完整空间（含有意保留的内部留白）、文字列和间距，再检查实际轮廓。热区不等于图标框；不逐个拉齐 glyph 的像素边缘。判断顺序见[对齐原则](../ui-design-review-cases.zh.md#alignment)。
-按[同前景色规则](../../.agents/skills/dsh-ui-icons/SKILL.md#placement-and-use)核对关联图标与文字，包括子菜单值与箭头、搜索占位文字与放大镜；检查明暗主题中的实际颜色和透明度，保留语义例外。
+按[同前景色规则](../../.agents/skills/dsh-client-ui-ux/references/icons.md#placement-and-use)核对关联图标与文字，包括子菜单值与箭头、搜索占位文字与放大镜；检查明暗主题中的实际颜色和透明度，保留语义例外。
 ## 目录
@@ -39,8 +39,8 @@
  en: 7b8a8bdc5acc11d6
  zh: 96820c11d2e61787
 /ui-design-principles-and-review-cases/1-alignment:
-  en: 31d18363696173e9
+  en: 0cc9d24851a11497
-  zh: d2bbca62e7ea0120
+  zh: f05bda4fcdf5deac
 /ui-design-principles-and-review-cases/1-alignment/text-metrics-and-unequal-content:
  en: 14558eb00e9b4902
  zh: 333b28dabfccbd6c
@@ -66,8 +66,8 @@
  en: c5e9a409c13637bc
  zh: 37c915f187d6e9f7
 /ui-design-principles-and-review-cases/2-spatial-grouping:
-  en: f50b8851f4ee2ac3
+  en: 5a2aebab7e8ab498
-  zh: 63076543756c294e
+  zh: 46a18d4ddde7fccc
 /ui-design-principles-and-review-cases/2-spatial-grouping/example-g1-separating-content-from-its-action-group:
  en: a4c0b1f1ad441155
  zh: 360ed71994a101a8
@@ -93,8 +93,8 @@
  en: 10fb29eddaac1951
  zh: e05636b47e860966
 /ui-design-principles-and-review-cases/4-information-hierarchy:
-  en: 56ecb557d54c1c2e
+  en: 7e86e6ff5cd55742
-  zh: ede48f8451af4111
+  zh: 852a1bb0361134a6
 /ui-design-principles-and-review-cases/4-information-hierarchy/example-c1-color-emphasis-within-one-information-unit:
  en: c17aea1873e9a1a6
  zh: dc7a8df8a60e582d
@@ -108,8 +108,8 @@
  en: 7a49fdd5a601aa48
  zh: e2f9de0d5628a878
 /ui-design-principles-and-review-cases/7-icon-optics:
-  en: 21c39c7bbfd87382
+  en: ff60eb03e9724e71
-  zh: e30f9a6593b32265
+  zh: 8df625c33f3fc3aa
 /ui-design-principles-and-review-cases/7-icon-optics/example-o1-optical-alignment-of-different-icon-types:
  en: 3858a85bdf6ee111
  zh: 9c8242a594df069f
@@ -134,7 +134,7 @@ Use these examples to understand a relationship that is unclear. Apply the same
 <a id="alignment"></a>
 ## 1. Alignment
-The [alignment skill](../.agents/skills/dsh-ui-alignment/SKILL.md) owns shared axes, complete layout boxes, indentation and text metrics. Use the examples below to apply those decisions.
+The [alignment reference](../.agents/skills/dsh-client-ui-ux/references/alignment.md) owns shared axes, complete layout boxes, indentation and text metrics. Use the examples below to apply those decisions.
 ![Alignment diagram: peer rows share axes while account and header controls retain their own geometry](assets/ui-design-review/principles-alignment.svg)
@@ -216,7 +216,7 @@ The comparison below shows actual preset cards with unequal descriptions. On the
 <a id="grouping"></a>
 ## 2. Spatial grouping
-The [spacing skill](../.agents/skills/dsh-ui-spacing/SKILL.md) owns semantic groups, internal/external gap relationships and visible whitespace. The cases below explain how to apply it.
+The [spacing reference](../.agents/skills/dsh-client-ui-ux/references/spacing.md) owns semantic groups, internal/external gap relationships and visible whitespace. The cases below explain how to apply it.
 ![Grouping diagram: equally spaced blocks versus a nested section with smaller inner gaps and larger section separation](assets/ui-design-review/principles-grouping.svg)
@@ -298,7 +298,7 @@ Make the next reading or decision step visible without turning every text elemen
 Use emphasis to express a task-relevant difference. A current selection, an actionable error, and the data needed for a decision deserve stable recognition. Labels and supporting metadata can be quieter, but making useful text difficult to read is not hierarchy. Inspect size, weight, color, position, and surrounding whitespace together; piling all five onto every heading removes meaningful contrast.
-Use the [icon owner](../.agents/skills/dsh-ui-icons/SKILL.md) for icon/label foreground roles and their semantic exceptions; example C1 applies that rule to search fields.
+Use the [icon owner](../.agents/skills/dsh-client-ui-ux/references/icons.md) for icon/label foreground roles and their semantic exceptions; example C1 applies that rule to search fields.
 Typography participates in geometry: compare text starts, baselines and line boxes with the intended font, long translations and relevant font preferences. Pair size with line height and use the weight limits from [visual foundation](../.agents/skills/dsh-client-ui-ux/SKILL.md#visual-foundation). Content, code, terminal and fixed interface roles need not scale identically; check the [font-setting owner](../packages/client/ui-theme/README.md) before treating a deliberate difference as a defect. Correct the container allocation before shrinking useful text to force alignment.
@@ -343,7 +343,7 @@ Keep the control's label, visible bounds, focus behavior, and click target consi
 <a id="icon-optics"></a>
 ## 7. Icon optics
-The [icon skill](../.agents/skills/dsh-ui-icons/SKILL.md) owns interface icon roles, slots, color and optical balance. [Official artwork](../.agents/skills/dsh-official-plugin-artwork/SKILL.md) retains its separate role.
+The [icon reference](../.agents/skills/dsh-client-ui-ux/references/icons.md) owns interface icon roles, slots, color and optical balance. [Official artwork](../.agents/skills/dsh-official-plugin-artwork/SKILL.md) retains its separate role.
 <a id="case-file-optics"></a>
 ### Example O1: Optical alignment of different icon types
@@ -134,7 +134,7 @@ DSH 的视觉审查优先关注对齐与空间分组。先识别任务和语义
 <a id="alignment"></a>
 ## 1. 对齐
-[对齐 skill](../.agents/skills/dsh-ui-alignment/SKILL.md)负责共享轴线、完整布局框、层级缩进和文字度量；以下案例用于说明这些判断。
+[对齐参考](../.agents/skills/dsh-client-ui-ux/references/alignment.md)负责共享轴线、完整布局框、层级缩进和文字度量；以下案例用于说明这些判断。
 ![对齐示意：同类行共享轴线，账号和标题操作保留各自几何关系](assets/ui-design-review/principles-alignment.svg)
@@ -216,7 +216,7 @@ DSH 的视觉审查优先关注对齐与空间分组。先识别任务和语义
 <a id="grouping"></a>
 ## 2. 空间分组
-[间距分组 skill](../.agents/skills/dsh-ui-spacing/SKILL.md)负责语义组、组内外间距关系和可见留白；以下案例说明如何应用。
+[间距分组参考](../.agents/skills/dsh-client-ui-ux/references/spacing.md)负责语义组、组内外间距关系和可见留白；以下案例说明如何应用。
 ![分组示意：等间距堆叠与分层分组的区别，组内较近，分区之间更远](assets/ui-design-review/principles-grouping.svg)
@@ -298,7 +298,7 @@ DSH 的视觉审查优先关注对齐与空间分组。先识别任务和语义
 强调必须表达与任务有关的差异。当前选择、可处理的错误和决策依据，需要稳定可辨；标签和补充信息可以更弱，但让有用的文字难以阅读不是层级设计。联合观察字号、字重、颜色、位置和周围留白；每个标题都把五种强调用满，反而失去有意义的区别。
-图标与文字的前景角色及语义例外由[图标专项](../.agents/skills/dsh-ui-icons/SKILL.md)负责；案例 C1 将该规则用于搜索框。
+图标与文字的前景角色及语义例外由[图标参考](../.agents/skills/dsh-client-ui-ux/references/icons.md)负责；案例 C1 将该规则用于搜索框。
 字体也是几何的一部分：结合预期字体、长翻译与相关字体设置，比较文字起点、基线和行框。字号配套行高，并遵循[视觉基础](../.agents/skills/dsh-client-ui-ux/SKILL.md#visual-foundation)的字重限制。正文、代码、终端与固定界面角色不必同幅缩放；把差异判为缺陷前，核对[字体设置所有方](../packages/client/ui-theme/README.zh.md)。先修容器分配，不用缩小有用文字来强行对齐。
@@ -343,7 +343,7 @@ DSH 的视觉审查优先关注对齐与空间分组。先识别任务和语义
 <a id="icon-optics"></a>
 ## 7. 图标光学
-[图标 skill](../.agents/skills/dsh-ui-icons/SKILL.md)负责界面图标的角色、槽位、颜色和视觉平衡；[官方 artwork](../.agents/skills/dsh-official-plugin-artwork/SKILL.md)保留独立职责。
+[图标参考](../.agents/skills/dsh-client-ui-ux/references/icons.md)负责界面图标的角色、槽位、颜色和视觉平衡；[官方 artwork](../.agents/skills/dsh-official-plugin-artwork/SKILL.md)保留独立职责。
 <a id="case-file-optics"></a>
 ### 示例 O1：不同类型图标的光学对齐
@@ -115,7 +115,7 @@ One UI feature = one plugin package (`src/client/` browser half). A multi-domain
 ## Styling and localization
-For UI changes, use the [UI change workflow](../../.agents/skills/dsh-client-ui-ux/SKILL.md#required-review-loop) to match verification effort to impact. Check affected assembled results and shared consumers; ordinary changes do not require a full audit. The existing test ladder below, GUI GIF requirements and designer/product approval remain unchanged.
+Use [dsh-client-ui-ux](../../.agents/skills/dsh-client-ui-ux/SKILL.md) for UI design rules and review requirements. The client test ladder below still applies.
 [docs/web-styling.md](../../docs/web-styling.md) is authoritative. Shared `--dsw-*` tokens and global sheets live in `ui-theme/src/styles/`; feature components consume semantic aliases through CSS Modules and `clsx`, with no literal colors, component library, or Tailwind. Code comments are English. Design judgment beyond those rules — feedback surfaces, loading states, overlay safety, platform window adaptation — follows [dsh-client-ui-ux](../../.agents/skills/dsh-client-ui-ux/SKILL.md); responsive layout and telling a mobile or touch client from a desktop one follow [dsh-responsive-ui](../../.agents/skills/dsh-responsive-ui/SKILL.md).