diff --git a/.scd/plans/20261109-231834-d1-tokens-assets/decisions.md b/.scd/plans/20261109-231834-d1-tokens-assets/decisions.md
new file mode 100644
index 0000000..0a330ee
--- /dev/null
+++ b/.scd/plans/20261109-231834-d1-tokens-assets/decisions.md
@@ -0,0 +1,19 @@
+---
+status: approved
+version: 1
+created_at: 2026-11-09T23:18:34+08:00
+updated_at: 2026-11-09T23:18:34+08:00
+recorded_timezone: Asia/Shanghai
+---
+
+# 决策与事件
+
+- 事件ID：DEC-1
+- 类型：开工
+- 文件及文档版本：本目录四份 v1；依据 Issue #123 契约与 Initiative #122 图版本 2
+- 目标Git SHA：main HEAD（同步后）
+- 用户实际依据：对 Initiative 确认摘要回复"ok"；执行指令"全部完成 scdexcute"（覆盖图版本 2 全部 READY 波次的普通交付授权）
+- 任务或Issue范围：Issue #123 范围内文件；NOTICES 仅 tokens/components 两节，#124/#125 各自追加
+- occurred_at：null # 会话内指令，无消息ID
+- recorded_at：2026-11-09T23:18:34+08:00
+- 未决选择：无
diff --git a/.scd/plans/20261109-231834-d1-tokens-assets/implementation.md b/.scd/plans/20261109-231834-d1-tokens-assets/implementation.md
new file mode 100644
index 0000000..f77ed4c
--- /dev/null
+++ b/.scd/plans/20261109-231834-d1-tokens-assets/implementation.md
@@ -0,0 +1,17 @@
+---
+status: approved
+version: 1
+created_at: 2026-11-09T23:18:34+08:00
+updated_at: 2026-11-09T23:18:34+08:00
+recorded_timezone: Asia/Shanghai
+---
+
+# 实施计划
+
+1. 分支 delivery/123-design-tokens-assets
+2. 下载 plugin87 main 分支 tokens/ 与 components/ 全部文件（git tree API 清点后逐个 raw 下载）
+3. NOTICES 两节（plugin87 MIT，来源 URL，无改动声明）
+4. 测试排除：collectPayloadFiles 跳过路径段 /data/；断言计数不变（79）
+5. design-tokens.md 末尾加"数据资产与用法"段
+6. 验证：node --test tests/*.test.mjs 全绿；隔离会话 A3
+7. PR #123 → 独立验收 → 合并 → 关 Issue → 图版本 3
diff --git a/.scd/plans/20261109-231834-d1-tokens-assets/plan.md b/.scd/plans/20261109-231834-d1-tokens-assets/plan.md
new file mode 100644
index 0000000..ba25103
--- /dev/null
+++ b/.scd/plans/20261109-231834-d1-tokens-assets/plan.md
@@ -0,0 +1,14 @@
+---
+status: approved
+version: 1
+created_at: 2026-11-09T23:18:34+08:00
+updated_at: 2026-11-09T23:18:34+08:00
+recorded_timezone: Asia/Shanghai
+---
+
+# 任务索引
+
+- 任务与Issue：Delivery Issue #123（design-tokens-assets），Initiative #122 图版本 2
+- 所需文档及版本：requirements.md v1、implementation.md v1、decisions.md v1
+- 基线来源：main 同步后 HEAD；Initiative #122 确认摘要与 Issue #123 契约
+- 批准与开工事件：decisions.md DEC-1（Initiative 项目确认 + 用户"全部完成 scdexcute"执行授权）
diff --git a/.scd/plans/20261109-231834-d1-tokens-assets/requirements.md b/.scd/plans/20261109-231834-d1-tokens-assets/requirements.md
new file mode 100644
index 0000000..64d152d
--- /dev/null
+++ b/.scd/plans/20261109-231834-d1-tokens-assets/requirements.md
@@ -0,0 +1,17 @@
+---
+status: approved
+version: 1
+created_at: 2026-11-09T23:18:34+08:00
+updated_at: 2026-11-09T23:18:34+08:00
+recorded_timezone: Asia/Shanghai
+---
+
+# 需求（来自 Issue #123 契约，APPROVED）
+
+- data/tokens/ 收录 plugin87 14 个 DTCG 令牌 JSON；data/components/ 收录 11 份组件规范
+- 建立 data/THIRD-PARTY-NOTICES.md（来源/许可/改动），本节点先写 tokens/components 两节
+- tests/chinese-skill-payload.test.mjs 排除 skills/*/data/，authored 计数保持精确
+- references/design-tokens.md 挂接数据路径并补组件规范用法段（中文）
+- 验收 A1：14 令牌 JSON 可解析含 $type/$value；11 组件规范完整
+- 验收 A2：全量测试绿
+- 验收 A3：隔离会话从 data/tokens 给出按钮语义色具体值
diff --git a/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md b/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md
new file mode 100644
index 0000000..819a110
--- /dev/null
+++ b/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md
@@ -0,0 +1,10 @@
+# 第三方数据来源与许可
+
+本目录收录第三方开源项目的机器可读设计资产。来源、许可与改动记录如下；各上游项目保留其原始版权与许可。
+
+## plugin87/ux-ui-agent-skills（MIT License）
+
+- 来源：<https://github.com/plugin87/ux-ui-agent-skills>（main 分支，按文件原样收录）
+- 许可：MIT License，版权归属上游作者
+- 收录范围：`tokens/`（14 个 DTCG 令牌 JSON）、`components/`（11 份组件规范 Markdown）
+- 改动：无（原样搬运）；后续如有改动在各节记录
diff --git a/skills/scd-uiux/data/components/atoms.md b/skills/scd-uiux/data/components/atoms.md
new file mode 100644
index 0000000..9d3af63
--- /dev/null
+++ b/skills/scd-uiux/data/components/atoms.md
@@ -0,0 +1,237 @@
+# Atoms
+
+The smallest, indivisible UI elements. Each atom maps directly to design tokens and has a single, focused responsibility.
+
+---
+
+## 1. Button
+
+The primary interactive control for triggering actions.
+
+**Anatomy:** `[icon?] [label] [icon?]` within a pressable container.
+
+**Variants:**
+| Variant | Use Case | Token Mapping |
+|---------|----------|---------------|
+| Primary | Main CTA, one per visible area | `component.button.primary-*` |
+| Secondary | Supporting actions | `component.button.secondary-*` |
+| Ghost | Tertiary, toolbar, inline actions | `component.button.ghost-*` |
+| Destructive | Delete, remove, irreversible | `component.button.destructive-*` |
+| Link | Navigation-styled as button | `semantic.text.link` + underline |
+
+**Sizes:**
+| Size | Height | Padding | Font | Icon |
+|------|--------|---------|------|------|
+| sm | 32px | 12px × 8px | body-sm (14px) | 16px |
+| md | 40px | 16px × 10px | body-base (16px) | 20px |
+| lg | 48px | 24px × 12px | body-lg (18px) | 24px |
+
+**States (8):**
+1. **Default**: resting state
+2. **Hover**: cursor over; background shifts one shade
+3. **Focus**: keyboard focus; apply `focus-ring` shadow token
+4. **Active/Pressed**: mouse down; background shifts two shades
+5. **Disabled**: `opacity: 0.5`, `cursor: not-allowed`, `pointer-events: none`
+6. **Loading**: replace icon with spinner, add `aria-busy="true"`, disable interaction
+7. **Error**: N/A for a standalone button; a submit button reflects form error via the form, not its own style
+8. **Selected**: `interactive.selected-bg` + `aria-pressed`/`aria-selected`, for toggle/segmented buttons only
+
+**Accessibility:**
+- Native `<button>` element always; never `<div>`
+- Icon-only: add `aria-label`
+- Loading: `aria-busy="true"`, announce via live region
+- Disabled: use `disabled` attribute (removes from tab order) or `aria-disabled="true"` (keeps in tab order for discoverability)
+- Minimum target size: 24×24px (WCAG 2.5.8)
+
+---
+
+## 2. Input
+
+Single-line text entry field.
+
+**Anatomy:** `[leading-icon?] [prefix?] [input] [suffix?] [trailing-icon?] [clear?]`
+
+**Variants:** Text, Email, Password (toggle visibility), Number, Search, URL, Tel
+
+**Sizes:**
+| Size | Height | Padding | Font |
+|------|--------|---------|------|
+| sm | 32px | 12px × 8px | body-sm |
+| md | 40px | 12px × 10px | body-base |
+| lg | 48px | 16px × 12px | body-lg |
+
+**States (8):**
+1. **Default**: `input.border` (gray-200)
+2. **Hover**: `input.border-hover` (gray-300)
+3. **Focus**: `input.border-focus` (blue-500) + focus ring
+4. **Active**: N/A for text entry (no pressed state); typing reflects via the caret/value
+5. **Disabled**: `input.bg-disabled` + reduced opacity
+6. **Loading**: during async validation/lookup, a trailing spinner + `aria-busy="true"`
+7. **Error**: `input.border-error` (red-500) + error icon + message + `aria-invalid`
+8. **Selected**: filled/has-value styling; read-only is a variant of default (non-editable, no hover)
+
+**Accessibility:**
+- Always associate with `<label>` via `for`/`id`
+- Error messages: `aria-describedby` linking to error text + `aria-invalid="true"`
+- Required: `aria-required="true"` + visual indicator (asterisk)
+- Password toggle: `aria-label="Show password"` / `"Hide password"`
+
+---
+
+## 3. Label
+
+Text label associated with a form control.
+
+**Anatomy:** `[label-text] [required-indicator?] [optional-indicator?]`
+
+**Token Mapping:** `textStyle.label` (14px/medium), `semantic.text.primary`
+
+**Accessibility:**
+- Use `<label for="input-id">` so clicking the label focuses the input
+- Required: append `<span aria-hidden="true">*</span>` + `aria-required` on input
+- Group labels: use `<legend>` inside `<fieldset>`
+
+---
+
+## 4. Icon
+
+Decorative or informational pictogram.
+
+**Sizes:** 12px, 16px, 20px, 24px, 32px
+
+**Token Mapping:** Inherits `currentColor` from parent.
+
+**Accessibility:**
+- **Decorative**: `aria-hidden="true"` (most icons next to text labels)
+- **Informational**: `role="img"` + `aria-label="Description"`
+- **Interactive**: wrap in `<button>` with `aria-label`
+
+---
+
+## 5. Badge
+
+A small status descriptor for counts or labels.
+
+**Anatomy:** `[dot?] [text] [remove-button?]`
+
+**Variants:**
+| Variant | Use Case | Tokens |
+|---------|----------|--------|
+| Neutral | Default tags | `component.badge.neutral-*` |
+| Primary | Active/selected | `component.badge.primary-*` |
+| Success | Positive status | `component.badge.success-*` |
+| Warning | Attention needed | `component.badge.warning-*` |
+| Error | Critical/failed | `component.badge.error-*` |
+| Dot | Minimal indicator | 8px circle, no text |
+
+**Sizes:** sm (20px height), md (24px height)
+
+**Token Mapping:** `radius.badge` (full), `spacing.badge-padding-*`
+
+**Accessibility:**
+- Notification badges: `aria-label="3 unread messages"` (don't rely on number alone)
+- Status badges: pair with descriptive text, not just color
+
+---
+
+## 6. Avatar
+
+A circular representation of a user or entity.
+
+**Anatomy:** `[image | initials | fallback-icon]` within a circle.
+
+**Sizes:** xs (24px), sm (32px), md (40px), lg (48px), xl (64px), 2xl (96px)
+
+**Token Mapping:** `component.avatar.*`, `radius.avatar` (full)
+
+**Fallback Hierarchy:**
+1. User-uploaded image
+2. Initials (first + last name initial)
+3. Generic person icon
+
+**Accessibility:**
+- Image avatars: `alt="[User name]"` or `alt=""` if name is adjacent
+- Initials: `aria-label="[Full name]"`
+- Status indicator (online dot): announce via `aria-label`, not just color
+
+---
+
+## 7. Checkbox
+
+A control for binary or tri-state selection.
+
+**Anatomy:** `[checkbox-box] [label] [help-text?]`
+
+**Sizes:** sm (16px box), md (20px box), lg (24px box)
+
+**States:** Unchecked, Checked, Indeterminate, Hover, Focus, Disabled
+
+**Accessibility:**
+- Prefer native `<input type="checkbox">`
+- Indeterminate: set via JS `el.indeterminate = true` + `aria-checked="mixed"`
+- Group: wrap in `<fieldset>` with `<legend>`
+- See `aria-patterns.md` → Checkbox
+
+---
+
+## 8. Radio
+
+A control for selecting exactly one option from a group.
+
+**Anatomy:** `[radio-circle] [label] [help-text?]`
+
+**Sizes:** sm (16px), md (20px), lg (24px)
+
+**States:** Unselected, Selected, Hover, Focus, Disabled
+
+**Accessibility:**
+- Always in a `<fieldset>` with `<legend>` describing the group
+- Arrow keys navigate between radios
+- See `aria-patterns.md` → Radio Group
+
+---
+
+## 9. Toggle (Switch)
+
+An on/off control for immediate state changes.
+
+**Anatomy:** `[track] [thumb]` with optional `[label]` and `[status-text]`
+
+**Sizes:**
+| Size | Track | Thumb |
+|------|-------|-------|
+| sm | 36×20px | 16px |
+| md | 44×24px | 20px |
+| lg | 52×28px | 24px |
+
+**States:** Off, On, Hover, Focus, Disabled
+
+**Accessibility:**
+- Use `role="switch"` with `aria-checked`
+- Label must describe what the switch controls
+- Avoid using for form submissions; use checkbox instead
+- See `aria-patterns.md` → Switch
+
+---
+
+## 10. Tooltip
+
+A non-interactive text popup for supplementary information.
+
+**Anatomy:** `[trigger-element]` → `[tooltip-container] [arrow] [text]`
+
+**Placement:** Top (default), Right, Bottom, Left. Auto-flip when near viewport edge.
+
+**Token Mapping:** `surface: gray-900`, `text: white`, `radius: tooltip (md)`, `shadow: md`
+
+**Behavior:**
+- Show on hover (300ms delay) and focus
+- Hide on mouse leave, blur, Escape, scroll
+- Max width: 240px (prevent tooltip walls)
+- No interactive content inside
+
+**Accessibility:**
+- `role="tooltip"` + `aria-describedby` on trigger
+- Must appear on keyboard focus, not just hover
+- Content is supplementary, not essential
+- See `aria-patterns.md` → Tooltip
diff --git a/skills/scd-uiux/data/components/data-display.md b/skills/scd-uiux/data/components/data-display.md
new file mode 100644
index 0000000..6f02add
--- /dev/null
+++ b/skills/scd-uiux/data/components/data-display.md
@@ -0,0 +1,71 @@
+# Data-Display Components
+
+Components that present structured or browsable data: Calendar, Carousel, and Tree. Each uses a documented WAI-ARIA pattern (`accessibility/aria-patterns.md`) and renders via the [Framework Adapter Protocol](../frameworks/adapter-protocol.md). For tabular data see `components/organisms.md` (Data Table); for charts see `components/data-viz.md`.
+
+---
+
+## 1. Calendar / Date Grid
+
+Standalone month grid for picking or displaying dates. The popover-wrapped picker variant lives in `components/forms-advanced.md` (Date Picker); this is the grid itself.
+
+**Anatomy:** `[header: ‹ prev | month year | next ›] [weekday row] [day grid 6×7] [footer: Today / Clear?]`
+
+**Variants:**
+| Variant | Use |
+|---------|-----|
+| Single date | Pick one day |
+| Range | Start→end selection with in-range fill (`semantic.interactive.selected-bg` at reduced opacity) |
+| Multi-month | 2-3 grids side-by-side for range picking |
+| With time | Grid + time selector below |
+| Display-only | Read-only schedule/availability heatmap |
+
+**Sizes:** cell hit area ≥ `sizing.control.xs` (24px); md grid uses `sizing.control.md` cells. Gap from `spacing` scale.
+
+**States (8):** default, hover (cell `interactive.hover-bg`), focus (roving `shadow.focus-ring`), selected (`interactive.selected-bg`), today (ringed via `border.strong` / `aria-current`), disabled (out-of-range, `opacity.disabled`), range-endpoint, in-range (subtle fill).
+
+**Accessibility:**
+- `role="grid"` (or `role="application"` for rich range UX); column headers `role="columnheader"` with `abbr` for weekday.
+- **Roving tabindex**: one cell tabbable; Arrow keys move day/week, PageUp/Down month, Shift+PageUp/Down year, Home/End week edges, Enter/Space select.
+- Selected cell `aria-selected="true"`; today `aria-current="date"`. Announce month/year change on navigation (live region).
+- Never convey availability by color alone; pair with icon/label/`aria-disabled`.
+
+---
+
+## 2. Carousel / Slideshow
+
+Sequentially browsable set of slides (media, cards, testimonials).
+
+**Anatomy:** `[viewport (overflow clip)] → [slide track] [prev ‹] [next ›] [pagination dots] [play/pause?]`
+
+**Variants:** single-slide, multi-item (n visible), peek (partial next), fade vs. slide transition, auto-advancing vs. manual, looping vs. bounded.
+
+**Sizes:** slide width via `sizing.aspectRatio` or container fraction; control hit area ≥ 44px recommended.
+
+**Behavior:** transition uses `tokens/motion.json` (`transition.standard`, `ease-out`). Snap to slide boundaries. On multi-item, advance by page or by item (document which).
+
+**States:** default, hover (reveal/enlarge controls), focus (control `shadow.focus-ring`), active slide (dot filled), transitioning, auto-playing (timer), paused, disabled control (at non-looping bound).
+
+**Accessibility:**
+- Container `role="region"` (or `group`) with `aria-roledescription="carousel"` + `aria-label`. Slide group `aria-roledescription="slide"` + `aria-label="N of M"`.
+- **WCAG 2.2.2**: any auto-advance must be pausable/stoppable; show a visible Pause control and **pause on hover/focus**. Respect `prefers-reduced-motion` (disable autoplay + use fade/instant).
+- Prev/Next/dots are real `<button>`s with labels; rotation region `aria-live="off"` while auto, `"polite"` after user interaction.
+- Off-screen slides `aria-hidden`/`inert` so they're skipped by Tab and SR.
+
+---
+
+## 3. Tree View
+
+Hierarchical, expandable list (file explorers, nav, nested categories).
+
+**Anatomy:** `[node: ▸ twisty | icon? | label | badge/count?] [indent guides] [nested group]`
+
+**Variants:** single-select, multi-select (tri-state checkboxes), with icons, draggable-reorder, lazy-loaded branches.
+
+**Sizes:** row height `sizing.control.sm`/`md`; indent step from `spacing` scale (consistent per level).
+
+**States (8):** default, hover (`interactive.hover-bg`), focus (roving `shadow.focus-ring`), selected (`interactive.selected-bg`), expanded, collapsed, loading (branch spinner + `aria-busy`), disabled.
+
+**Accessibility:**
+- `role="tree"` → `role="treeitem"` → nested `role="group"`. Each item: `aria-expanded` (parents only), `aria-level`, `aria-setsize`, `aria-posinset`; selection via `aria-selected`. Multi-select checkboxes use `aria-checked="mixed"` for partial.
+- **Roving tabindex**: Up/Down move visible items, Right expands/enters, Left collapses/exits to parent, Home/End to first/last, type-ahead to label, Enter/Space activate/select, `*` expands siblings.
+- Twisty is decorative if the row is the control; expose state through `aria-expanded`, never the glyph alone.
diff --git a/skills/scd-uiux/data/components/data-viz.md b/skills/scd-uiux/data/components/data-viz.md
new file mode 100644
index 0000000..fe42388
--- /dev/null
+++ b/skills/scd-uiux/data/components/data-viz.md
@@ -0,0 +1,57 @@
+# Data-Visualization Components
+
+Charts and graphs. Color comes from `tokens/data-viz.json` (color-blind-aware categorical + sequential/diverging scales), never the brand palette directly. Charts are **graphical objects**: UI/contrast rules apply (3:1 for meaningful strokes) and **information must never depend on color alone**. Render via the [Framework Adapter Protocol](../frameworks/adapter-protocol.md).
+
+---
+
+**Anatomy (shared):** `[plot area] + [axes + tick labels] + [gridlines] + [series (bars/lines/points)] + [legend] + [tooltip on hover] + [optional title/caption]`. Every chart composes from these regions; color/axis/grid styling comes from `tokens/data-viz.json`.
+
+## Universal chart rules
+
+1. **Token-driven series color**: map series to `dataviz.categorical.*`; sequences to `dataviz.sequential.*`; +/− to `dataviz.diverging.*` / `dataviz.semantic.*`. Limit to ≤ 8 categorical series; beyond that, group "Other" or switch encoding.
+2. **Never color-alone**: pair series with **direct labels**, distinct markers/dash patterns, or texture. Provide a legend *and* on-hover labels.
+3. **Axes & grid**: use `dataviz.axis.*` / `dataviz.grid.*` (low-contrast gridlines `~1.4:1` are acceptable as they are non-essential; axis text meets 4.5:1).
+4. **Motion**: entrance/transition from `tokens/motion.json` (`ease-out`, ≤ 300ms); animate value changes, not on every re-render. Honor `prefers-reduced-motion` (render final frame).
+5. **Accessible alternative**: every chart ships a text/table equivalent (visually-hidden `<table>` or `<figcaption>` summary) and a descriptive `aria-label`/`aria-labelledby`.
+
+---
+
+## 1. Bar / Column
+
+Compare discrete categories.
+
+**Variants:** vertical (column), horizontal (bar), grouped, stacked, 100%-stacked.
+**States:** default, hover (bar emphasis + tooltip), focus (keyboardable bar `shadow.focus-ring`), selected/filtered, empty, loading (skeleton bars).
+**Accessibility:** bars in a `role="list"`/`figure` with per-bar `aria-label="Category: value"`; or expose the backing table. Order bars meaningfully (value or category), label axes.
+
+## 2. Line / Area
+
+Trends over a continuous dimension (usually time).
+
+**Variants:** single line, multi-series, area, stacked area, stepped, with threshold band.
+**States:** default, hover (crosshair + nearest-point tooltip), focus (point navigation), zoomed/brushed, empty, loading.
+**Accessibility:** distinguish series by **dash pattern + marker shape**, not only hue. Provide point-by-point keyboard traversal or the table fallback. Label units on the axis.
+
+## 3. Pie / Donut
+
+Part-to-whole for **few** segments (≤ 5-6).
+
+**Variants:** pie, donut (with center metric), with leader-line labels.
+**States:** default, hover (segment lift + value), focus, selected, empty.
+**Accessibility:** **direct-label each segment with name + %**, because legends alone fail. Prefer a bar chart when segments are many or similar in size. Order by magnitude.
+
+## 4. Sparkline
+
+Inline micro-trend (in a table cell or KPI card). No axes.
+
+**Variants:** line, bar, win/loss; with end-dot or min/max markers.
+**States:** default, hover (reveal value), positive/negative tint (`dataviz.semantic.positive`/`negative`).
+**Accessibility:** decorative if the numeric value is adjacent (`aria-hidden`); otherwise give an `aria-label` with the trend summary ("Up 12% over 7 days").
+
+## 5. Scatter / Bubble
+
+Correlation across two (or three, via size) measures.
+
+**Variants:** scatter, bubble (size = 3rd measure), with trend line, categorized by color+shape.
+**States:** default, hover (point tooltip), focus, selected/lassoed, empty.
+**Accessibility:** encode category by **shape and** color; label axes with units; provide the data table. Don't rely on size alone for the third measure; include it in the tooltip.
diff --git a/skills/scd-uiux/data/components/feedback.md b/skills/scd-uiux/data/components/feedback.md
new file mode 100644
index 0000000..e968ea0
--- /dev/null
+++ b/skills/scd-uiux/data/components/feedback.md
@@ -0,0 +1,99 @@
+# Feedback & Status Components
+
+Communicate system status, progress, and outcomes. Status changes must reach assistive tech via live regions (`accessibility/aria-patterns.md`). Render via the [Framework Adapter Protocol](../frameworks/adapter-protocol.md).
+
+---
+
+## 1. Toast / Notification
+
+Transient, non-blocking message about a completed action or event.
+
+**Anatomy:** `[icon] [title + message] [action?] [dismiss (x) ]`
+
+**Variants:**
+| Variant | Icon + Color | Token |
+|---------|--------------|-------|
+| Success | check / green | `semantic.feedback.success` |
+| Error | alert / red | `semantic.feedback.error` |
+| Warning | triangle / amber | `semantic.feedback.warning` |
+| Info | i / blue | `semantic.feedback.info` |
+
+**Behavior:** auto-dismiss success/info (~4-6s); errors persist until dismissed. Stack newest-first; cap visible count; pause on hover/focus.
+
+**States (8):** enter (`transition.enter` slide-up+fade), default, hover (pause timer), focus (within), dismissing (`transition.exit`), action-pressed, loading (in-toast progress), error.
+
+**Accessibility:**
+- Container `role="region" aria-label="Notifications"`; messages in a live region: `aria-live="polite"` (info/success), `role="alert"`/`aria-live="assertive"` (errors).
+- Dismiss is a real button with `aria-label`. Never auto-dismiss content the user must act on.
+- Elevation `shadow.elevation.2xl`.
+
+---
+
+## 2. Banner / Inline Alert
+
+Persistent, contextual message tied to a region or page (not transient).
+
+**Anatomy:** `[icon] [message + optional link] [action?] [dismiss?]`
+
+**Variants:** info/success/warning/error; page-level (full-width, square edges) vs. inline (within a card, radius). Dismissible or sticky.
+
+**States:** default, hover/focus on interactive parts, dismissing, disabled action.
+
+**Accessibility:**
+- Informational: `role="status"`. Critical/error: `role="alert"`.
+- Color + icon + text (never color alone). Dismiss = labeled button.
+
+---
+
+## 3. Skeleton (Loading Placeholder)
+
+Structural placeholder that mirrors final content while loading.
+
+**Anatomy:** shapes (lines, blocks, circles) matching the real layout's geometry.
+
+**Variants:** text lines, avatar/circle, card, table row, media block.
+
+**Behavior:** `pulse` or shimmer (`tokens/motion.json`), `linear`, infinite; matches final dimensions to avoid layout shift.
+
+**States:** loading (animated) → resolved (swap to content) / error (replace with error state).
+
+**Accessibility:**
+- Wrap loading region with `aria-busy="true"`; mark skeletons `aria-hidden="true"`.
+- Reduced motion: disable shimmer, show static placeholder.
+
+---
+
+## 4. Progress
+
+Communicate determinate or indeterminate progress.
+
+**Anatomy:** bar track + fill, or circular ring; optional label/percentage.
+
+**Variants:** linear bar, circular, indeterminate (unknown duration), segmented/stepped.
+
+**Sizes:** sm/md/lg thickness; icon-ring sizes from `tokens/sizing.json`.
+
+**States:** in-progress (value 0-100), indeterminate (animated), success (complete), error (failed fill `feedback.error`).
+
+**Accessibility:**
+- `role="progressbar"` with `aria-valuenow/min/max` (omit `valuenow` when indeterminate).
+- Label via `aria-label`/`aria-labelledby`; announce milestones politely, not every tick.
+
+---
+
+## 5. Empty State
+
+Guide the user when there is no content yet.
+
+**Anatomy:** `[illustration/icon] [headline] [supporting text] [primary action] [secondary?]`
+
+**Variants:** first-use (guide to first action), no-results (search/filter: offer to clear), cleared (reassure), error/permission (explain + recover).
+
+**Layout:** centered, generous whitespace, illustration sized via `sizing.aspectRatio` constraints; one clear primary action.
+
+**Copy:** value → action (`content/voice-tone.md`). Never bare "No data".
+
+**Accessibility:**
+- Headline is a real heading in the page hierarchy.
+- Illustration decorative (`aria-hidden`) unless it conveys meaning.
+- Primary action is the natural next focus target.
diff --git a/skills/scd-uiux/data/components/forms-advanced.md b/skills/scd-uiux/data/components/forms-advanced.md
new file mode 100644
index 0000000..782a98e
--- /dev/null
+++ b/skills/scd-uiux/data/components/forms-advanced.md
@@ -0,0 +1,96 @@
+# Advanced Form Components
+
+Complex input controls beyond the basic atoms. Each has a strict ARIA pattern (`accessibility/aria-patterns.md`) and all 8 states. Render via the [Framework Adapter Protocol](../frameworks/adapter-protocol.md).
+
+---
+
+## 1. Combobox / Autocomplete
+
+Text input with a filtered list of suggestions.
+
+**Anatomy:** `[input] [clear?] [toggle ▾] → [listbox [option]…]`
+
+**Variants:** autocomplete (free text + suggestions), select-only (must pick), multi-select (chips), async (debounced fetch + loading).
+
+**Sizes:** input height from `tokens/sizing.json` control scale.
+
+**States (8):** default, hover, focus, open (popup), selected/active-descendant, disabled, loading (fetching), error.
+
+**Accessibility (ARIA Combobox pattern):**
+- Input `role="combobox"`, `aria-expanded`, `aria-controls`, `aria-activedescendant`, `aria-autocomplete`.
+- Popup `role="listbox"`; options `role="option"` with `aria-selected`.
+- `↓/↑` move active option, `Enter` select, `Esc` close, `Home/End`; typing filters. Announce result count politely.
+
+---
+
+## 2. Select (enhanced)
+
+Custom-styled selection from a list (single or multi), groups, custom rendering.
+
+**Anatomy:** `[trigger (value/placeholder) ▾] → [listbox [group][option]…]`
+
+**Variants:** single, multi (chips + count), grouped (`optgroup`), searchable (→ becomes a combobox), with icons/descriptions per option.
+
+**States (8):** default, hover, focus, open, selected, disabled, loading, error (`state.error.border`).
+
+**Accessibility:**
+- **Never ship a native `<select>` in generated UI.** It draws its own chevron, pressed against
+  the control edge with no breathing room, and `appearance: none` plus a custom chevron fights
+  the platform rather than matching the system. Use the Listbox or Combobox pattern above: a
+  button trigger, the chevron placed with inner padding from tokens, and full keyboard parity.
+  Losing native select means accessibility is no longer free, so the custom one must pass every
+  state, keyboard and axe gate before it counts.
+- Trigger announces current value; `aria-expanded`; keyboard parity with native select (typeahead, arrows, `Esc`).
+
+---
+
+## 3. Slider / Range
+
+Select a value (or range) along a continuum.
+
+**Anatomy:** `track [filled] ●(thumb)` single or `●──●` dual-thumb.
+
+**Variants:** single value, range (two thumbs), stepped/ticks, vertical.
+
+**Sizes:** thumb ≥ 24×24 target (`sizing.control.xs`); larger for touch.
+
+**States (8):** default, hover (thumb grows), focus (`focus-ring` on thumb), active (dragging), filled track, disabled, loading (n/a), error.
+
+**Accessibility (ARIA Slider pattern):**
+- Thumb `role="slider"`, `aria-valuenow/min/max`, `aria-valuetext` (human-readable, e.g. "$50"), `aria-label`.
+- `←/→/↑/↓` step, `Home/End`, `PageUp/PageDown` large step. Each thumb separately focusable in a range.
+- Visible current value; don't rely on position alone.
+
+---
+
+## 4. Date / Time Picker
+
+Pick a date, range, or time.
+
+**Anatomy:** `[input] [calendar icon] → [popover: month grid / time list]`
+
+**Variants:** single date, range, date-time, inline vs. popover, with min/max + disabled dates, presets.
+
+**States (8):** default, hover (day cells), focus (focused day), selected (day/range endpoints + in-range fill), today marker, disabled days, loading, error (invalid input).
+
+**Accessibility:**
+- Text input accepts typed dates (don't force the calendar) and supports password managers / autofill where relevant.
+- Calendar = grid (`role="grid"`, `gridcell`); `←/→/↑/↓` by day/week, `PageUp/Down` month, `Home/End` week. Announce focused date; `aria-selected` on chosen.
+- Localized format; respect locale first-day-of-week.
+
+---
+
+## 5. File Upload
+
+Add files via button or drag-and-drop.
+
+**Anatomy:** `[dropzone: icon + "Drag files or browse"] → [file list: name • size • progress • remove]`
+
+**Variants:** single/multiple, drag-drop + click, image preview, with type/size constraints.
+
+**States (8):** default, hover, focus (keyboard), drag-over (active dropzone), uploading (per-file progress), success, disabled, error (rejected type/size: say which + the limit).
+
+**Accessibility:**
+- Real `<input type="file">` reachable by keyboard (drag-drop is an enhancement, never the only path).
+- Each file row labeled; remove = labeled button. Progress via `role="progressbar"`.
+- Errors explain the constraint and how to fix (`content/voice-tone.md`).
diff --git a/skills/scd-uiux/data/components/icon-system.md b/skills/scd-uiux/data/components/icon-system.md
new file mode 100644
index 0000000..ba47797
--- /dev/null
+++ b/skills/scd-uiux/data/components/icon-system.md
@@ -0,0 +1,51 @@
+# Icon System
+
+Icons are a token-governed subsystem, not loose SVGs. Consistency in grid, stroke, and metaphor is what makes an icon set feel like one system. Sizing comes from `tokens/sizing.json` (`icon.*`); color from `currentColor` so icons inherit text/state tokens.
+
+---
+
+## Foundations
+
+- **Grid:** design on a single pixel grid (commonly 24×24) with a consistent live area + padding. Every icon shares the grid so optical weight matches.
+- **Stroke:** one stroke width across the set (e.g. 1.5-2px at 24px). Keep stroke constant across sizes: scale the canvas, not the stroke, or the set looks inconsistent (CLAUDE.md: "keep stroke weight consistent across sizes").
+- **Style:** pick one (outline OR solid OR duotone) as the primary; use the alternate only for a deliberate signal (e.g. solid = selected/active). Don't mix styles arbitrarily.
+- **Optical alignment:** align to optical center, not geometric; balance visual mass.
+
+## Sizing & color (tokens)
+
+| Token | Size | Use |
+|-------|------|-----|
+| `sizing.icon.xs` | 12px | Dense inline / badge |
+| `sizing.icon.sm` | 16px | Default inline icon (with body text) |
+| `sizing.icon.md` | 20px | Buttons, inputs |
+| `sizing.icon.lg` | 24px | Standalone / nav |
+| `sizing.icon.xl` | 32px | Feature / empty-state accent |
+
+- Color via `currentColor`, so the icon inherits `text.*` / state tokens automatically (incl. forced-colors mode, `accessibility/vision.md`). Never hard-code icon hex.
+- Pair icon size with text size for optical balance; keep stroke legible at the smallest used size.
+
+## Delivery
+
+| Method | When |
+|--------|------|
+| **Inline `<svg>`** | Default: stylable (`currentColor`), no extra request, supports `aria-*`. Best for forced-colors and theming. |
+| **SVG sprite** (`<use href="#id">`) | Large sets, cache one file, reference by id. |
+| **Icon font** | Legacy only, avoid (a11y + rendering issues; can't do duotone/forced-colors well). |
+| Component wrapper | An `<Icon name size>` component enforces size tokens + a11y props across frameworks (`frameworks/adapter-protocol.md`). |
+
+## Accessibility
+
+- **Decorative icon** (next to a text label): `aria-hidden="true"` and no `title`, since the label carries meaning. Most UI icons are decorative.
+- **Meaningful icon** (icon-only button/status): give an accessible name via `aria-label` on the button, or `role="img"` + `aria-label`/`<title>` on the SVG. Icon-only controls still need a ≥ 24×24px (44px recommended) hit target (CLAUDE.md).
+- **Never icon-alone for status**: pair with text/color-plus-shape (`accessibility/vision.md`); an icon's meaning isn't universal.
+- Use `currentColor` so icons meet contrast with their text context and adapt to high-contrast mode.
+
+## States
+
+Icons participate in component states via inherited color: default (`text.secondary`), hover/active (inherit control state), selected (`action.primary` or solid variant), disabled (`opacity.disabled`), loading (animated spinner icon + `aria-busy`).
+
+## Verification
+- Single grid + single stroke weight across the whole set?
+- All icons use `currentColor` and `sizing.icon.*` (zero hard-coded hex/px)?
+- Every icon-only control has an accessible name and a ≥ 24px target?
+- No status conveyed by icon (or color) alone?
diff --git a/skills/scd-uiux/data/components/molecules.md b/skills/scd-uiux/data/components/molecules.md
new file mode 100644
index 0000000..12852f5
--- /dev/null
+++ b/skills/scd-uiux/data/components/molecules.md
@@ -0,0 +1,270 @@
+# Molecules
+
+Composed of atoms, molecules form functional groups that handle a specific user task.
+
+---
+
+## 1. Form Field
+
+A complete form input unit: label + input + help text + error message.
+
+**Composition:** `Label` + `Input` + (optional) help text + (optional) error text
+
+**Anatomy:**
+```
+┌─────────────────────────────┐
+│ Label *                     │  ← Label atom + required indicator
+│ ┌─────────────────────────┐ │
+│ │ [icon] Placeholder...   │ │  ← Input atom
+│ └─────────────────────────┘ │
+│ Help text or error message  │  ← Caption text style
+└─────────────────────────────┘
+```
+
+**Layout:**
+- Stack: vertical (default), label on top
+- Inline: horizontal, label left, input right (forms with short labels)
+- Label-input gap: `spacing.stack.xs` (4px)
+- Input-help gap: `spacing.stack.xs` (4px)
+- Field-to-field gap: `spacing.stack.lg` (16px)
+
+**States:**
+- Default → Hover → Focus → Filled → Error → Disabled
+- Error replaces help text, uses `feedback.error-text` color + error icon
+- Required: asterisk on label + `aria-required="true"` on input
+
+**Responsive:**
+- Inline layout collapses to stacked below `md` breakpoint
+- In multi-column forms, fields span full width below `sm`
+
+**Accessibility:**
+- `<label for>` associates label with input
+- Help text: `aria-describedby` on input
+- Error: `aria-invalid="true"` + `aria-describedby` pointing to error message
+- Error message includes `role="alert"` or is in a live region
+
+---
+
+## 2. Search Bar
+
+A text input optimized for search with clear functionality and optional suggestions.
+
+**Composition:** `Icon` (search) + `Input` (type="search") + `Button` (clear) + optional dropdown
+
+**Anatomy:**
+```
+┌─────────────────────────────────────┐
+│ Search products...          [×] │
+└─────────────────────────────────────┘
+│ Recent: Blue widget                 │  ← Optional suggestion dropdown
+│ Popular: Red gadget                 │
+└─────────────────────────────────────┘
+```
+
+**Variants:**
+| Variant | Behavior |
+|---------|----------|
+| Instant | Filters as you type (debounce 300ms) |
+| Submit | Search on Enter or button click |
+| Combobox | Shows autocomplete suggestions |
+
+**States:** Empty, Typing (show clear button), Has value, Loading (spinner replaces search icon), No results
+
+**Responsive:**
+- Desktop: full width in toolbar or constrained by container
+- Mobile: collapses to icon button → expands to full-width overlay on tap
+
+**Accessibility:**
+- `role="search"` on container or use `<search>` element
+- `type="search"` provides native clear on some browsers
+- Clear button: `aria-label="Clear search"`
+- With suggestions: use Combobox ARIA pattern (`aria-patterns.md` → Combobox)
+- Announce result count: live region "5 results found"
+
+---
+
+## 3. Card
+
+A contained surface grouping related content and actions.
+
+**Composition:** `[image?]` + `[header: Badge? + Title + Subtitle?]` + `[body]` + `[footer: Button*]`
+
+**Anatomy:**
+```
+┌──────────────────────────────┐
+│         [Image/Media]         │  ← Optional media slot
+├──────────────────────────────┤
+│ [Badge]                       │
+│ Card Title            [Menu]  │  ← heading-5 + optional overflow menu
+│ Supporting text               │  ← body-sm, text-secondary
+├──────────────────────────────┤
+│ Body content area             │  ← body-base
+├──────────────────────────────┤
+│           [Cancel] [Action]   │  ← Footer with actions
+└──────────────────────────────┘
+```
+
+**Variants:**
+| Variant | Border | Shadow | Use Case |
+|---------|--------|--------|----------|
+| Outlined | `border.default` | none | Lists, dense layouts |
+| Elevated | none | `shadow.sm` | Standalone, dashboards |
+| Interactive | `border.default` | `shadow.sm` on hover | Clickable cards |
+| Filled | none | none | On sunken backgrounds |
+
+**Token Mapping:** `component.card.*`, `spacing.card.*`, `radius.card`
+
+**Layout:**
+- Padding: `spacing.card.padding` (24px), compact: `spacing.card.padding-sm` (16px)
+- Internal gap: `spacing.card.gap` (16px)
+- Image: flush to the card edge (no padding) with `border-radius` top corners only,
+  a fixed `aspect-ratio` from `tokens/sizing.json` -> `aspectRatio`, and a height
+  capped by `sizing.screen.media-max-block`. Flush to the card is not full-bleed:
+  the card still bounds it, and a card image that grows with its content is how a
+  list of cards turns into a column of posters.
+
+**Responsive:**
+- Grid: 3 columns (desktop) → 2 (tablet) → 1 (mobile)
+- Card min-width: 280px; max-width: none (fills grid cell)
+
+**Accessibility:**
+- Interactive card: wrap in `<a>` or `<button>` with full-card click area
+- If card has multiple links, use "stretched link" pattern with one primary `<a>`
+- Card title should be a heading level appropriate to page hierarchy
+- Image: meaningful `alt` text or `alt=""` if title duplicates content
+
+---
+
+## 4. Navigation Item
+
+A single item within a navigation structure (sidebar, tabs, breadcrumbs).
+
+**Composition:** `Icon` + `Label` + `Badge?` + `Chevron?` (for nested)
+
+**Anatomy:**
+```
+┌──────────────────────────────┐
+│ [icon]  Label          [3]  │  ← Icon + text + count badge
+└──────────────────────────────┘
+```
+
+**Variants:**
+| Variant | Context |
+|---------|---------|
+| Sidebar item | Vertical navigation with icon + text |
+| Tab item | Horizontal tab bar |
+| Breadcrumb item | Path trail with separator |
+| Bottom nav item | Mobile bottom bar (icon + label stacked) |
+
+**States:** Default, Hover, Active/Current, Focus, Disabled
+
+**Active Indicator:**
+- Sidebar: left border 3px `action.primary` + `interactive.selected-bg`
+- Tab: bottom border 2px `action.primary`
+- Breadcrumb: bold text, no link
+
+**Token Mapping:**
+- Text: `text.secondary` (default), `text.primary` (active)
+- Background: transparent (default), `interactive.selected-bg` (active)
+- Icon: matches text color
+
+**Accessibility:**
+- Use `<nav aria-label="Main navigation">` wrapper
+- Current item: `aria-current="page"` (sidebar/breadcrumb) or `aria-selected="true"` (tabs)
+- Collapsible groups: `aria-expanded` on parent
+- Badge count: `aria-label="Messages, 3 unread"` on the nav item
+
+---
+
+## 5. Alert
+
+A contextual message communicating feedback, status, or important information.
+
+**Composition:** `Icon` + `[Title?]` + `Message` + `[Action?]` + `[Close?]`
+
+**Anatomy:**
+```
+┌──────────────────────────────────────┐
+│ ⓘ  Alert Title                  [×] │
+│    Alert message with details.       │
+│    [Action Link]                     │
+└──────────────────────────────────────┘
+```
+
+**Variants:**
+| Variant | Icon | Colors | Use Case |
+|---------|------|--------|----------|
+| Info | ⓘ | `feedback.info-*` | Tips, general information |
+| Success | (pass) | `feedback.success-*` | Completed actions |
+| Warning | Warning: | `feedback.warning-*` | Potential issues |
+| Error | (x) | `feedback.error-*` | Failures, blocking issues |
+
+**Layout:**
+- Full-width within container (not page-width)
+- Padding: `spacing.card.padding-sm` (16px)
+- Icon-text gap: `spacing.inline.md` (12px)
+- Border-left: `border.width.thick` (4px) in variant color
+- Radius: `radius.card` (8px)
+
+**Behavior:**
+- Inline alerts: persistent, dismissed by user or resolved condition
+- Toast alerts: auto-dismiss after 5s (non-critical) or persistent (errors)
+- Stacking: newest on top, max 3 visible
+
+**Accessibility:**
+- Use `role="alert"` for dynamic errors/warnings (assertive)
+- Use `role="status"` for success messages (polite)
+- Inline informational alerts: no ARIA role needed (static content)
+- Dismiss button: `aria-label="Dismiss alert"`
+- Icon: `aria-hidden="true"` (role is communicated by color/text, not icon alone)
+- Never rely solely on color: icon + text + border all convey the variant
+
+---
+
+## 6. Dropdown
+
+A button-triggered floating panel with a list of options or actions.
+
+**Composition:** `Button` (trigger) + floating `[list of items]`
+
+**Anatomy:**
+```
+[Trigger Button ▾]
+┌────────────────────────┐
+│ [icon] Option One      │  ← menu item
+│ [icon] Option Two      │
+│────────────────────────│  ← separator
+│ [icon] Danger Action   │  ← destructive variant
+└────────────────────────┘
+```
+
+**Variants:**
+| Variant | Trigger | Content |
+|---------|---------|---------|
+| Menu | Button with chevron | Action items (`role="menu"`) |
+| Select | Input-like trigger | Option selection (`role="listbox"`) |
+| Multi-select | Input-like trigger | Checkable options |
+| Context menu | Right-click | Action items |
+
+**Layout:**
+- Min-width: trigger width; Max-width: 320px
+- Item height: 36px (md), 32px (sm)
+- Padding: `spacing.component.input-padding-*`
+- Shadow: `shadow.lg`
+- Radius: `radius.dropdown` (8px)
+- Placement: bottom-start (default), auto-flip when near viewport edges
+
+**States (items):** Default, Hover, Focus, Active, Selected (checkmark), Disabled (gray, skip in keyboard nav)
+
+**Behavior:**
+- Opens on click (not hover)
+- Closes on: selection, Escape, click outside
+- Scroll: max-height with overflow if > 8 items visible
+- Type-ahead: typing characters focuses matching item
+
+**Accessibility:**
+- Menu variant: see `aria-patterns.md` → Menu
+- Select variant: see `aria-patterns.md` → Listbox
+- Trigger: `aria-haspopup="true"`, `aria-expanded="true/false"`
+- Items: `role="menuitem"` or `role="option"`
+- Keyboard: Down/Up arrows navigate, Enter selects, Escape closes
diff --git a/skills/scd-uiux/data/components/navigation.md b/skills/scd-uiux/data/components/navigation.md
new file mode 100644
index 0000000..87b9c8a
--- /dev/null
+++ b/skills/scd-uiux/data/components/navigation.md
@@ -0,0 +1,100 @@
+# Navigation Components
+
+Patterns for moving through and orienting within an interface. Each maps to tokens and an ARIA pattern in `accessibility/aria-patterns.md`. Render via the [Framework Adapter Protocol](../frameworks/adapter-protocol.md).
+
+---
+
+## 1. Tabs
+
+Switch between peer views in the same context.
+
+**Anatomy:** `[tablist [tab][tab][tab]] → [tabpanel]`
+
+**Variants:**
+| Variant | Use | Token Mapping |
+|---------|-----|---------------|
+| Underline | Default content tabs | active border `semantic.action.primary` |
+| Pill/Segmented | Compact filters, ≤4 options | selected bg `state.selected.bg` |
+| Vertical | Settings, side nav | left-edge active indicator |
+
+**Sizes:** sm/md/lg → control heights from `tokens/sizing.json`.
+
+**States (8):** default, hover (`opacity.subtle` overlay), focus (`focus-ring`), active, selected (active indicator + `text.primary`), disabled (`opacity.disabled`), loading (skeleton panel), error (n/a).
+
+**Accessibility (ARIA Tabs pattern):**
+- `role="tablist"` › `role="tab"` (`aria-selected`, `aria-controls`) › `role="tabpanel"` (`aria-labelledby`).
+- Roving tabindex; `←/→` move, `Home/End` jump, `Enter/Space` activate (or automatic on focus).
+- Selected tab must be distinguished by more than color (indicator + weight).
+
+---
+
+## 2. Breadcrumb
+
+Show hierarchy and the path to the current page.
+
+**Anatomy:** `Home / Section / Subsection / [Current]` with separators.
+
+**Variants:** with/without leading icon; truncating (collapse middle into `…` menu on small screens).
+
+**States:** link items get default/hover/focus; current item is non-interactive (`aria-current="page"`).
+
+**Accessibility:**
+- Wrap in `<nav aria-label="Breadcrumb">` › ordered list.
+- Current page: `aria-current="page"`, not a link.
+- Separators are decorative (`aria-hidden`), never the only indicator.
+
+---
+
+## 3. Pagination
+
+Navigate across pages of results.
+
+**Anatomy:** `[‹ Prev] [1][2]…[n] [Next ›]` or `[‹] Page X of Y [›]`.
+
+**Variants:** numbered (with ellipsis truncation), prev/next only, load-more, infinite (announce new items via live region).
+
+**Sizes:** controls ≥ `control.xs` (24px) target minimum; recommend `control.md` for touch.
+
+**States (8):** default, hover, focus, active, selected (current page, `aria-current="page"`), disabled (prev on first / next on last), loading (page swap), error.
+
+**Accessibility:**
+- `<nav aria-label="Pagination">`; current page `aria-current="page"`.
+- Disabled prev/next: `aria-disabled` + removed from tab order or non-actionable.
+- Announce result-range changes politely.
+
+---
+
+## 4. Stepper / Progress Steps
+
+Show position within a linear multi-step flow.
+
+**Anatomy:** `①──②──③` with labels; states per step.
+
+**Variants:** horizontal, vertical, numbered vs. icon, with/without descriptions.
+
+**States per step:** upcoming (muted), current (`action.primary` + `aria-current="step"`), completed (check + success), error (one step), disabled.
+
+**Accessibility:**
+- `<ol>` of steps; current step `aria-current="step"`.
+- Step status conveyed by icon + text, not color alone.
+- If steps are navigable, they're buttons/links with clear names ("Step 2: Shipping").
+
+---
+
+## 5. Menu / Menubar
+
+Action lists triggered by a button, or a persistent app menubar with submenus.
+
+**Anatomy:** `[trigger] → [menu [menuitem][separator][submenu ▸]]`
+
+**Variants:** dropdown menu, context menu, menubar, with checkable items (`menuitemcheckbox`/`menuitemradio`), with submenus.
+
+**Sizes:** item height ≥ `control.sm`; comfortable padding from `tokens/spacing.json`.
+
+**States (8):** default, hover, focus, active, selected/checked, disabled, loading (async items), error.
+
+**Accessibility (ARIA Menu pattern):**
+- `role="menu"` › `role="menuitem"` (+ `menuitemcheckbox`/`menuitemradio`).
+- Roving tabindex; `↑/↓` move, `→/←` open/close submenu, `Enter/Space` activate, `Esc` close + return focus to trigger, typeahead.
+- Trigger: `aria-haspopup="menu"`, `aria-expanded`.
+- Focus moves into menu on open, returns to trigger on close.
diff --git a/skills/scd-uiux/data/components/organisms.md b/skills/scd-uiux/data/components/organisms.md
new file mode 100644
index 0000000..9491872
--- /dev/null
+++ b/skills/scd-uiux/data/components/organisms.md
@@ -0,0 +1,330 @@
+# Organisms
+
+Complex, multi-molecule components that form distinct sections of the interface. Each organism manages its own state and contains multiple interactive elements.
+
+---
+
+## 1. Header (App Bar)
+
+The persistent top-level navigation bar.
+
+**Composition:** `Logo` + `Navigation Items` + `Search Bar` + `Avatar/Actions`
+
+**Grid Structure:**
+```
+┌─────────────────────────────────────────────────────────┐
+│ [Logo]   [Nav Item] [Nav Item] [Nav Item]   [Avatar]│
+│  ↑                   ↑                        ↑        │
+│  Fixed width         Flex grow (center)        Auto     │
+└─────────────────────────────────────────────────────────┘
+```
+
+**Dimensions:**
+- Height: 64px (desktop), 56px (mobile)
+- Horizontal padding: `spacing.page.inline-padding` / `page.inline-padding-lg`
+- z-index: `z-index.sticky` (20) or `z-index.fixed` (30)
+
+**Content Slots:**
+| Slot | Content | Alignment |
+|------|---------|-----------|
+| Leading | Logo / hamburger menu (mobile) | Left |
+| Center | Primary navigation / breadcrumbs | Center or left |
+| Trailing | Search, notifications, avatar, CTA | Right |
+
+**Variants:**
+| Variant | Behavior |
+|---------|----------|
+| Static | Scrolls with page |
+| Sticky | Sticks to top on scroll (`position: sticky`) |
+| Transparent | Overlays hero; becomes opaque on scroll |
+| Compact | Reduces height on scroll (64→48px) |
+
+**Responsive:**
+- **Desktop (≥ lg):** Full horizontal nav
+- **Tablet (md-lg):** Collapsed nav → hamburger menu or priority+ pattern
+- **Mobile (< md):** Logo + hamburger + essential actions only
+
+**Animation:**
+- Scroll transition: opacity/height change over 200ms `ease-out`
+- Mobile menu: slide from left, 250ms `ease-in-out`
+
+**Accessibility:**
+- `<header role="banner">`, once per page
+- `<nav aria-label="Main navigation">` for primary nav
+- Skip link: first focusable element is "Skip to main content"
+- Mobile menu: `aria-expanded`, `aria-controls`, focus trap when open
+
+---
+
+## 2. Sidebar
+
+A vertical navigation panel with hierarchical navigation and collapsibility.
+
+**Grid Structure:**
+```
+┌──────────────────┐
+│ [Logo / Collapse] │  ← Fixed header
+├──────────────────┤
+│ [Search]          │
+├──────────────────┤
+│ [Nav Group Label] │
+│  [Nav Item]       │  ← Scrollable
+│  [Nav Item]       │    navigation
+│  [Nav Item ▸]     │    area
+│   └ [Sub Item]    │
+│   └ [Sub Item]    │
+├──────────────────┤
+│ [User / Settings] │  ← Fixed footer
+└──────────────────┘
+```
+
+**Dimensions:**
+- Width: `sidebar.default` (256px), collapsed: `sidebar.collapsed` (64px)
+- z-index: `z-index.fixed` (30) on mobile overlay
+
+**State Management:**
+| State | Width | Content | Behavior |
+|-------|-------|---------|----------|
+| Expanded | 256px | Icons + labels | Default on desktop |
+| Collapsed | 64px | Icons only + tooltips | User preference |
+| Hidden | 0px | - | Mobile default |
+| Overlay | 256px | Full, over content | Mobile when open |
+
+**Collapse Animation:** Width transition 200ms `ease-in-out`. Text fades out at 150ms, icons remain.
+
+**Responsive:**
+- **Desktop (≥ lg):** Persistent sidebar, push content
+- **Tablet (md-lg):** Collapsed by default, expand on hover/click
+- **Mobile (< md):** Hidden; hamburger triggers overlay with backdrop
+
+**Accessibility:**
+- `<aside aria-label="Sidebar navigation">`
+- `<nav aria-label="Main navigation">` inside
+- Collapse button: `aria-expanded="true/false"`, `aria-label="Collapse sidebar"`
+- Collapsed: tooltips on hover/focus for icon-only items
+- Overlay (mobile): focus trap, Escape to close, backdrop `aria-hidden="true"`
+
+---
+
+## 3. Form
+
+A complete data entry container managing multiple Form Fields with validation.
+
+**Grid Structure:**
+```
+┌──────────────────────────────────────┐
+│ Form Title                           │
+│ Description text                     │
+├──────────────────────────────────────┤
+│ Section Label                        │
+│ ┌────────────┐ ┌────────────┐       │
+│ │ First Name │ │ Last Name  │       │  ← 2-column row
+│ └────────────┘ └────────────┘       │
+│ ┌───────────────────────────┐       │
+│ │ Email                     │       │  ← Full-width row
+│ └───────────────────────────┘       │
+│ ┌───────────────────────────┐       │
+│ │ Message (textarea)        │       │  ← Full-width row
+│ └───────────────────────────┘       │
+├──────────────────────────────────────┤
+│              [Cancel]  [Submit]      │  ← Action bar
+└──────────────────────────────────────┘
+```
+
+**Layout:**
+- Field gap: `spacing.stack.lg` (16px)
+- Section gap: `spacing.stack.2xl` (32px)
+- Column gap: `spacing.stack.lg` (16px)
+- Grid: 2 columns (desktop) → 1 column (mobile)
+- Action bar: right-aligned, primary action last (rightmost)
+
+**State Management:**
+| Form State | Behavior |
+|------------|----------|
+| Empty | All fields default, submit disabled/enabled |
+| Dirty | Unsaved changes indicator, confirm on navigate away |
+| Validating | Inline validation on blur (not on keystroke) |
+| Submitting | Submit button loading, all fields disabled |
+| Success | Success alert, optional redirect |
+| Error | Scroll to first error, focus first invalid field, error summary |
+
+**Validation Strategy:**
+1. **On blur:** Validate individual field when focus leaves
+2. **On submit:** Validate all fields, show all errors
+3. **On fix:** Revalidate changed field immediately (not on blur again)
+4. Error message appears below field, replaces help text
+
+**Accessibility:**
+- `<form>` with `aria-label` or `aria-labelledby` pointing to form title
+- Group related fields in `<fieldset>` with `<legend>`
+- Error summary: `role="alert"` at top listing all errors with links to fields
+- Submit: `aria-disabled` while loading, announce "Submitting..." via live region
+- Unsaved changes: `beforeunload` confirmation + visual indicator
+
+---
+
+## 4. Data Table
+
+A structured data display with sorting, filtering, pagination, and row actions.
+
+**Grid Structure:**
+```
+┌──────────────────────────────────────────┐
+│ [Title]  [Filter] [Search]  [+ Add]     │  ← Toolbar
+├──┬──────────┬────────┬──────┬───────────┤
+│[ ] │ Name ↕   │ Status │ Date │ Actions   │  ← Header row
+├──┼──────────┼────────┼──────┼───────────┤
+│[ ] │ Item A   │ (green) Active │ Jan 1│ ⋯      │  ← Data rows
+│[ ] │ Item B   │ (red) Error  │ Jan 2│ ⋯      │
+│[ ] │ Item C   │ (neutral) Draft  │ Jan 3│ ⋯      │
+├──┴──────────┴────────┴──────┴───────────┤
+│ Showing 1-10 of 50    [< 1 2 3 4 5 >]  │  ← Pagination
+└──────────────────────────────────────────┘
+```
+
+**Content Slots:**
+| Slot | Features |
+|------|----------|
+| Toolbar | Title, filters, search, bulk actions, add button |
+| Header | Column labels, sort indicators, select-all checkbox |
+| Body | Data rows, inline editing, expandable rows |
+| Footer | Pagination, row count, items per page |
+
+**Features:**
+- **Sorting:** Click header to toggle asc/desc/none
+- **Filtering:** Column-specific or global search
+- **Selection:** Checkbox per row + select all
+- **Bulk actions:** Toolbar actions when rows selected
+- **Row actions:** Overflow menu (⋯) per row
+- **Empty state:** Illustration + message + CTA
+- **Loading state:** Skeleton rows (5 rows)
+
+**Cell Padding:** `spacing.component.table-cell-padding-*`
+
+**Responsive:**
+- **Desktop:** Full table
+- **Tablet:** Horizontal scroll with sticky first column
+- **Mobile:** Card-based layout (each row becomes a card) or collapsible rows
+
+**Accessibility:**
+- Use `<table>`, `<thead>`, `<tbody>`, `<th scope="col/row">`
+- Sort buttons in `<th>`: `aria-sort="ascending/descending/none"`
+- Select all: `aria-label="Select all rows"`
+- Row checkbox: `aria-label="Select [item name]"`
+- Pagination: `<nav aria-label="Table pagination">`
+- Status badges: don't rely on color alone; include text
+- Announce sort changes and filter results via `aria-live="polite"`
+
+---
+
+## 5. Modal (Dialog)
+
+A focused overlay that interrupts workflow for critical information or action.
+
+> **Non-negotiable: build ONE reusable Modal primitive and reuse it for every dialog.** Never hand-roll a div-as-modal per screen. Every instance MUST have: focus trap, `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, Escape-to-close, **focus returned to the trigger on close**, and a backdrop. Missing the focus trap violates WCAG 2.4.3 + 2.1.2. Reference implementation: `examples/golden/Modal.tsx`.
+
+**Grid Structure:**
+```
+┌──────────── Overlay ─────────────────┐
+│                                       │
+│   ┌────────────────────────────┐     │
+│   │ [Icon] Title           [×] │     │  ← Header
+│   ├────────────────────────────┤     │
+│   │                            │     │
+│   │ Content area               │     │  ← Body (scrollable)
+│   │                            │     │
+│   ├────────────────────────────┤     │
+│   │       [Secondary] [Primary]│     │  ← Footer
+│   └────────────────────────────┘     │
+│                                       │
+└───────────────────────────────────────┘
+```
+
+**Dimensions:**
+| Size | Width | Use Case |
+|------|-------|----------|
+| sm | 400px | Confirmations, simple forms |
+| md | 560px | Complex forms, details |
+| lg | 720px | Multi-step, rich content |
+| xl | 960px | Data-heavy, split views |
+| full | 100% - 48px | Mobile |
+
+**Tokens:**
+- Background: `surface.card`, Overlay: `surface.overlay`
+- Radius: `radius.modal` (12px)
+- Shadow: `shadow.xl`
+- z-index: `z-index.modal` (50)
+- Padding: `spacing.component.modal-padding` (24px)
+
+**Animation:**
+- Open: overlay fade-in 150ms + modal scale(0.95→1) + fade-in 150ms
+- Close: reverse at 100ms
+- Respect `prefers-reduced-motion`: skip scale, use fade only
+
+**Focus Trap:**
+1. On open: focus first focusable element in modal
+2. Tab cycles only within modal
+3. Escape closes modal
+4. On close: return focus to trigger element
+
+**Accessibility:**
+- `role="dialog"`, `aria-modal="true"`
+- `aria-labelledby` → title, `aria-describedby` → description
+- Set `inert` attribute on content behind modal (or `aria-hidden="true"`)
+- See `aria-patterns.md` → Dialog
+
+**Confirmation variant (destructive):**
+- The confirm button uses the **danger/destructive** token (never primary) and the SAME variant as the trigger that opened it.
+- The confirm label **restates the action** ("Delete account"), matching the title, not "Delete"/"OK"/"Yes" (`content/voice-tone.md`).
+- **Irreversible** actions (cannot be undone) require friction (WCAG 3.3.4/3.3.6): a **type-to-confirm** field (e.g. type "DELETE") that enables the confirm button; focus the field on open. Reference: `examples/sample-app/preview.html`.
+- Order: Cancel (secondary) then the destructive action; default focus goes to the safe path / the confirm field, never auto-focuses the destructive button.
+
+---
+
+## 6. Drawer
+
+A panel that slides in from the edge for secondary content or navigation.
+
+**Grid Structure:**
+```
+┌────────────────────────────────────────┐
+│                            ┌──────────┐│
+│         Main Content       │ [×]      ││  ← Drawer header
+│         (dimmed)           ├──────────┤│
+│                            │ Content  ││  ← Scrollable body
+│                            │          ││
+│                            ├──────────┤│
+│                            │ [Actions]││  ← Optional footer
+│                            └──────────┘│
+└────────────────────────────────────────┘
+```
+
+**Variants:**
+| Position | Width/Height | Use Case |
+|----------|-------------|----------|
+| Right | 320-480px | Detail panels, edit forms |
+| Left | 256-320px | Navigation (mobile) |
+| Bottom | 40-90vh | Mobile actions sheets |
+
+**Tokens:**
+- Same surface/shadow as Modal
+- z-index: `z-index.overlay` (40) or `z-index.modal` (50) with backdrop
+
+**Animation:**
+- Slide from edge: `translateX(100%)` → `translateX(0)` over 250ms `ease-out`
+- Backdrop: fade-in 150ms
+- Respect `prefers-reduced-motion`
+
+**Behavior:**
+- With backdrop: blocks main content (like a modal)
+- Without backdrop: inline, pushes content (persistent drawer)
+- Swipe-to-close on touch devices (bottom/left/right drawers)
+
+**Focus Management:**
+- With backdrop: focus trap (same as Modal)
+- Without backdrop: no focus trap, focus moves naturally
+
+**Accessibility:**
+- Same as Modal: `role="dialog"`, `aria-modal="true"` (if blocking), `aria-label`
+- Escape to close
+- Return focus to trigger on close
diff --git a/skills/scd-uiux/data/components/overlays.md b/skills/scd-uiux/data/components/overlays.md
new file mode 100644
index 0000000..8797d7e
--- /dev/null
+++ b/skills/scd-uiux/data/components/overlays.md
@@ -0,0 +1,55 @@
+# Overlay & Utility Components
+
+Floating surfaces and structural utilities. Overlays require focus management and dismissal patterns (`accessibility/aria-patterns.md`). Render via the [Framework Adapter Protocol](../frameworks/adapter-protocol.md).
+
+---
+
+## 1. Popover
+
+Non-modal floating panel anchored to a trigger; can hold interactive content.
+
+**Anatomy:** `[trigger] → [popover: arrow? + content + actions?]`
+
+**Variants:** click vs. hover trigger, with/without arrow, rich content (forms, menus), confirmation popover.
+
+**Positioning:** auto-flip/shift to stay in viewport; offset from trigger via `tokens/spacing.json`; elevation `shadow.elevation.lg`.
+
+**States (8):** closed, opening (`transition.enter` scale-in+fade), open, hover/focus within, interacting, closing (`transition.exit`), disabled trigger, error (async content).
+
+**Accessibility:**
+- Trigger `aria-expanded`, `aria-controls`; popover labelled by its heading.
+- Non-modal: focus moves in on open but page stays interactive (unlike dialog). `Esc` closes + returns focus to trigger; click-outside closes.
+- Distinguish from Tooltip (tooltip = brief, non-interactive, describes) and Menu (action list).
+
+---
+
+## 2. Command Palette
+
+Keyboard-driven fuzzy search over commands/navigation (⌘K).
+
+**Anatomy:** `[modal: search input → grouped results [item: icon • label • shortcut]]`
+
+**Variants:** commands only, with navigation, with recent/suggested, nested pages, async results.
+
+**States (8):** closed, open (focus in input), typing (filtering), result hover/active, selected (execute), empty (no matches → helpful empty state), loading (async), error.
+
+**Accessibility:**
+- Modal dialog containing a Combobox (`role="combobox"` + `role="listbox"` results); `aria-activedescendant` for the highlighted item.
+- `↑/↓` navigate, `Enter` run, `Esc` close, typeahead; trap focus while open, restore on close.
+- Announce result count; each item has an accessible name; shortcut hints are supplementary.
+
+---
+
+## 3. Divider / Separator
+
+Visually and semantically separate content groups.
+
+**Anatomy:** horizontal/vertical line, optionally with centered text or icon.
+
+**Variants:** horizontal, vertical (inline, needs explicit height), with label ("OR"), inset, `border.style` solid/dashed (`tokens/borders.json`).
+
+**States:** static (decorative or semantic).
+
+**Accessibility:**
+- Decorative: `role="presentation"` / `aria-hidden`. Semantic grouping: `role="separator"` (with `aria-orientation` for vertical).
+- Color from `semantic.border.default`/`subtle`; never rely on a divider alone to convey grouping for screen readers. Use headings/landmarks too.
diff --git a/skills/scd-uiux/data/components/templates.md b/skills/scd-uiux/data/components/templates.md
new file mode 100644
index 0000000..c323077
--- /dev/null
+++ b/skills/scd-uiux/data/components/templates.md
@@ -0,0 +1,271 @@
+# Templates
+
+Page-level layout patterns that define content zones, grid structure, and handle empty/loading/error states. Templates are framework-agnostic blueprints: implement using your framework's layout system.
+
+---
+
+## 1. Dashboard Template
+
+The primary data overview and monitoring layout.
+
+**Page Grid:**
+```
+┌────────────────────────────────────────────────────────┐
+│ [Header]                                                │  ← organisms/Header
+├──────────┬─────────────────────────────────────────────┤
+│          │ Page Title             [Date Picker] [+ New]│  ← Title bar
+│          ├─────────────────────────────────────────────┤
+│          │ ┌────┐ ┌────┐ ┌────┐ ┌────┐               │
+│ [Sidebar]│ │KPI │ │KPI │ │KPI │ │KPI │               │  ← Stats row (4-col)
+│          │ └────┘ └────┘ └────┘ └────┘               │
+│          ├───────────────────────┬─────────────────────┤
+│          │                       │                     │
+│          │   Primary Chart       │  Secondary Panel    │  ← Content area (8+4)
+│          │                       │                     │
+│          ├───────────────────────┴─────────────────────┤
+│          │ ┌─────────────────────────────────────────┐ │
+│          │ │ Data Table / Activity Feed              │ │  ← Full-width table
+│          │ └─────────────────────────────────────────┘ │
+└──────────┴─────────────────────────────────────────────┘
+```
+
+**Content Zones:**
+| Zone | Grid Span | Content |
+|------|-----------|---------|
+| Stats Row | 4 × 3-col cards | KPI cards: metric, trend, sparkline |
+| Primary Chart | 8 columns | Main visualization (line/bar/area) |
+| Secondary Panel | 4 columns | Breakdown, top items, or notifications |
+| Data Table | 12 columns | Recent activity or main data view |
+
+**Responsive Behavior:**
+- **Desktop (≥ lg):** Sidebar + 12-col content grid
+- **Tablet (md-lg):** Collapsed sidebar + 8-col grid; secondary panel moves below primary
+- **Mobile (< md):** No sidebar + single column; KPIs become 2×2 grid, charts stack
+
+**States:**
+| State | Behavior |
+|-------|----------|
+| Loading | Skeleton screens matching each zone's dimensions |
+| Empty | Illustration + "No data yet" + CTA to add first item |
+| Error | Error alert at top + retry button; partial data shows where possible |
+| Populated | Full content as designed |
+
+---
+
+## 2. Auth Template
+
+Authentication pages: login, register, forgot password, reset password.
+
+**Page Grid:**
+```
+┌──────────────────────────────────────────┐
+│                                          │
+│           ┌──────────────┐               │
+│           │    [Logo]     │               │
+│           │               │               │
+│           │  Welcome back │               │
+│           │               │               │
+│           │ ┌──────────┐ │               │
+│           │ │ Email    │ │               │
+│           │ └──────────┘ │               │
+│           │ ┌──────────┐ │               │
+│           │ │ Password │ │               │
+│           │ └──────────┘ │               │
+│           │              │               │
+│           │ [Sign In ══] │               │
+│           │              │               │
+│           │ Or continue: │               │
+│           │ [G] [GH] [A] │               │  ← Social auth
+│           │              │               │
+│           │ Don't have…  │               │  ← Secondary link
+│           └──────────────┘               │
+│                                          │
+│           © Company 2026                 │
+└──────────────────────────────────────────┘
+
+Alternative: Split layout
+┌───────────────────┬──────────────────────┐
+│                   │                      │
+│   Brand / Hero    │    Auth Form Card    │
+│   Illustration    │    (same as above)   │
+│                   │                      │
+└───────────────────┴──────────────────────┘
+```
+
+**Content Zones:**
+| Zone | Content |
+|------|---------|
+| Brand | Logo, optional tagline |
+| Title | Page-specific: "Sign in", "Create account", "Reset password" |
+| Form | Email, password, remember me, forgot link |
+| Social | OAuth buttons (Google, GitHub, Apple, etc.) |
+| Footer | Terms link, privacy link, copyright |
+
+**Variants:**
+| Page | Fields | Primary Action |
+|------|--------|---------------|
+| Login | Email + Password + Remember | "Sign In" |
+| Register | Name + Email + Password + Confirm | "Create Account" |
+| Forgot Password | Email | "Send Reset Link" |
+| Reset Password | New Password + Confirm | "Reset Password" |
+| Verify Email | OTP input (6 digits) | "Verify" |
+
+**Layout:**
+- Card width: 400px (max)
+- Centered vertically and horizontally
+- Card padding: `spacing.card.padding` (24px)
+- Field gap: `spacing.stack.lg` (16px)
+
+**Responsive:** Card becomes full-width on mobile with `spacing.page.inline-padding`. Split layout collapses, with the brand panel hidden below `md`.
+
+**States:**
+| State | Behavior |
+|-------|----------|
+| Loading | Submit button shows spinner |
+| Error | Inline error below field + alert at top for general errors |
+| Rate Limited | Disable submit + countdown timer |
+| Success | Redirect or success message |
+
+**Accessibility:**
+- `<main>` landmark contains the form
+- WCAG 3.3.8: allow password managers, no CAPTCHA as sole method
+- Social buttons: `aria-label="Sign in with Google"`
+
+---
+
+## 3. Settings Template
+
+User or application settings with grouped sections.
+
+**Page Grid:**
+```
+┌────────────────────────────────────────────────────────┐
+│ [Header]                                                │
+├──────────┬─────────────────────────────────────────────┤
+│          │ Settings                                     │
+│          ├─────────────────────────────────────────────┤
+│          │ ┌───────────┐  ┌───────────────────────────┐│
+│          │ │ Profile    │  │ Profile                   ││
+│ [Sidebar]│ │ Account    │  │                           ││
+│          │ │ Security   │  │ [Avatar Upload]           ││
+│          │ │ Notifs     │  │ [Name ][Email]            ││
+│          │ │ Billing    │  │ [Bio              ]       ││
+│          │ │ Team       │  │                           ││
+│          │ │ API        │  │ ──────────────────────    ││
+│          │ └───────────┘  │ [Save]                    ││
+│          │  Settings Nav   │                           ││
+│          │                 └───────────────────────────┘│
+└──────────┴─────────────────────────────────────────────┘
+```
+
+**Content Zones:**
+| Zone | Grid | Content |
+|------|------|---------|
+| Settings Nav | 3 columns or sidebar | Vertical list of section links |
+| Settings Content | 9 columns | Form sections with save per section or global save |
+
+**Section Pattern:**
+```
+┌────────────────────────────────────┐
+│ Section Title                      │
+│ Section description                │
+├────────────────────────────────────┤
+│ [Form fields]                      │
+│                                    │
+│ ─────────────────────────          │  ← Divider
+│                       [Save]       │  ← Per-section save (recommended)
+└────────────────────────────────────┘
+```
+
+**Common Sections:**
+| Section | Fields |
+|---------|--------|
+| Profile | Avatar, display name, email, bio, timezone |
+| Account | Username, delete account (with confirmation) |
+| Security | Password change, 2FA setup, active sessions |
+| Notifications | Channel toggles (email, push, in-app) per event type |
+| Billing | Plan display, payment method, invoices table |
+| Team | Members table, invite form, roles |
+| API | API keys table, create key, usage stats |
+
+**Responsive:**
+- **Desktop:** Side nav + content
+- **Tablet:** Top tabs + content
+- **Mobile:** Stack, with the nav list as full page, content as drill-down page with back button
+
+**States:**
+| State | Behavior |
+|-------|----------|
+| Loading | Skeleton for active section |
+| Saving | Button loading, fields disabled |
+| Unsaved | Visual indicator (dot/badge) on section nav + confirm on leave |
+| Success | Inline success toast |
+| Error | Field-level errors + summary |
+
+---
+
+## 4. List/Detail Template
+
+A master-detail layout for browsing collections and viewing individual items.
+
+**Page Grid:**
+```
+┌────────────────────────────────────────────────────────┐
+│ [Header]                                                │
+├──────────┬──────────────┬──────────────────────────────┤
+│          │ List Panel    │ Detail Panel                  │
+│          │              │                               │
+│          │ [Search]     │ Item Title          [Edit]    │
+│          │ [Filters]    │                               │
+│ [Sidebar]│              │ ┌──────────────────────────┐ │
+│          │ ▸ Item A     │ │ Content tabs / sections  │ │
+│          │   Item B ←   │ │                          │ │
+│          │   Item C     │ │ Rich content area        │ │
+│          │   Item D     │ │                          │ │
+│          │              │ └──────────────────────────┘ │
+│          │ [Load more]  │                               │
+└──────────┴──────────────┴──────────────────────────────┘
+```
+
+**Content Zones:**
+| Zone | Grid | Content |
+|------|------|---------|
+| List Panel | 4 columns (fixed or resizable) | Search, filters, scrollable item list |
+| Detail Panel | 8 columns | Full item view with tabs or sections |
+
+**List Item Pattern:**
+```
+┌───────────────────────────┐
+│ [Avatar] Title     [Time] │
+│          Preview text...  │
+│          [Badge] [Badge]  │
+└───────────────────────────┘
+```
+
+**Variants:**
+| Variant | Use Case |
+|---------|----------|
+| Email client | Messages list + message detail |
+| CRM | Contacts list + contact profile |
+| File browser | Files list + file preview |
+| Documentation | Page tree + page content |
+
+**Responsive:**
+- **Desktop (≥ lg):** Side-by-side list + detail
+- **Tablet (md-lg):** List panel narrows (3-col); detail expands
+- **Mobile (< md):** Stack, with the list as page 1, detail as page 2 with back navigation
+
+**States:**
+| State | List Panel | Detail Panel |
+|-------|------------|-------------|
+| Loading | Skeleton list items (8) | Skeleton content |
+| Empty list | Illustration + "No items" + CTA | Hidden |
+| No selection | Normal list | "Select an item" placeholder |
+| Selected | Highlighted item | Full item content |
+| Error | Error alert + retry | Error alert + retry |
+
+**Accessibility:**
+- List: `role="listbox"` or semantic `<ul>` with `aria-current="true"` on selected
+- Detail: `<article>` with heading matching selected item
+- Mobile navigation: announce panel changes via live region
+- Keyboard: arrow keys navigate list, Enter opens detail, Escape returns to list (mobile)
diff --git a/skills/scd-uiux/data/tokens/blur.json b/skills/scd-uiux/data/tokens/blur.json
new file mode 100644
index 0000000..2603123
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/blur.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Blur radius scale for backdrop/frosted-glass effects and overlays. Use restraint: glass is a once-per-view effect (see taste/design-taste.md).",
+
+  "none": {
+    "$type": "dimension",
+    "$value": "0px"
+  },
+  "sm": {
+    "$type": "dimension",
+    "$value": "4px",
+    "$description": "Subtle frost: small popovers, tags over imagery"
+  },
+  "md": {
+    "$type": "dimension",
+    "$value": "8px",
+    "$description": "Default glass: cards, sticky headers over content"
+  },
+  "lg": {
+    "$type": "dimension",
+    "$value": "16px",
+    "$description": "Strong frost: modal backdrops, navigation overlays"
+  },
+  "xl": {
+    "$type": "dimension",
+    "$value": "24px",
+    "$description": "Heavy frost: full-screen scrims, immersive overlays"
+  }
+}
diff --git a/skills/scd-uiux/data/tokens/borders.json b/skills/scd-uiux/data/tokens/borders.json
new file mode 100644
index 0000000..cb4bfe8
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/borders.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Border radius and width tokens. Radii follow a geometric scale; widths are kept minimal.",
+
+  "radius": {
+    "$description": "Geometric radius scale",
+    "none": { "$type": "dimension", "$value": "0px" },
+    "sm":   { "$type": "dimension", "$value": "4px" },
+    "md":   { "$type": "dimension", "$value": "6px" },
+    "lg":   { "$type": "dimension", "$value": "8px" },
+    "xl":   { "$type": "dimension", "$value": "12px" },
+    "2xl":  { "$type": "dimension", "$value": "16px" },
+    "3xl":  { "$type": "dimension", "$value": "24px" },
+    "full": { "$type": "dimension", "$value": "9999px" }
+  },
+
+  "radius-semantic": {
+    "$description": "Component-scoped radius aliases",
+    "button":    { "$type": "dimension", "$value": "{radius.md}",   "$description": "6px: consistent button rounding" },
+    "input":     { "$type": "dimension", "$value": "{radius.md}",   "$description": "6px: match button radius" },
+    "card":      { "$type": "dimension", "$value": "{radius.lg}",   "$description": "8px: cards and containers" },
+    "modal":     { "$type": "dimension", "$value": "{radius.xl}",   "$description": "12px: elevated overlays" },
+    "badge":     { "$type": "dimension", "$value": "{radius.full}", "$description": "Pill shape" },
+    "avatar":    { "$type": "dimension", "$value": "{radius.full}", "$description": "Circular" },
+    "tooltip":   { "$type": "dimension", "$value": "{radius.md}" },
+    "dropdown":  { "$type": "dimension", "$value": "{radius.lg}" },
+    "checkbox":  { "$type": "dimension", "$value": "{radius.sm}",   "$description": "4px: subtle rounding" },
+    "toggle":    { "$type": "dimension", "$value": "{radius.full}", "$description": "Pill track" },
+    "image":     { "$type": "dimension", "$value": "{radius.lg}" }
+  },
+
+  "width": {
+    "$description": "Border width scale",
+    "none":    { "$type": "dimension", "$value": "0px" },
+    "thin":    { "$type": "dimension", "$value": "1px",  "$description": "Default border: cards, inputs, dividers" },
+    "medium":  { "$type": "dimension", "$value": "2px",  "$description": "Emphasis: focus rings, active tabs" },
+    "thick":   { "$type": "dimension", "$value": "4px",  "$description": "Heavy emphasis: sidebar indicator, branded borders" }
+  },
+
+  "style": {
+    "default": {
+      "$type": "border",
+      "$value": {
+        "width": "{width.thin}",
+        "style": "solid",
+        "color": "{../colors.semantic.border.default}"
+      },
+      "$description": "1px solid gray-200: standard separator"
+    },
+    "strong": {
+      "$type": "border",
+      "$value": {
+        "width": "{width.thin}",
+        "style": "solid",
+        "color": "{../colors.semantic.border.strong}"
+      }
+    },
+    "focus": {
+      "$type": "border",
+      "$value": {
+        "width": "{width.medium}",
+        "style": "solid",
+        "color": "{../colors.semantic.border.focus}"
+      },
+      "$description": "2px solid blue-500: focus visible border"
+    },
+    "error": {
+      "$type": "border",
+      "$value": {
+        "width": "{width.medium}",
+        "style": "solid",
+        "color": "{../colors.semantic.border.error}"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/skills/scd-uiux/data/tokens/breakpoints.json b/skills/scd-uiux/data/tokens/breakpoints.json
new file mode 100644
index 0000000..034d30c
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/breakpoints.json
@@ -0,0 +1,81 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Mobile-first responsive breakpoints. Write styles for mobile first, then layer on min-width queries. Container max-widths prevent content from stretching too wide on large screens.",
+
+  "breakpoint": {
+    "sm": {
+      "$type": "dimension",
+      "$value": "640px",
+      "$description": "Large phones / landscape: @media (min-width: 640px)"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "768px",
+      "$description": "Tablets: @media (min-width: 768px)"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "1024px",
+      "$description": "Small laptops: @media (min-width: 1024px)"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "1280px",
+      "$description": "Desktops: @media (min-width: 1280px)"
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": "1536px",
+      "$description": "Large desktops: @media (min-width: 1536px)"
+    }
+  },
+
+  "container": {
+    "$description": "Max-width constraints for centered content containers",
+    "sm":   { "$type": "dimension", "$value": "640px" },
+    "md":   { "$type": "dimension", "$value": "768px" },
+    "lg":   { "$type": "dimension", "$value": "1024px" },
+    "xl":   { "$type": "dimension", "$value": "1280px" },
+    "2xl":  { "$type": "dimension", "$value": "1400px", "$description": "Slightly narrower than breakpoint for breathing room" },
+    "prose": { "$type": "dimension", "$value": "65ch", "$description": "Optimal reading width for long-form text" }
+  },
+
+  "grid": {
+    "$description": "Grid column defaults per breakpoint",
+    "columns": {
+      "mobile":  { "$type": "number", "$value": 4, "$description": "< 640px" },
+      "tablet":  { "$type": "number", "$value": 8, "$description": "640px to 1023px" },
+      "desktop": { "$type": "number", "$value": 12, "$description": ">= 1024px" }
+    },
+    "gutter": {
+      "mobile":  { "$type": "dimension", "$value": "16px" },
+      "tablet":  { "$type": "dimension", "$value": "24px" },
+      "desktop": { "$type": "dimension", "$value": "24px" }
+    },
+    "margin": {
+      "mobile":  { "$type": "dimension", "$value": "16px" },
+      "tablet":  { "$type": "dimension", "$value": "32px" },
+      "desktop": { "$type": "dimension", "$value": "auto", "$description": "Centered with max-width" }
+    }
+  },
+
+  "sidebar": {
+    "$description": "Common sidebar dimensions",
+    "collapsed": { "$type": "dimension", "$value": "64px" },
+    "default":   { "$type": "dimension", "$value": "256px" },
+    "wide":      { "$type": "dimension", "$value": "320px" }
+  },
+
+  "z-index": {
+    "$description": "Layering scale: avoids z-index wars",
+    "base":       { "$type": "number", "$value": 0 },
+    "dropdown":   { "$type": "number", "$value": 10 },
+    "sticky":     { "$type": "number", "$value": 20 },
+    "fixed":      { "$type": "number", "$value": 30 },
+    "overlay":    { "$type": "number", "$value": 40 },
+    "modal":      { "$type": "number", "$value": 50 },
+    "popover":    { "$type": "number", "$value": 60 },
+    "toast":      { "$type": "number", "$value": 70 },
+    "tooltip":    { "$type": "number", "$value": 80 }
+  }
+}
\ No newline at end of file
diff --git a/skills/scd-uiux/data/tokens/colors.json b/skills/scd-uiux/data/tokens/colors.json
new file mode 100644
index 0000000..e7df667
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/colors.json
@@ -0,0 +1,246 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "3-tier color token architecture: Primitive → Semantic → Component. Generated in OKLCH for perceptual uniformity. All semantic pairings meet WCAG 2.2 AA contrast (4.5:1 text, 3:1 UI).",
+
+  "primitive": {
+    "$description": "Raw color palette. Never reference directly in components",
+
+    "gray": {
+      "50":  { "$type": "color", "$value": "#f9fafb" },
+      "100": { "$type": "color", "$value": "#f3f4f6" },
+      "200": { "$type": "color", "$value": "#e5e7eb" },
+      "300": { "$type": "color", "$value": "#d1d5db" },
+      "400": { "$type": "color", "$value": "#9ca3af" },
+      "500": { "$type": "color", "$value": "#6b7280" },
+      "600": { "$type": "color", "$value": "#4b5563" },
+      "700": { "$type": "color", "$value": "#374151" },
+      "800": { "$type": "color", "$value": "#1f2937" },
+      "900": { "$type": "color", "$value": "#111827" },
+      "950": { "$type": "color", "$value": "#030712" }
+    },
+    "blue": {
+      "50":  { "$type": "color", "$value": "#eff6ff" },
+      "100": { "$type": "color", "$value": "#dbeafe" },
+      "200": { "$type": "color", "$value": "#bfdbfe" },
+      "300": { "$type": "color", "$value": "#93c5fd" },
+      "400": { "$type": "color", "$value": "#60a5fa" },
+      "500": { "$type": "color", "$value": "#3b82f6" },
+      "600": { "$type": "color", "$value": "#2563eb" },
+      "700": { "$type": "color", "$value": "#1d4ed8" },
+      "800": { "$type": "color", "$value": "#1e40af" },
+      "900": { "$type": "color", "$value": "#1e3a8a" },
+      "950": { "$type": "color", "$value": "#172554" }
+    },
+    "green": {
+      "50":  { "$type": "color", "$value": "#f0fdf4" },
+      "100": { "$type": "color", "$value": "#dcfce7" },
+      "200": { "$type": "color", "$value": "#bbf7d0" },
+      "300": { "$type": "color", "$value": "#86efac" },
+      "400": { "$type": "color", "$value": "#4ade80" },
+      "500": { "$type": "color", "$value": "#22c55e" },
+      "600": { "$type": "color", "$value": "#16a34a" },
+      "700": { "$type": "color", "$value": "#15803d" },
+      "800": { "$type": "color", "$value": "#166534" },
+      "900": { "$type": "color", "$value": "#14532d" },
+      "950": { "$type": "color", "$value": "#052e16" }
+    },
+    "red": {
+      "50":  { "$type": "color", "$value": "#fef2f2" },
+      "100": { "$type": "color", "$value": "#fee2e2" },
+      "200": { "$type": "color", "$value": "#fecaca" },
+      "300": { "$type": "color", "$value": "#fca5a5" },
+      "400": { "$type": "color", "$value": "#f87171" },
+      "500": { "$type": "color", "$value": "#ef4444" },
+      "600": { "$type": "color", "$value": "#dc2626" },
+      "700": { "$type": "color", "$value": "#b91c1c" },
+      "800": { "$type": "color", "$value": "#991b1b" },
+      "900": { "$type": "color", "$value": "#7f1d1d" },
+      "950": { "$type": "color", "$value": "#450a0a" }
+    },
+    "amber": {
+      "50":  { "$type": "color", "$value": "#fffbeb" },
+      "100": { "$type": "color", "$value": "#fef3c7" },
+      "200": { "$type": "color", "$value": "#fde68a" },
+      "300": { "$type": "color", "$value": "#fcd34d" },
+      "400": { "$type": "color", "$value": "#fbbf24" },
+      "500": { "$type": "color", "$value": "#f59e0b" },
+      "600": { "$type": "color", "$value": "#d97706" },
+      "700": { "$type": "color", "$value": "#b45309" },
+      "800": { "$type": "color", "$value": "#92400e" },
+      "900": { "$type": "color", "$value": "#78350f" },
+      "950": { "$type": "color", "$value": "#451a03" }
+    },
+    "purple": {
+      "50":  { "$type": "color", "$value": "#faf5ff" },
+      "100": { "$type": "color", "$value": "#f3e8ff" },
+      "200": { "$type": "color", "$value": "#e9d5ff" },
+      "300": { "$type": "color", "$value": "#d8b4fe" },
+      "400": { "$type": "color", "$value": "#c084fc" },
+      "500": { "$type": "color", "$value": "#a855f7" },
+      "600": { "$type": "color", "$value": "#9333ea" },
+      "700": { "$type": "color", "$value": "#7e22ce" },
+      "800": { "$type": "color", "$value": "#6b21a8" },
+      "900": { "$type": "color", "$value": "#581c87" },
+      "950": { "$type": "color", "$value": "#3b0764" }
+    },
+    "white": { "$type": "color", "$value": "#ffffff" },
+    "black": { "$type": "color", "$value": "#000000" }
+  },
+
+  "semantic": {
+    "$description": "Purpose-based tokens. Use these in designs and layouts",
+
+    "action": {
+      "primary":           { "$type": "color", "$value": "{primitive.blue.600}" },
+      "primary-hover":     { "$type": "color", "$value": "{primitive.blue.700}" },
+      "primary-active":    { "$type": "color", "$value": "{primitive.blue.800}" },
+      "secondary":         { "$type": "color", "$value": "{primitive.gray.100}" },
+      "secondary-hover":   { "$type": "color", "$value": "{primitive.gray.200}" },
+      "secondary-active":  { "$type": "color", "$value": "{primitive.gray.300}" },
+      "destructive":       { "$type": "color", "$value": "{primitive.red.600}" },
+      "destructive-hover": { "$type": "color", "$value": "{primitive.red.700}" }
+    },
+
+    "feedback": {
+      "success-bg":      { "$type": "color", "$value": "{primitive.green.50}" },
+      "success-text":    { "$type": "color", "$value": "{primitive.green.800}" },
+      "success-border":  { "$type": "color", "$value": "{primitive.green.300}" },
+      "success-icon":    { "$type": "color", "$value": "{primitive.green.600}" },
+      "warning-bg":      { "$type": "color", "$value": "{primitive.amber.50}" },
+      "warning-text":    { "$type": "color", "$value": "{primitive.amber.800}" },
+      "warning-border":  { "$type": "color", "$value": "{primitive.amber.300}" },
+      "warning-icon":    { "$type": "color", "$value": "{primitive.amber.600}" },
+      "error-bg":        { "$type": "color", "$value": "{primitive.red.50}" },
+      "error-text":      { "$type": "color", "$value": "{primitive.red.800}" },
+      "error-border":    { "$type": "color", "$value": "{primitive.red.300}" },
+      "error-icon":      { "$type": "color", "$value": "{primitive.red.600}" },
+      "info-bg":         { "$type": "color", "$value": "{primitive.blue.50}" },
+      "info-text":       { "$type": "color", "$value": "{primitive.blue.800}" },
+      "info-border":     { "$type": "color", "$value": "{primitive.blue.300}" },
+      "info-icon":       { "$type": "color", "$value": "{primitive.blue.600}" }
+    },
+
+    "text": {
+      "primary":     { "$type": "color", "$value": "{primitive.gray.900}", "$description": "Main body text: 15.4:1 on white" },
+      "secondary":   { "$type": "color", "$value": "{primitive.gray.600}", "$description": "Supporting text: 5.7:1 on white" },
+      "tertiary":    { "$type": "color", "$value": "{primitive.gray.400}", "$description": "Placeholder text: use only as hint, not essential info" },
+      "disabled":    { "$type": "color", "$value": "{primitive.gray.300}" },
+      "on-action":   { "$type": "color", "$value": "{primitive.white}", "$description": "Text on primary action bg: 8.6:1 on blue-600" },
+      "on-dark":     { "$type": "color", "$value": "{primitive.gray.50}" },
+      "link":        { "$type": "color", "$value": "{primitive.blue.600}" },
+      "link-hover":  { "$type": "color", "$value": "{primitive.blue.800}" }
+    },
+
+    "surface": {
+      "page":        { "$type": "color", "$value": "{primitive.white}" },
+      "card":        { "$type": "color", "$value": "{primitive.white}" },
+      "raised":      { "$type": "color", "$value": "{primitive.white}" },
+      "sunken":      { "$type": "color", "$value": "{primitive.gray.50}" },
+      "overlay":     { "$type": "color", "$value": "rgba(0, 0, 0, 0.5)", "$description": "Modal/drawer backdrop" },
+      "disabled":    { "$type": "color", "$value": "{primitive.gray.100}" }
+    },
+
+    "border": {
+      "default":     { "$type": "color", "$value": "{primitive.gray.200}", "$description": "Decorative dividers/card edges (sub-3:1 by design)" },
+      "strong":      { "$type": "color", "$value": "{primitive.gray.500}", "$description": "Essential control boundary: 4.8:1 on page, meets WCAG 1.4.11 (3:1)" },
+      "focus":       { "$type": "color", "$value": "{primitive.blue.500}" },
+      "error":       { "$type": "color", "$value": "{primitive.red.500}" },
+      "disabled":    { "$type": "color", "$value": "{primitive.gray.200}" }
+    },
+
+    "interactive": {
+      "hover-overlay":  { "$type": "color", "$value": "rgba(0, 0, 0, 0.04)" },
+      "active-overlay": { "$type": "color", "$value": "rgba(0, 0, 0, 0.08)" },
+      "selected-bg":    { "$type": "color", "$value": "{primitive.blue.50}" },
+      "selected-border":{ "$type": "color", "$value": "{primitive.blue.200}" },
+      "focus-ring":     { "$type": "color", "$value": "{primitive.blue.500}", "$description": "2px outline offset 2px" }
+    }
+  },
+
+  "component": {
+    "$description": "Component-scoped tokens. Use in component implementations",
+
+    "button": {
+      "primary-bg":           { "$type": "color", "$value": "{semantic.action.primary}" },
+      "primary-bg-hover":     { "$type": "color", "$value": "{semantic.action.primary-hover}" },
+      "primary-bg-active":    { "$type": "color", "$value": "{semantic.action.primary-active}" },
+      "primary-text":         { "$type": "color", "$value": "{semantic.text.on-action}" },
+      "secondary-bg":         { "$type": "color", "$value": "{semantic.action.secondary}" },
+      "secondary-bg-hover":   { "$type": "color", "$value": "{semantic.action.secondary-hover}" },
+      "secondary-text":       { "$type": "color", "$value": "{semantic.text.primary}" },
+      "ghost-bg":             { "$type": "color", "$value": "transparent" },
+      "ghost-bg-hover":       { "$type": "color", "$value": "{semantic.interactive.hover-overlay}" },
+      "ghost-text":           { "$type": "color", "$value": "{semantic.text.primary}" },
+      "destructive-bg":       { "$type": "color", "$value": "{semantic.action.destructive}" },
+      "destructive-bg-hover": { "$type": "color", "$value": "{semantic.action.destructive-hover}" },
+      "destructive-text":     { "$type": "color", "$value": "{semantic.text.on-action}" },
+      "disabled-bg":          { "$type": "color", "$value": "{semantic.surface.disabled}" },
+      "disabled-text":        { "$type": "color", "$value": "{semantic.text.disabled}" }
+    },
+
+    "input": {
+      "bg":            { "$type": "color", "$value": "{semantic.surface.card}" },
+      "bg-disabled":   { "$type": "color", "$value": "{semantic.surface.disabled}" },
+      "border":        { "$type": "color", "$value": "{semantic.border.default}" },
+      "border-hover":  { "$type": "color", "$value": "{semantic.border.strong}" },
+      "border-focus":  { "$type": "color", "$value": "{semantic.border.focus}" },
+      "border-error":  { "$type": "color", "$value": "{semantic.border.error}" },
+      "text":          { "$type": "color", "$value": "{semantic.text.primary}" },
+      "placeholder":   { "$type": "color", "$value": "{semantic.text.tertiary}" }
+    },
+
+    "card": {
+      "bg":     { "$type": "color", "$value": "{semantic.surface.card}" },
+      "border": { "$type": "color", "$value": "{semantic.border.default}" }
+    },
+
+    "badge": {
+      "neutral-bg":   { "$type": "color", "$value": "{primitive.gray.100}" },
+      "neutral-text":  { "$type": "color", "$value": "{primitive.gray.700}" },
+      "primary-bg":   { "$type": "color", "$value": "{primitive.blue.100}" },
+      "primary-text":  { "$type": "color", "$value": "{primitive.blue.700}" },
+      "success-bg":   { "$type": "color", "$value": "{primitive.green.100}" },
+      "success-text":  { "$type": "color", "$value": "{primitive.green.700}" },
+      "warning-bg":   { "$type": "color", "$value": "{primitive.amber.100}" },
+      "warning-text":  { "$type": "color", "$value": "{primitive.amber.700}" },
+      "error-bg":     { "$type": "color", "$value": "{primitive.red.100}" },
+      "error-text":    { "$type": "color", "$value": "{primitive.red.700}" }
+    },
+
+    "avatar": {
+      "bg":     { "$type": "color", "$value": "{primitive.gray.200}" },
+      "text":   { "$type": "color", "$value": "{primitive.gray.700}" },
+      "border": { "$type": "color", "$value": "{primitive.white}" }
+    }
+  },
+
+  "dark": {
+    "$description": "Dark mode semantic overrides, swapped at :root[data-theme='dark']",
+
+    "text": {
+      "primary":   { "$type": "color", "$value": "{primitive.gray.50}" },
+      "secondary": { "$type": "color", "$value": "{primitive.gray.400}" },
+      "tertiary":  { "$type": "color", "$value": "{primitive.gray.500}" },
+      "disabled":  { "$type": "color", "$value": "{primitive.gray.600}" },
+      "on-action": { "$type": "color", "$value": "{primitive.white}" },
+      "link":      { "$type": "color", "$value": "{primitive.blue.400}", "$description": "Lighter in dark for ≥4.5:1 on dark surfaces (blue.600 fails)" },
+      "link-hover":{ "$type": "color", "$value": "{primitive.blue.300}" }
+    },
+    "surface": {
+      "page":   { "$type": "color", "$value": "{primitive.gray.950}" },
+      "card":   { "$type": "color", "$value": "{primitive.gray.900}" },
+      "raised": { "$type": "color", "$value": "{primitive.gray.800}" },
+      "sunken": { "$type": "color", "$value": "{primitive.black}" }
+    },
+    "border": {
+      "default": { "$type": "color", "$value": "{primitive.gray.800}", "$description": "Decorative (sub-3:1 by design)" },
+      "strong":  { "$type": "color", "$value": "{primitive.gray.500}", "$description": "Essential control boundary: 4.2:1 on dark page (meets 3:1)" }
+    },
+    "action": {
+      "primary":       { "$type": "color", "$value": "{primitive.blue.600}", "$description": "blue.600 keeps white on-action ≥4.5:1 on dark (blue.500 = 3.68 fails)" },
+      "primary-hover": { "$type": "color", "$value": "{primitive.blue.700}", "$description": "Darkens on hover so white text stays ≥4.5:1" },
+      "secondary":     { "$type": "color", "$value": "{primitive.gray.800}" },
+      "secondary-hover":{ "$type": "color", "$value": "{primitive.gray.700}" }
+    }
+  }
+}
\ No newline at end of file
diff --git a/skills/scd-uiux/data/tokens/data-viz.json b/skills/scd-uiux/data/tokens/data-viz.json
new file mode 100644
index 0000000..86a9af7
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/data-viz.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Data-visualization color + axis tokens. Categorical palette is ordered for maximum perceptual separation and color-vision-deficiency safety (Okabe-Ito-inspired). Use these for charts, never the brand action/feedback colors directly. Charts are graphical objects: meaningful strokes meet 3:1, and series must also be distinguished by shape/label/pattern, not hue alone.",
+
+  "categorical": {
+    "$description": "Qualitative series colors. Assign in order; cap at 8. Beyond that, group or re-encode.",
+    "1": { "$type": "color", "$value": "#2563EB", "$description": "Blue" },
+    "2": { "$type": "color", "$value": "#E8710A", "$description": "Orange" },
+    "3": { "$type": "color", "$value": "#0E9F6E", "$description": "Green" },
+    "4": { "$type": "color", "$value": "#D81B7A", "$description": "Magenta" },
+    "5": { "$type": "color", "$value": "#7C3AED", "$description": "Purple" },
+    "6": { "$type": "color", "$value": "#0891B2", "$description": "Cyan" },
+    "7": { "$type": "color", "$value": "#B45309", "$description": "Brown/amber" },
+    "8": { "$type": "color", "$value": "#64748B", "$description": "Slate (neutral series)" }
+  },
+
+  "sequential": {
+    "$description": "Single-hue ramp for ordered/continuous data (low → high). 5 stops; interpolate for more.",
+    "100": { "$type": "color", "$value": "#EFF6FF" },
+    "300": { "$type": "color", "$value": "#93C5FD" },
+    "500": { "$type": "color", "$value": "#3B82F6" },
+    "700": { "$type": "color", "$value": "#1D4ED8" },
+    "900": { "$type": "color", "$value": "#172554" }
+  },
+
+  "diverging": {
+    "$description": "Two-hue ramp around a neutral midpoint (e.g. below/above target, negative/positive change).",
+    "negative-strong": { "$type": "color", "$value": "#B91C1C" },
+    "negative": { "$type": "color", "$value": "#F87171" },
+    "neutral": { "$type": "color", "$value": "#E5E7EB" },
+    "positive": { "$type": "color", "$value": "#4ADE80" },
+    "positive-strong": { "$type": "color", "$value": "#15803D" }
+  },
+
+  "semantic": {
+    "$description": "Outcome-coded series (gains vs. losses). Distinct from feedback tokens so charts theme independently.",
+    "positive": { "$type": "color", "$value": "{dataviz.diverging.positive-strong}" },
+    "negative": { "$type": "color", "$value": "{dataviz.diverging.negative-strong}" },
+    "neutral": { "$type": "color", "$value": "#64748B" }
+  },
+
+  "axis": {
+    "$description": "Axis lines, ticks, and labels.",
+    "line": { "$type": "color", "$value": "{semantic.border.strong}", "$description": "Baseline/zero axis" },
+    "tick": { "$type": "color", "$value": "{semantic.border.default}" },
+    "label": { "$type": "color", "$value": "{semantic.text.secondary}", "$description": "Meets 4.5:1, since axis labels are essential text" }
+  },
+
+  "grid": {
+    "$description": "Non-essential gridlines: low contrast is acceptable (decorative reference).",
+    "line": { "$type": "color", "$value": "{semantic.border.default}" },
+    "line-subtle": { "$type": "color", "$value": "{primitive.gray.100}" }
+  },
+
+  "surface": {
+    "tooltip-bg": { "$type": "color", "$value": "{primitive.gray.900}", "$description": "Dark tooltip surface (inverse of page)" },
+    "tooltip-text": { "$type": "color", "$value": "{semantic.text.on-dark}" },
+    "plot-bg": { "$type": "color", "$value": "{semantic.surface.page}" }
+  }
+}
diff --git a/skills/scd-uiux/data/tokens/gradients.json b/skills/scd-uiux/data/tokens/gradients.json
new file mode 100644
index 0000000..efd8a19
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/gradients.json
@@ -0,0 +1,71 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Semantic gradient presets. Use sparingly: one signature gradient per view (see taste/design-taste.md). Stops reference primitive colors; positions are 0 to 1.",
+
+  "brand": {
+    "primary": {
+      "$type": "gradient",
+      "$value": [
+        { "color": "#4f46e5", "position": 0 },
+        { "color": "#7c3aed", "position": 1 }
+      ],
+      "$description": "Indigo → violet. Hero CTAs, brand surfaces."
+    },
+    "primary-soft": {
+      "$type": "gradient",
+      "$value": [
+        { "color": "#6366f1", "position": 0 },
+        { "color": "#8b5cf6", "position": 1 }
+      ],
+      "$description": "Lighter brand wash for large backgrounds"
+    }
+  },
+
+  "surface": {
+    "subtle": {
+      "$type": "gradient",
+      "$value": [
+        { "color": "#0d0d15", "position": 0 },
+        { "color": "#0a0a12", "position": 1 }
+      ],
+      "$description": "Near-flat dark surface depth: barely perceptible"
+    },
+    "scrim": {
+      "$type": "gradient",
+      "$value": [
+        { "color": "rgba(0,0,0,0)", "position": 0 },
+        { "color": "rgba(0,0,0,0.6)", "position": 1 }
+      ],
+      "$description": "Image overlay for text legibility (bottom-up)"
+    }
+  },
+
+  "feedback": {
+    "success": {
+      "$type": "gradient",
+      "$value": [
+        { "color": "#16a34a", "position": 0 },
+        { "color": "#22c55e", "position": 1 }
+      ]
+    },
+    "error": {
+      "$type": "gradient",
+      "$value": [
+        { "color": "#dc2626", "position": 0 },
+        { "color": "#ef4444", "position": 1 }
+      ]
+    }
+  },
+
+  "accent": {
+    "aurora": {
+      "$type": "gradient",
+      "$value": [
+        { "color": "#3b82f6", "position": 0 },
+        { "color": "#8b5cf6", "position": 0.5 },
+        { "color": "#ec4899", "position": 1 }
+      ],
+      "$description": "Multi-stop accent: decorative only, never behind body text"
+    }
+  }
+}
diff --git a/skills/scd-uiux/data/tokens/motion.json b/skills/scd-uiux/data/tokens/motion.json
new file mode 100644
index 0000000..b48afc0
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/motion.json
@@ -0,0 +1,136 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Motion system: durations, easings, and composite transition presets. UI motion is 100 to 300ms, never exceeds 500ms. Every animation guides attention, shows connection, or provides feedback. Always paired with a prefers-reduced-motion fallback.",
+
+  "duration": {
+    "instant": {
+      "$type": "duration",
+      "$value": "0ms",
+      "$description": "No animation: reduced-motion fallback, or instant state swaps"
+    },
+    "fast": {
+      "$type": "duration",
+      "$value": "100ms",
+      "$description": "Micro-interactions: hover, focus, small color/opacity changes"
+    },
+    "base": {
+      "$type": "duration",
+      "$value": "200ms",
+      "$description": "Default UI transition: most state changes, toggles, dropdowns"
+    },
+    "moderate": {
+      "$type": "duration",
+      "$value": "300ms",
+      "$description": "Larger transitions: modals, drawers, accordions, page sections"
+    },
+    "slow": {
+      "$type": "duration",
+      "$value": "500ms",
+      "$description": "Maximum allowed: full-screen transitions, large reveals. Never exceed this."
+    }
+  },
+
+  "easing": {
+    "linear": {
+      "$type": "cubicBezier",
+      "$value": [0, 0, 1, 1],
+      "$description": "Constant speed: only for continuous loops (spinners, progress)"
+    },
+    "ease-out": {
+      "$type": "cubicBezier",
+      "$value": [0, 0, 0.2, 1],
+      "$description": "Decelerate: for ENTRANCES. Elements arrive fast and settle. The default for most UI."
+    },
+    "ease-in": {
+      "$type": "cubicBezier",
+      "$value": [0.4, 0, 1, 1],
+      "$description": "Accelerate: for EXITS. Elements leave by speeding away."
+    },
+    "ease-in-out": {
+      "$type": "cubicBezier",
+      "$value": [0.4, 0, 0.2, 1],
+      "$description": "Accelerate then decelerate: for STATE CHANGES that move in place (toggles, reorders)"
+    },
+    "spring": {
+      "$type": "cubicBezier",
+      "$value": [0.34, 1.56, 0.64, 1],
+      "$description": "Overshoot: playful emphasis (success checkmarks, badges). Use sparingly."
+    }
+  },
+
+  "transition": {
+    "$description": "Composite presets: duration + easing pairs ready to apply. Reference these in components.",
+    "micro": {
+      "$type": "transition",
+      "$value": { "duration": "{duration.fast}", "timingFunction": "{easing.ease-out}", "delay": "0ms" },
+      "$description": "Hover/focus on atoms: buttons, links, inputs"
+    },
+    "default": {
+      "$type": "transition",
+      "$value": { "duration": "{duration.base}", "timingFunction": "{easing.ease-out}", "delay": "0ms" },
+      "$description": "General-purpose state change: the safe default"
+    },
+    "enter": {
+      "$type": "transition",
+      "$value": { "duration": "{duration.moderate}", "timingFunction": "{easing.ease-out}", "delay": "0ms" },
+      "$description": "Element entering the screen: modal open, toast appear, menu reveal"
+    },
+    "exit": {
+      "$type": "transition",
+      "$value": { "duration": "{duration.base}", "timingFunction": "{easing.ease-in}", "delay": "0ms" },
+      "$description": "Element leaving the screen: exits are faster than entrances"
+    },
+    "emphasis": {
+      "$type": "transition",
+      "$value": { "duration": "{duration.moderate}", "timingFunction": "{easing.spring}", "delay": "0ms" },
+      "$description": "Celebratory feedback: success states, confirmations"
+    }
+  },
+
+  "keyframes": {
+    "$description": "Named keyframe recipes. Property/from/to are documented for implementers; encode as CSS @keyframes or framework equivalents.",
+    "fade-in": {
+      "$type": "other",
+      "$value": { "property": "opacity", "from": "0", "to": "1" },
+      "$description": "Reduced-motion-safe substitute for any directional entrance"
+    },
+    "fade-out": {
+      "$type": "other",
+      "$value": { "property": "opacity", "from": "1", "to": "0" }
+    },
+    "slide-up": {
+      "$type": "other",
+      "$value": { "property": "transform, opacity", "from": "translateY(8px), 0", "to": "translateY(0), 1" },
+      "$description": "Subtle rise on entrance: popovers, toasts. Pair with fade."
+    },
+    "scale-in": {
+      "$type": "other",
+      "$value": { "property": "transform, opacity", "from": "scale(0.96), 0", "to": "scale(1), 1" },
+      "$description": "Modal/dialog entrance: grows from 96% to 100%"
+    },
+    "spin": {
+      "$type": "other",
+      "$value": { "property": "transform", "from": "rotate(0deg)", "to": "rotate(360deg)" },
+      "$description": "Loading spinner: use with duration 600 to 1000ms and linear easing"
+    },
+    "pulse": {
+      "$type": "other",
+      "$value": { "property": "opacity", "from": "1", "to": "0.5" },
+      "$description": "Skeleton loading shimmer: alternate, infinite"
+    }
+  },
+
+  "reducedMotion": {
+    "$description": "When prefers-reduced-motion is set: replace movement with opacity-only fades or instant swaps. Never remove feedback entirely: keep the state change, drop the travel.",
+    "duration": {
+      "$type": "duration",
+      "$value": "0ms",
+      "$description": "Collapse all motion durations to instant, OR cap at duration.fast for opacity-only fades"
+    },
+    "strategy": {
+      "$type": "other",
+      "$value": "Disable transform/position animation; retain opacity fade ≤100ms; keep all non-motion feedback (color, text, ARIA live regions)",
+      "$description": "Honors WCAG 2.3.3 Animation from Interactions"
+    }
+  }
+}
diff --git a/skills/scd-uiux/data/tokens/opacity.json b/skills/scd-uiux/data/tokens/opacity.json
new file mode 100644
index 0000000..37f9549
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/opacity.json
@@ -0,0 +1,45 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Semantic alpha scale. Use these instead of hardcoding rgba() alpha in components.",
+
+  "disabled": {
+    "$type": "number",
+    "$value": 0.5,
+    "$description": "Disabled control opacity (paired with pointer-events: none)"
+  },
+  "muted": {
+    "$type": "number",
+    "$value": 0.6,
+    "$description": "De-emphasized but still legible content"
+  },
+  "subtle": {
+    "$type": "number",
+    "$value": 0.08,
+    "$description": "Hover state-layer overlay (e.g. Material-style)"
+  },
+  "pressed": {
+    "$type": "number",
+    "$value": 0.12,
+    "$description": "Pressed/active state-layer overlay"
+  },
+  "selected": {
+    "$type": "number",
+    "$value": 0.16,
+    "$description": "Selected state-layer overlay"
+  },
+  "focus": {
+    "$type": "number",
+    "$value": 0.24,
+    "$description": "Focus state-layer overlay (in addition to focus ring)"
+  },
+  "scrim": {
+    "$type": "number",
+    "$value": 0.6,
+    "$description": "Modal/dialog backdrop dim"
+  },
+  "ghost": {
+    "$type": "number",
+    "$value": 0.04,
+    "$description": "Barely-there surface tint (ghost buttons, zebra rows)"
+  }
+}
diff --git a/skills/scd-uiux/data/tokens/shadows.json b/skills/scd-uiux/data/tokens/shadows.json
new file mode 100644
index 0000000..957b442
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/shadows.json
@@ -0,0 +1,100 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "5-level elevation system. Higher elevation = more prominence. Uses layered shadows for realism.",
+
+  "elevation": {
+    "none": {
+      "$type": "shadow",
+      "$value": "none",
+      "$description": "Level 0: flat, no elevation"
+    },
+    "sm": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px", "color": "rgba(0, 0, 0, 0.05)" }
+      ],
+      "$description": "Level 1: subtle lift (cards at rest)"
+    },
+    "md": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "1px", "blur": "3px", "spread": "0px", "color": "rgba(0, 0, 0, 0.1)" },
+        { "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "-1px", "color": "rgba(0, 0, 0, 0.1)" }
+      ],
+      "$description": "Level 2: default elevation (dropdowns, popovers)"
+    },
+    "lg": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "4px", "blur": "6px", "spread": "-1px", "color": "rgba(0, 0, 0, 0.1)" },
+        { "offsetX": "0px", "offsetY": "2px", "blur": "4px", "spread": "-2px", "color": "rgba(0, 0, 0, 0.1)" }
+      ],
+      "$description": "Level 3: raised (hover cards, sticky headers)"
+    },
+    "xl": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "10px", "blur": "15px", "spread": "-3px", "color": "rgba(0, 0, 0, 0.1)" },
+        { "offsetX": "0px", "offsetY": "4px", "blur": "6px", "spread": "-4px", "color": "rgba(0, 0, 0, 0.1)" }
+      ],
+      "$description": "Level 4: floating (modals, dialogs)"
+    },
+    "2xl": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "20px", "blur": "25px", "spread": "-5px", "color": "rgba(0, 0, 0, 0.1)" },
+        { "offsetX": "0px", "offsetY": "8px", "blur": "10px", "spread": "-6px", "color": "rgba(0, 0, 0, 0.1)" }
+      ],
+      "$description": "Level 5: highest prominence (toasts, notifications)"
+    }
+  },
+
+  "inner": {
+    "sm": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px", "color": "rgba(0, 0, 0, 0.06)", "inset": true }
+      ],
+      "$description": "Subtle inset: pressed buttons, input fields"
+    },
+    "md": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "2px", "blur": "4px", "spread": "0px", "color": "rgba(0, 0, 0, 0.08)", "inset": true }
+      ],
+      "$description": "Medium inset: sunken containers"
+    }
+  },
+
+  "colored": {
+    "$description": "Brand-colored shadows for emphasis. Use sparingly",
+    "primary": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "4px", "blur": "14px", "spread": "0px", "color": "rgba(37, 99, 235, 0.25)" }
+      ],
+      "$description": "Blue glow: primary CTA hover"
+    },
+    "success": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "4px", "blur": "14px", "spread": "0px", "color": "rgba(22, 163, 74, 0.25)" }
+      ]
+    },
+    "error": {
+      "$type": "shadow",
+      "$value": [
+        { "offsetX": "0px", "offsetY": "4px", "blur": "14px", "spread": "0px", "color": "rgba(220, 38, 38, 0.25)" }
+      ]
+    }
+  },
+
+  "focus-ring": {
+    "$type": "shadow",
+    "$value": [
+      { "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "2px", "color": "#ffffff" },
+      { "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "4px", "color": "#3b82f6" }
+    ],
+    "$description": "Double-ring focus indicator: 2px white + 2px blue. Visible on both light and dark backgrounds. Meets WCAG 2.4.7."
+  }
+}
\ No newline at end of file
diff --git a/skills/scd-uiux/data/tokens/sizing.json b/skills/scd-uiux/data/tokens/sizing.json
new file mode 100644
index 0000000..fa40eaf
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/sizing.json
@@ -0,0 +1,130 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Control sizing, icon sizing, and aspect ratios. Control heights drive Button/Input/Select consistency; all meet the 24px min target (44px recommended for primary touch).",
+  "control": {
+    "$description": "Interactive control height (Button, Input, Select, etc.)",
+    "xs": {
+      "$type": "dimension",
+      "$value": "24px",
+      "$description": "Min target size (WCAG 2.5.8) \u2014 dense tables, chips"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "32px",
+      "$description": "Compact controls"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "40px",
+      "$description": "Default control height"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "48px",
+      "$description": "Prominent / comfortable touch (recommended primary)"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "56px",
+      "$description": "Hero CTAs"
+    }
+  },
+  "icon": {
+    "$description": "Icon box sizes \u2014 keep stroke weight consistent across sizes",
+    "xs": {
+      "$type": "dimension",
+      "$value": "12px"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "16px",
+      "$description": "Default inline icon"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "20px"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "24px"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "32px"
+    }
+  },
+  "avatar": {
+    "sm": {
+      "$type": "dimension",
+      "$value": "24px"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "32px"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "40px"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "64px"
+    }
+  },
+  "aspectRatio": {
+    "$description": "Use the unitless ratio in CSS aspect-ratio / native equivalents",
+    "square": {
+      "$type": "number",
+      "$value": 1,
+      "$description": "1 / 1 \u2014 avatars, thumbnails"
+    },
+    "video": {
+      "$type": "string",
+      "$value": "16 / 9",
+      "$description": "Media embeds, hero video"
+    },
+    "portrait": {
+      "$type": "string",
+      "$value": "3 / 4",
+      "$description": "Cards, posters"
+    },
+    "wide": {
+      "$type": "string",
+      "$value": "21 / 9",
+      "$description": "Cinematic banners"
+    },
+    "golden": {
+      "$type": "string",
+      "$value": "1.618 / 1",
+      "$description": "Editorial feature blocks"
+    }
+  },
+  "screen": {
+    "$description": "Screen economy: the viewport is scarce and bright area costs battery. These are the ceilings a screen must stay under. Thresholds live here, not in the gate, so a project can raise one deliberately and the gate follows.",
+    "media-max-block": {
+      "$type": "dimension",
+      "$value": "60vh",
+      "$description": "An image, video or background-image block may not be taller than this share of the viewport. A hero that fills the screen shows the reader nothing they came for and costs the most battery on OLED."
+    },
+    "media-max-inline": {
+      "$type": "dimension",
+      "$value": "100%",
+      "$description": "Media never exceeds its container. Wider than the viewport is a bug, not a bleed."
+    },
+    "box-max-viewport-share": {
+      "$type": "number",
+      "$value": 0.35,
+      "$description": "A card-like box may cover at most this share of the viewport before it has to justify the space with content."
+    },
+    "box-min-content-density": {
+      "$type": "number",
+      "$value": 0.3,
+      "$description": "A box over the share above must fill at least this much of its own area with text, controls or media. Below both numbers it is a hollow box."
+    },
+    "image-bytes-budget": {
+      "$type": "number",
+      "$value": 500000,
+      "$description": "Total image bytes on one page. Prefer AVIF or WebP with srcset sized to the rendered width."
+    }
+  }
+}
diff --git a/skills/scd-uiux/data/tokens/spacing.json b/skills/scd-uiux/data/tokens/spacing.json
new file mode 100644
index 0000000..c8c7747
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/spacing.json
@@ -0,0 +1,78 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "4px base unit spacing scale. Use semantic tokens for layout; use scale tokens for component internals.",
+
+  "scale": {
+    "$description": "Raw spacing values: 4px base unit",
+    "0":   { "$type": "dimension", "$value": "0px" },
+    "0.5": { "$type": "dimension", "$value": "2px" },
+    "1":   { "$type": "dimension", "$value": "4px" },
+    "1.5": { "$type": "dimension", "$value": "6px" },
+    "2":   { "$type": "dimension", "$value": "8px" },
+    "2.5": { "$type": "dimension", "$value": "10px" },
+    "3":   { "$type": "dimension", "$value": "12px" },
+    "3.5": { "$type": "dimension", "$value": "14px" },
+    "4":   { "$type": "dimension", "$value": "16px" },
+    "5":   { "$type": "dimension", "$value": "20px" },
+    "6":   { "$type": "dimension", "$value": "24px" },
+    "7":   { "$type": "dimension", "$value": "28px" },
+    "8":   { "$type": "dimension", "$value": "32px" },
+    "9":   { "$type": "dimension", "$value": "36px" },
+    "10":  { "$type": "dimension", "$value": "40px" },
+    "11":  { "$type": "dimension", "$value": "44px" },
+    "12":  { "$type": "dimension", "$value": "48px" },
+    "14":  { "$type": "dimension", "$value": "56px" },
+    "16":  { "$type": "dimension", "$value": "64px" },
+    "20":  { "$type": "dimension", "$value": "80px" },
+    "24":  { "$type": "dimension", "$value": "96px" }
+  },
+
+  "semantic": {
+    "$description": "Purpose-based spacing aliases",
+
+    "page": {
+      "inline-padding":  { "$type": "dimension", "$value": "{scale.4}", "$description": "16px: page horizontal padding (mobile)" },
+      "inline-padding-lg": { "$type": "dimension", "$value": "{scale.8}", "$description": "32px: page horizontal padding (desktop)" },
+      "section-gap":     { "$type": "dimension", "$value": "{scale.16}", "$description": "64px: gap between page sections" },
+      "section-gap-sm":  { "$type": "dimension", "$value": "{scale.10}", "$description": "40px: gap between sub-sections" }
+    },
+
+    "card": {
+      "padding":      { "$type": "dimension", "$value": "{scale.6}", "$description": "24px: card content padding" },
+      "padding-sm":   { "$type": "dimension", "$value": "{scale.4}", "$description": "16px: compact card padding" },
+      "gap":          { "$type": "dimension", "$value": "{scale.4}", "$description": "16px: gap between card items" }
+    },
+
+    "stack": {
+      "xs":  { "$type": "dimension", "$value": "{scale.1}", "$description": "4px: tight stack (icon + label)" },
+      "sm":  { "$type": "dimension", "$value": "{scale.2}", "$description": "8px: default inline gap" },
+      "md":  { "$type": "dimension", "$value": "{scale.3}", "$description": "12px: form field to label" },
+      "lg":  { "$type": "dimension", "$value": "{scale.4}", "$description": "16px: between card sections" },
+      "xl":  { "$type": "dimension", "$value": "{scale.6}", "$description": "24px: between logical groups" },
+      "2xl": { "$type": "dimension", "$value": "{scale.8}", "$description": "32px: major section separation" }
+    },
+
+    "inline": {
+      "xs":  { "$type": "dimension", "$value": "{scale.1}", "$description": "4px: tight inline (icon gap)" },
+      "sm":  { "$type": "dimension", "$value": "{scale.2}", "$description": "8px: default inline gap" },
+      "md":  { "$type": "dimension", "$value": "{scale.3}", "$description": "12px: button icon + text" },
+      "lg":  { "$type": "dimension", "$value": "{scale.4}", "$description": "16px: between inline items" }
+    },
+
+    "component": {
+      "button-padding-x":  { "$type": "dimension", "$value": "{scale.4}" },
+      "button-padding-y":  { "$type": "dimension", "$value": "{scale.2.5}" },
+      "button-padding-x-sm": { "$type": "dimension", "$value": "{scale.3}" },
+      "button-padding-y-sm": { "$type": "dimension", "$value": "{scale.2}" },
+      "button-padding-x-lg": { "$type": "dimension", "$value": "{scale.6}" },
+      "button-padding-y-lg": { "$type": "dimension", "$value": "{scale.3}" },
+      "input-padding-x":   { "$type": "dimension", "$value": "{scale.3}" },
+      "input-padding-y":   { "$type": "dimension", "$value": "{scale.2}" },
+      "badge-padding-x":   { "$type": "dimension", "$value": "{scale.2.5}" },
+      "badge-padding-y":   { "$type": "dimension", "$value": "{scale.0.5}" },
+      "modal-padding":     { "$type": "dimension", "$value": "{scale.6}" },
+      "table-cell-padding-x": { "$type": "dimension", "$value": "{scale.4}" },
+      "table-cell-padding-y": { "$type": "dimension", "$value": "{scale.3}" }
+    }
+  }
+}
\ No newline at end of file
diff --git a/skills/scd-uiux/data/tokens/states.json b/skills/scd-uiux/data/tokens/states.json
new file mode 100644
index 0000000..4975edc
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/states.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Semantic interaction-state tokens. Centralizes the visual treatment of the 8 component states (CLAUDE.md) so they are consistent across every component and framework.",
+
+  "disabled": {
+    "opacity": { "$type": "number", "$value": "{opacity.disabled}", "$description": "→ tokens/opacity.json" },
+    "cursor": { "$type": "string", "$value": "not-allowed" }
+  },
+
+  "hover": {
+    "overlay": { "$type": "number", "$value": "{opacity.subtle}", "$description": "State-layer alpha on hover" }
+  },
+
+  "active": {
+    "overlay": { "$type": "number", "$value": "{opacity.pressed}", "$description": "State-layer alpha on press" }
+  },
+
+  "selected": {
+    "bg": { "$type": "color", "$value": "{semantic.interactive.selected-bg}", "$description": "→ tokens/colors.json (fallback to action.primary tint)" },
+    "overlay": { "$type": "number", "$value": "{opacity.selected}" }
+  },
+
+  "focus": {
+    "ring": { "$type": "shadow", "$value": "{focus-ring}", "$description": "→ tokens/shadows.json focus-ring" }
+  },
+
+  "loading": {
+    "opacity": { "$type": "number", "$value": 0.7, "$description": "Content dim while async; pair with aria-busy + spinner" },
+    "cursor": { "$type": "string", "$value": "progress" }
+  },
+
+  "error": {
+    "border": { "$type": "color", "$value": "{semantic.feedback.error}", "$description": "→ tokens/colors.json" },
+    "ring": { "$type": "color", "$value": "{semantic.feedback.error}" }
+  },
+
+  "readonly": {
+    "opacity": { "$type": "number", "$value": 0.9, "$description": "Editable-looking but locked; keep legible (not disabled)" }
+  }
+}
diff --git a/skills/scd-uiux/data/tokens/theming.json b/skills/scd-uiux/data/tokens/theming.json
new file mode 100644
index 0000000..ef389f9
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/theming.json
@@ -0,0 +1,37 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Multi-brand theming + density modes. Themes override SEMANTIC tokens only (primitives stay constant, like dark mode). Density scales spacing/control sizing without touching color/type. Apply via [data-theme] / [data-density] (web) or theme objects (native).",
+
+  "theme": {
+    "$description": "Brand override maps. Each theme re-points semantic.action.* (and optionally accent). Add a theme by cloning this shape. Light/dark still handled in colors.json.",
+    "default": {
+      "action-primary": { "$type": "color", "$value": "{primitive.blue.600}" },
+      "action-primary-hover": { "$type": "color", "$value": "{primitive.blue.700}" }
+    },
+    "violet": {
+      "action-primary": { "$type": "color", "$value": "#7c3aed" },
+      "action-primary-hover": { "$type": "color", "$value": "#6d28d9" }
+    },
+    "emerald": {
+      "action-primary": { "$type": "color", "$value": "#059669" },
+      "action-primary-hover": { "$type": "color", "$value": "#047857" }
+    },
+    "rose": {
+      "action-primary": { "$type": "color", "$value": "#e11d48" },
+      "action-primary-hover": { "$type": "color", "$value": "#be123c" }
+    }
+  },
+
+  "density": {
+    "$description": "Multiplier applied to spacing + control sizing. 1 = default. Compact for data-dense enterprise UI, spacious for marketing/touch.",
+    "compact": {
+      "scale": { "$type": "number", "$value": 0.875, "$description": "−12.5% spacing & control height" }
+    },
+    "default": {
+      "scale": { "$type": "number", "$value": 1 }
+    },
+    "spacious": {
+      "scale": { "$type": "number", "$value": 1.15, "$description": "+15% spacing & control height" }
+    }
+  }
+}
diff --git a/skills/scd-uiux/data/tokens/typography.json b/skills/scd-uiux/data/tokens/typography.json
new file mode 100644
index 0000000..f235f17
--- /dev/null
+++ b/skills/scd-uiux/data/tokens/typography.json
@@ -0,0 +1,210 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "$description": "Typography tokens using Major Third (1.25) modular scale. All sizes in px for precision; convert to rem at 1rem = 16px.",
+
+  "fontFamily": {
+    "sans": {
+      "$type": "fontFamily",
+      "$value": ["Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
+      "$description": "Primary: UI text, body copy"
+    },
+    "serif": {
+      "$type": "fontFamily",
+      "$value": ["Lora", "Georgia", "Cambria", "Times New Roman", "serif"],
+      "$description": "Editorial: long-form content, marketing"
+    },
+    "mono": {
+      "$type": "fontFamily",
+      "$value": ["JetBrains Mono", "Fira Code", "SF Mono", "Consolas", "Liberation Mono", "Menlo", "monospace"],
+      "$description": "Code: snippets, data, technical values"
+    }
+  },
+
+  "fontSize": {
+    "$description": "Major Third scale (1.25). Base = 16px.",
+    "xs":   { "$type": "dimension", "$value": "12px" },
+    "sm":   { "$type": "dimension", "$value": "14px" },
+    "base": { "$type": "dimension", "$value": "16px" },
+    "lg":   { "$type": "dimension", "$value": "18px" },
+    "xl":   { "$type": "dimension", "$value": "20px" },
+    "2xl":  { "$type": "dimension", "$value": "24px" },
+    "3xl":  { "$type": "dimension", "$value": "30px" },
+    "4xl":  { "$type": "dimension", "$value": "36px" },
+    "5xl":  { "$type": "dimension", "$value": "48px" },
+    "6xl":  { "$type": "dimension", "$value": "60px" },
+    "7xl":  { "$type": "dimension", "$value": "72px" }
+  },
+
+  "fontWeight": {
+    "regular":  { "$type": "number", "$value": 400 },
+    "medium":   { "$type": "number", "$value": 500 },
+    "semibold": { "$type": "number", "$value": 600 },
+    "bold":     { "$type": "number", "$value": 700 }
+  },
+
+  "lineHeight": {
+    "none":    { "$type": "number", "$value": 1 },
+    "tight":   { "$type": "number", "$value": 1.25 },
+    "snug":    { "$type": "number", "$value": 1.375 },
+    "normal":  { "$type": "number", "$value": 1.5 },
+    "relaxed": { "$type": "number", "$value": 1.625 },
+    "loose":   { "$type": "number", "$value": 2 }
+  },
+
+  "letterSpacing": {
+    "tighter": { "$type": "dimension", "$value": "-0.05em" },
+    "tight":   { "$type": "dimension", "$value": "-0.025em" },
+    "normal":  { "$type": "dimension", "$value": "0em" },
+    "wide":    { "$type": "dimension", "$value": "0.025em" },
+    "wider":   { "$type": "dimension", "$value": "0.05em" },
+    "widest":  { "$type": "dimension", "$value": "0.1em" }
+  },
+
+  "textStyle": {
+    "$description": "Composite text styles. Use these in components",
+
+    "heading-1": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.5xl}",
+        "fontWeight": "{fontWeight.bold}",
+        "lineHeight": "{lineHeight.none}",
+        "letterSpacing": "{letterSpacing.tighter}"
+      },
+      "$description": "Page titles: 48px/1/bold"
+    },
+    "heading-2": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.4xl}",
+        "fontWeight": "{fontWeight.bold}",
+        "lineHeight": "{lineHeight.tight}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "$description": "Section titles: 36px/1.25/bold"
+    },
+    "heading-3": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.3xl}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.tight}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "$description": "Sub-sections: 30px/1.25/semibold"
+    },
+    "heading-4": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.2xl}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.snug}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Card titles: 24px/1.375/semibold"
+    },
+    "heading-5": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.xl}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.snug}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Widget titles: 20px/1.375/semibold"
+    },
+    "heading-6": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.lg}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.snug}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Smallest heading: 18px/1.375/semibold"
+    },
+    "body-lg": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.lg}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.relaxed}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Lead paragraphs: 18px/1.625/regular"
+    },
+    "body-base": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.base}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Default body text: 16px/1.5/regular"
+    },
+    "body-sm": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.sm}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Secondary body text: 14px/1.5/regular"
+    },
+    "caption": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.xs}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.wide}"
+      },
+      "$description": "Captions, timestamps: 12px/1.5/regular"
+    },
+    "label": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.sm}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Form labels, table headers: 14px/1.5/medium"
+    },
+    "overline": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontSize": "{fontSize.xs}",
+        "fontWeight": "{fontWeight.semibold}",
+        "lineHeight": "{lineHeight.normal}",
+        "letterSpacing": "{letterSpacing.widest}"
+      },
+      "$description": "Category labels, all-caps: 12px/1.5/semibold/0.1em"
+    },
+    "code": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{fontFamily.mono}",
+        "fontSize": "{fontSize.sm}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.relaxed}",
+        "letterSpacing": "{letterSpacing.normal}"
+      },
+      "$description": "Inline and block code: 14px/1.625/regular"
+    }
+  }
+}
\ No newline at end of file
diff --git a/skills/scd-uiux/references/design-tokens.md b/skills/scd-uiux/references/design-tokens.md
index 6b18b91..6e67c6f 100644
--- a/skills/scd-uiux/references/design-tokens.md
+++ b/skills/scd-uiux/references/design-tokens.md
@@ -27,3 +27,12 @@ HTML 与结构表达「它是什么」，令牌表达「它看起来如何」，
 ## 契约中的用法
 
 存在仓库设计系统时优先沿用其令牌体系，只定义增量。UX 契约的「视觉与组件增量」用语义令牌表达决策；现有令牌能够表达时禁止写一次性像素值。需要新增令牌时说明层级归属与命名。不为单个功能创建完整设计系统。
+
+## 数据资产与用法
+
+仓库未自带设计系统或需要具体值参照时，使用本技能内置的第三方资产（来源与许可见 `data/THIRD-PARTY-NOTICES.md`）：
+
+- `data/tokens/`：14 个 DTCG 令牌文件——排版阶梯（Major Third 1.25）、4px 间距刻度、5 级阴影、动效时长与缓动、色彩 6 色×11 阶+暗色+语义+组件、8 态交互、色盲友好图表色板等。给出具体值时从这里取，不自创；暗色按语义层切换的规则照旧。
+- `data/components/`：11 份组件规范（atoms、forms、feedback、navigation、overlays、data-viz 等），含状态矩阵、无障碍与变体要求。设计可复用组件时先对照相应规范，再写组件契约增量。
+
+消费者项目已有令牌体系时以其为准，本数据仅作缺省参照；不得把资产文件复制进消费者仓库。
diff --git a/tests/chinese-skill-payload.test.mjs b/tests/chinese-skill-payload.test.mjs
index 4faa73c..5e7a2c5 100644
--- a/tests/chinese-skill-payload.test.mjs
+++ b/tests/chinese-skill-payload.test.mjs
@@ -17,6 +17,7 @@ function collectPayloadFiles(directory) {
   for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
     const absolutePath = path.join(directory, entry.name);
     if (entry.isDirectory()) {
+      if (entry.name === "data") continue; // 第三方机器可读资产，见 data/THIRD-PARTY-NOTICES.md
       files.push(...collectPayloadFiles(absolutePath));
     } else if (/\.(?:md|yaml)$/.test(entry.name)) {
       files.push(path.relative(root, absolutePath));