Storybook 的 A11Y 插件（axe-core）的自动化测试价值是什么？
Storybook A11Y 插件用 axe-core 自动检测组件可访问性问题（对比度、ARIA、标签、焦点）。工程价值：在 story 预览中实时显示 a11y 错误，并可在 CI 中作为测试断言（a11y 检查），防止无障碍回归。让无障碍测试融入组件开发与 CI，而非手工检查。
A11Y 插件以 axe-core 自动化检测，实时 + CI 断言，把无障碍纳入工程。
Storybook 的 Interaction Testing 与 Playwright 集成是什么？
Storybook 的 play 函数在 story 内模拟用户交互（点击、输入、等待），用 Testing Library 风格的断言（canvas 内）。与 Playwright 集成：通过 @storybook/test-runner 或编写 Playwright 测试访问 story，验证真实浏览器交互。工程价值：交互行为可测试、可回放，跨浏览器验证，与 CI 集成。
play 函数管交互脚本，Playwright 集成管真实浏览器验证，二者结合交互测试。
Ladle / Histoire 作为 Storybook 的轻量替代的工程取舍是什么？
Ladle（React）与 Histoire（Vue）是 Storybook 的轻量替代，启动/构建更快、配置更少、体积小。取舍：Storybook 功能全（addons、docs、composition）但较重；Ladle/Histoire 轻快、适合快速组件开发，但生态与 addon 较少。工程按项目规模与深度需求选择：轻量/快速选 Ladle/Histoire，全面/生态选 Storybook。
Ladle/Histoire 轻快、Storybook 全面，按团队需求在速度与生态间取舍。
Playwright 与 Storybook 集成（@storybook/test-runner）是什么？
@storybook/test-runner 用 Playwright 在真实浏览器中运行所有 story 的 play 函数与交互测试，作为测试套件在 CI 中执行。它把 story 的交互测试提升为 E2E 级别的回归测试，验证组件在真实环境的行为。工程价值：复用 story 作测试、跨浏览器、CI 集成、捕获交互回归。
test-runner 用 Playwright 跑 story 交互，把组件测试提升到 E2E 回归。
Storybook 如何演示品牌主题切换与暗黑模式？
Storybook 用 decorator 包裹 story 应用主题（CSS 变量/class），Themes addon 或全局装饰器切换明暗/品牌主题。演示：为每个主题提供一个 context，切换时设置容器 class/CSS 变量，story 响应变化。工程价值：在文档中直观演示多主题与暗黑模式，验证组件在主题下的表现。
decorator + 主题切换机制，让 story 演示多主题与暗黑模式。
Storybook 中如何管理并展示设计系统 Token？
Storybook 用 Stories/文档展示设计 token（颜色、字体、间距），通过 JSON/CSS 变量导入并渲染为 token 面板或 story。工程价值：token 可视化、团队可查、设计与实现一致，配合设计系统文档。可用 decorator 或生成的 token story 展示，支持暗黑与多主题。
Storybook 展示 token 让设计与实现一致，是设计系统文档的重要部分。
Token 评审、组件 ADR 与 RFC 流程在大型前端团队中的工程价值是什么？
Token 评审保证设计令牌一致与复用；组件 ADR（Architecture Decision Record）记录组件架构决策；RFC 流程为重大变更提供提案讨论。工程价值：决策可追溯、团队共识、变更可控、规范化治理，避免随意改动与重复实现。适合大型团队的一致性与质量管理。
评审 + ADR + RFC 提供决策记录与流程，是大型团队治理的基础。
@property 的 syntax/inherits/initial-value 在动画过渡中的应用是什么？
@property 注册自定义属性，声明 syntax（类型）、inherits（是否继承）、initial-value（初始值）。注册后浏览器知道属性的类型，可对自定义属性做动画插值（如颜色、渐变、角度），否则浏览器无法插值自定义属性。工程价值：让自定义属性的动画/过渡可用，实现复杂但优雅的动画。
@property 注册类型使自定义属性可插值，是自定义属性动画的前提。
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
CSS Properties & Values API（@property）的语义与边界是什么？
CSS Properties & Values API 通过 @property 注册自定义属性，声明 syntax、inherits、initial-value，使自定义属性成为"类型化"的 CSS 属性，可参与动画、过渡、受浏览器优化。边界：它定义的是类型的语义，不是运行时行为；CSS.supports 检测支持；初始值用于未显式设置时；不支持的类型声明无效。工程上用于类型化动画与设计令牌。
@property 提供自定义属性的类型化语义，边界是类型注册与浏览器支持。
CSS Typed OM（StylePropertyMap、ComputedStyleMap、CSSUnitValue、CSSStyleValue.parse）是什么？
CSS Typed OM 把 CSS 样式表示为类型化对象而非字符串：element.attributeStyleMap（StylePropertyMap）读写内联样式，computedStyleMap（ComputedStyleMap）读取计算样式，CSSUnitValue 表示带单位值（CSS.px(10)），CSSStyleValue.parse 解析字符串。工程价值：避免字符串解析，类型化运算、性能更好、可编程。
Typed OM 提供类型化样式操作，替代字符串 style 操作，更安全高效。
Storybook 8 + Vite Builder 在 monorepo 组件库中的工程价值是什么？
Storybook 8 用 Vite Builder 构建，启动/HMR 快、配置简单、与 Vite 工具链一致。在 monorepo 组件库中，Storybook 可集中预览多包组件，配合 workspace 依赖、路径别名。工程价值：快速迭代组件、跨包预览、统一构建，是 monorepo 组件库的文档与测试基础设施。
Vite Builder 快 + monorepo 集中预览，构成组件库文档测试基础。
CSS Custom Properties API（@property 注册）是什么？
CSS Custom Properties API 通过 @property 注册自定义属性，声明 syntax、inherits、initial-value，把自定义属性从"任意字符串"升级为"类型化属性"。应用：参与动画插值、类型校验、设计令牌。注册方式有 CSS（@property）与 JS（CSS.registerProperty）。工程价值是类型化自定义属性与动画支持。
@property 注册让自定义属性类型化，支持动画与校验，是自定义属性 API 核心。
Typed OM 的 CSS.px(10)/CSS.rem(1.5) 单位与运算能力是什么？
CSS Typed OM 提供 CSS.px(10)、CSS.rem(1.5) 等工厂函数创建 CSSUnitValue（带单位值），支持单位运算（CSSMathValue：add、multiply 等）。工程价值：类型化单位值可运算、可类型判断，避免字符串拼接与解析，配合 attributeStyleMap 写入。是现代样式编程的基础。
CSS.px/CSS.rem 创建类型化单位，CSSMathValue 提供运算，替代字符串样式。
注册自定义属性的语法、初始值、inherits 是什么？
@property 注册自定义属性需声明：syntax（类型，如 ' '、''、'*'）、inherits（是否继承，布尔）、initial-value（初始值，与 syntax 匹配）。语法决定属性类型与动画插值，initial-value 用于未设置时的默认，inherits 控制继承。正确声明才能参与动画与类型校验。
syntax/inherits/initial-value 三要素定义自定义属性语义，是 @property 核心。
CSS Layout API（LayoutWorklet）是什么？
CSS Layout API 用 LayoutWorklet 在 Worklet 线程实现自定义布局算法，通过 registerLayout 注册布局，配合 CSS display: layout()。它让开发者定义布局逻辑（如瀑布流、魔板），在隔离线程执行，不阻塞主线程。工程价值：自定义布局能力，但浏览器支持有限、实现复杂。
Layout API 在 Worklet 线程自定义布局，能力强大但支持有限。
CSS Painting API（PaintWorklet + registerPainter）是什么？
CSS Painting API 用 PaintWorklet 实现自定义绘制，registerPainter 注册 painter，CSS 用 paint() 引用。painter 有 paint 方法，用 Canvas 2D 上下文按 PaintSize 绘制。工程价值：自定义背景、边框、纹理，在隔离线程执行，不阻塞主线程。
Paint API 用 registerPainter 自定义绘制，paint() 在 Worklet 线程执行。
Worklet 在隔离线程执行与主线程解耦的能力是什么？
Worklet 在独立线程执行（CSS Paint/Layout/Animation），与主线程解耦，不阻塞渲染主线程。工程价值：复杂绘制/布局/动画在后台线程执行，减少主线程负担、避免卡顿，提升渲染性能。Worklet 通过 addModule 加载，有受限 API（无 DOM）。
Worklet 隔离线程执行，与主线程解耦，是性能优化的关键能力。
CSS Animation Worklet 离主线程动画与 requestAnimationFrame 的差异是什么？
Animation Worklet 用 WorkletAnimation 在 Worklet 线程驱动动画，动画由 compositor 直接驱动，不依赖主线程，即使主线程繁忙也能流畅。requestAnimationFrame 在主线程执行回调，主线程阻塞会影响动画。差异：Animation Worklet 离主线程、可组合滚动驱动动画；rAF 主线程、受阻塞影响。工程上 Worklet 动画更流畅。
Animation Worklet 离主线程由 compositor 驱动，rAF 主线程，前者更流畅稳定。
CSS Custom State（:--state）与自定义状态选择器是什么？
CSS Custom State API 允许自定义元素声明自定义状态（自定义状态伪类），通过元素 internals 的 setState 设置状态，用 :--state 或自定义伪类选择器匹配。工程价值：让自定义元素暴露内部状态供 CSS 样式（如 :--loading），替代 data 属性，与自定义元素的封装结合。它是实验性 API。
Custom State 用 setState 声明自定义状态，CSS 用自定义伪类选择器匹配。
CSS Custom Functions 与 if() 函数在动态样式中的工程价值是什么？
CSS Custom Functions 允许定义自定义函数（@function），if() 允许在 CSS 中条件取值（if(cond, a, b)），用于动态样式。工程价值：样式逻辑可复用、条件化，减少 JS 传递，增强 CSS 表达能力。它们是实验性/提案特性（CSS 函数与条件），需按官方阶段标注。
if() 与自定义函数增强 CSS 动态性，属实验性/提案特性需标注。
CSS Custom Highlight API（::highlight、HighlightRegistry）的文本片段样式化是什么？
CSS Custom Highlight API 用 HighlightRegistry 注册文本范围（Highlight.fromRange），CSS 用 ::highlight() 选择器样式化这些范围，实现在不改变 DOM 结构的情况下高亮文本片段（搜索、语法高亮、批注）。工程价值：非侵入式文本高亮、性能好、可叠加多个高亮层。是现代文本高亮的先进方案。
核心价值在于"非侵入式"——把文本范围与样式从 DOM 结构中解耦，既无需改 DOM 也能叠加多层高亮，性能更优，适合搜索、语法高亮、批注等场景。
const range = new Range();
range.selectNodeContents(el);
CSS.highlights.set('search', new Highlight(range));
::highlight(search) { background: yellow; }
React/Vue3 组件 Story 编写与 args 参数控制是什么？
Story 用组件渲染不同场景，args 是组件 props 的参数化，Controls 面板可编辑 args 实时预览。React/Vue3 组件 story 定义 meta（component、args、decorators）与多个 story（variants）。args 驱动可交互的 controls 文档，是组件文档化的核心。工程价值：组件场景可视化、可调试、可测试。
args 参数化组件 props，Controls 实时编辑，是 Story 文档交互的核心。
Vitest 的 @vitest/coverage-v8 在覆盖率与测试质量中的工程价值是什么？
@vitest/coverage-v8 用 V8 引擎计算代码覆盖率（行/分支/函数/语句），可配置阈值与报告。工程价值：覆盖率反映测试覆盖，配合阈值门禁（CI 失败低于阈值）驱动测试补充，提升测试质量。支持多种报告格式，与 CI 集成。
coverage-v8 提供覆盖率与阈值门禁，驱动测试质量提升。
Web Test Runner（@web/test-runner）是什么？
Web Test Runner 是 Web 组件的测试运行器，在真实浏览器中运行测试，支持被测框架清单、Playwright/Puppeteer 驱动、无头/有头。工程价值：跨浏览器真实测试、与 Web 组件生态集成、支持测试浏览器行为。适合 Web 组件与真实浏览器场景。
Web Test Runner 在真实浏览器跑测试，是 Web 组件测试的运行器。
Storybook MDX Docs 与 autodocs 的工程价值是什么？
Storybook 的 autodocs 自动从 story 生成组件文档（props 表、story 预览），MDX Docs 允许手写 Markdown + JSX 扩展文档（用法、示例、说明）。工程价值：组件文档自动生成 + 手动补充，props 表格化、live 预览，是组件文档化的高效方式，减少文档维护成本。
autodocs 自动生成 + MDX 手动扩展，让组件文档高效且丰富。
Chromatic visual regression test 在 PR 检查截图对比中的工程价值是什么？
Chromatic 对 Storybook 组件做视觉回归测试：为每个 story 截图，检测 UI 变化，在 PR 中对比基准截图，发现意外视觉变化。工程价值：捕获视觉回归（样式、布局、主题变化）、PR 检查自动化、团队协作审查。与 Storybook 集成，是视觉质量保障。
Chromatic 截图对比捕获视觉回归，集成 PR 检查保障视觉质量。
Ladle 与 MSW 的 API 拦截协作是什么？
MSW（Mock Service Worker）在浏览器拦截网络请求，返回 mock 数据。Ladle 集成 MSW 可在组件故事中 mock API，模拟接口响应测试组件。工程价值：组件在无后端时可用真实数据流测试、确定性、可模拟各种场景。Ladle 的轻量 + MSW 拦截构成组件测试的数据 mock 方案。
MSW 拦截 API + Ladle 集成，让组件用 mock 数据流测试。
Cypress 14 在大型项目测试金字塔中的工程价值是什么？
Cypress 14 是 E2E 测试框架，在真实浏览器端到端测试用户流程。测试金字塔中 E2E 位于顶端（数量少、成本高、覆盖面广），Cypress 提供稳定的 E2E 验证关键用户路径。工程价值：E2E 验证核心流程、组件/集成层保障，配合单元/集成测试构成金字塔。Cypress 14 支持组件测试、并行、CI 集成。
测试金字塔中 E2E 数量少但覆盖广，Cypress 验证关键路径，与下层测试互补。
Jest 30 在团队规范与可维护性中的工程价值是什么？
Jest 30 是单元/集成测试框架，提供断言、mock、快照、覆盖率。团队规范价值：测试结构统一、mock 规范、覆盖率门禁，可维护性提升。工程价值：稳定、生态成熟、配置丰富，适合大型项目的单元测试基础，配合 CI 驱动质量。
Jest 提供统一测试基础与规范，配合覆盖率门禁提升可维护性。
Vitest 的 @vitest/coverage-v8 在 CI/CD 与并行执行中的工程价值是什么？
@vitest/coverage-v8 在 CI 中计算覆盖率并作为门禁，Vitest 支持并行执行（多线程、多进程）与 watch 模式，加速测试。工程价值：CI 中覆盖率门禁驱动质量、并行缩短测试时间、与 Vite 生态一致。适合 Vite 生态项目的测试与 CI。
coverage-v8 + 并行 + Vite 集成，让 CI 测试高效且可门禁。
Storybook 9 的 manager.api 与自定义 panel 在大型设计系统中的价值是什么？
Storybook 9 的 manager 提供 addon API，可自定义 panel、工具条、侧边栏，扩展 Storybook UI。大型设计系统价值：自定义 panel（如 token 检查器、组件元数据、主题切换器）集成设计系统工具，跨团队统一工作流，提升组件开发效率。它是设计系统基础设施的扩展。
manager.api 允许自定义 panel，是设计系统在 Storybook 扩展能力的基础。
Storybook 的 Controls 面板与自动 Props 文档是什么？
Controls 面板自动从 args 生成控件（输入、选择器、布尔），实时编辑组件 props 预览。自动 Props 文档用 argTypes 生成 props 表格（类型、默认值、描述）。工程价值：组件 props 可视化编辑与文档自动生成，降低文档成本，提升调试体验。
Controls 编辑 args + argTypes 自动生成 props 文档，是组件文档的核心。
Storybook 的 play 函数与交互测试与 MSW 的 API 拦截如何协作？
play 函数在 story 内模拟交互（点击、输入、等待数据），MSW 拦截 API 返回 mock 数据，二者协作：play 触发交互 → 组件请求 API → MSW 返回 mock → 断言结果。工程价值：交互 + 数据流可测、确定性、无需真实后端。配合 test-runner 在 CI 执行。
play 管交互、MSW 管数据，协作测试组件的完整交互与数据流。
MSW 的 http.get/http.post 与浏览器/Node 拦截在大型项目测试金字塔中的工程价值是什么？
MSW 用 http.get/http.post 定义请求处理器，在浏览器（Service Worker）与 Node（测试）拦截网络请求，返回 mock。测试金字塔中，MSW 让单元/集成/E2E 层共享 mock 数据，消除对真实后端的依赖，测试确定、快速。工程价值：跨层统一 mock、模拟各种场景、提升测试可靠性。
MSW 跨浏览器/Node 拦截，为各层测试提供统一 mock，是测试金字塔的数据基础。
Storybook Composition（多 Storybook 组合）在多包组合预览与团队协作中的工程价值是什么？
Storybook Composition 把多个 Storybook 站点组合成一个，聚合多包/多团队的 story。工程价值：跨包统一预览、团队各自维护 story 又统一访问、大型 monorepo 或设计系统中聚合文档。它是多团队协作的组件文档聚合方案。
Composition 聚合多 Storybook，让多包/多团队统一预览与协作。
Storybook 的响应式预览与设备切换（Viewport）是什么？
Storybook 的 Viewport addon 提供预设设备尺寸与自定义视口，切换查看组件在不同屏幕尺寸的表现。工程价值：验证组件响应式、在移动/桌面设备下测试、快速发现布局问题。配合 Controls 与主题，是响应式组件开发与验证的工具。
Viewport 切换设备尺寸，验证组件响应式表现。
Lighthouse CI 与性能回归与 a11y/性能/契约测试的协作是什么？
Lighthouse CI 在 CI 中跑 Lighthouse 审计（性能、a11y、SEO、PWA），设阈值门禁捕获性能/a11y 回归。协作：与契约测试（API 契约）、视觉回归、E2E 结合，形成质量门禁。工程价值：性能与 a11y 自动化回归、指标可量化、CI 集成。是质量保障的组成部分。
Lighthouse CI 提供性能/a11y 门禁，与契约、视觉、E2E 协作构成质量体系。
Testing Library 在 E2E 与单元测试中的协作是什么？
Testing Library 以用户视角查询 DOM（getByRole、getByText），用于单元/集成测试（React Testing Library）。E2E 测试（Playwright/Cypress）也用类似查询理念。协作：Testing Library 提供组件层测试，E2E 提供端到端，二者查询哲学一致（按用户可见方式），覆盖不同层级。工程价值：保持一致测试风格，分层覆盖。
Testing Library 管组件层，E2E 管端到端，共享用户视角查询理念。
Playwright 1.5x 在 E2E 与单元测试中的协作是什么？
Playwright 1.5x 提供 E2E 测试（真实浏览器、多浏览器、自动等待）与组件测试（Component Tests，在真实浏览器渲染组件）。协作：E2E 验证端到端流程，组件测试验证组件交互，与单元测试（逻辑）互补。工程价值：Playwright 统一浏览器测试，多浏览器覆盖，与 CI 集成。
Playwright 覆盖 E2E 与组件测试，与单元测试互补，统一浏览器测试。
Storybook 的 play function 在组件交互测试（Testing Library）中的工程应用是什么？
Storybook 的 play 函数用 Testing Library 风格的 API（canvas.findByRole、findByText）模拟交互并断言，在 story 内封装交互脚本。测试可在预览或 test-runner 中运行。工程价值：交互行为可复现、可测试、与 story 文档结合，复用 story 作交互测试。
play 用 Testing Library 查询模拟交互，复用 story 作交互测试。
Storybook 8/9 的 Tag System（autodocs、dev、test）的工程价值是什么？
Storybook 的 Tag System 用 meta 的 tags 标记 story，如 'autodocs'（自动生成文档）、'dev'（开发）、'test'（测试）。工程价值：按 tag 控制 story 的文档生成、测试执行、开发预览，组织和过滤 story。它是 story 分类与自动化控制的机制。
Tag 控制 story 的文档/测试/开发行为，是 story 分类管理机制。
Storybook 的 Controls（参数面板）在组件调试中的现代应用是什么？
Controls 面板实时编辑组件 props（args），立即预览效果，是组件调试的直观工具。现代应用：调试不同 props 组合、边界条件、快速复现问题，配合 action 查看事件。它与 story、测试结合，是组件开发调试的加速器。
Controls 实时编辑 props 预览，是组件调试的高效工具。
Storybook 的 Actions（事件面板）在组件交互中的工程实践是什么？
Actions 捕获组件触发的事件（onClick、onSubmit 等），在面板显示事件与参数，无需真实 handler 即可验证事件。工程实践：用 actions 参数替代实际回调，观察交互是否触发正确事件与参数，配合 play 测试。是组件交互验证与调试的工具。
Actions 捕获事件展示，验证交互事件触发与参数，无需真实 handler。
Storybook 的 Viewport（响应式预览）在多设备测试中的工程价值是什么？
Viewport 提供预设设备尺寸与自定义视口，切换查看组件在不同设备下的表现。多设备测试价值：验证响应式布局、在移动/平板/桌面下测试、发现适配问题。配合截图测试（Chromatic）可做多设备视觉回归。工程价值是组件响应式与多设备适配的验证。
Viewport 切换设备尺寸，验证组件多设备响应式适配。
Storybook 的 Backgrounds（背景切换）在主题测试中的现代应用是什么？
Backgrounds addon 允许切换 story 的背景色，用于测试组件在不同背景下的可读性与对比度。现代应用：配合主题（明暗）测试，验证组件在亮/暗背景下的表现，检查对比度与可读性。工程价值：组件视觉适配验证，辅助主题与无障碍测试。
Backgrounds 切换背景，验证组件在不同背景下的表现与对比度。
Storybook 的 Accessibility addon（a11y）是什么？
Storybook 的 a11y addon 用 axe-core 检测组件可访问性问题（对比度、ARIA、标签、焦点），在面板显示违规报告。工程价值：开发时实时检测无障碍问题、可设 CI 断言、提升无障碍质量。是无障碍自动化测试的基础。
a11y addon 用 axe 检测并报告无障碍问题，可集成 CI。
Storybook 的 MDX（Markdown + JSX）是什么？
Storybook 的 MDX 允许在 Markdown 中嵌入 JSX，编写组件文档（说明、示例、PropsTable、Story 预览）。工程价值：富文档、可交互、通过 引用 story、自动文档。是组件文档编写的灵活方式。
MDX 在 Markdown 中混用 JSX，是组件文档的富写法。
Storybook 的 Docs（自动生成 API 表格）的工程应用是什么？
Storybook Docs 自动从组件与 argTypes 生成 API 表格（props、类型、默认值、描述），展示 story 预览。工程应用：组件 API 文档自动生成、props 可视化、与 autodocs 结合。减少文档维护成本，是组件文档化的核心。
Docs 自动生成 API 表格与 story 预览，是组件文档自动化的核心。
Storybook 的 Composition（跨项目引用）是什么？
Storybook Composition 允许一个 Storybook 引用/嵌入其他 Storybook 站点的 story，实现跨项目组合。工程应用：聚合多团队/多包/monorepo 的 story 到统一入口，或引用公共组件库的 story。工程价值：跨项目统一文档、团队协作、集中预览。
Composition 跨项目聚合 story，是统一文档与协作的机制。
Storybook 8/9 的 On-demand（按需加载 Story）是什么？
Storybook 8/9 支持按需加载 story（on-demand），只加载当前浏览的 story 及其依赖，而非全量构建。工程价值：大型项目启动与加载更快、内存占用低、HMR 高效。适合大型组件库的 Storybook 开发体验。
On-demand 按需加载 story，改善大型项目 Storybook 的性能。
Storybook 的 Themes addon（多主题切换）是什么？
Storybook 的 Themes addon 提供主题切换 UI，在明暗或自定义主题间切换，展示组件的主题表现。工程应用：配合组件主题（CSS 变量/class）演示多主题，验证组件在主题下的表现。与 decorator 配合，让 story 响应主题变化。
Themes addon 切换主题演示，验证组件多主题表现。
Monorepo 中多包 Story 如何共享？
Monorepo 中多包 Story 共享：每个包有自己的 story，通过 Storybook Composition 聚合到一个统一入口，或集中的 Storybook 引用各包 story。工程价值：跨包统一预览、组件文档集中、团队协作。配合 workspace 依赖与路径别名，多包共享组件与文档。
多包 story 通过 Composition 或集中 Storybook 聚合，统一预览协作。
Storybook 的 ondemand-story 与按需加载在 monorepo 中的工程价值是什么？
ondemand-story 在 monorepo 中按需加载 story，只加载当前浏览的 story 与依赖，避免全量加载所有包。工程价值：大型 monorepo 的 Storybook 启动/加载更快、内存低、HMR 高效，改善多包开发的体验与性能。
ondemand-story 按需加载，缓解 monorepo 大项目 Storybook 性能问题。
Storybook Test Runner 与 Vitest 在大型仓库中的取舍是什么？
Storybook Test Runner 跑 story 的交互/快照测试（Playwright 真实浏览器），Vitest 跑单元/集成测试（Node/jsdom）。取舍：Test Runner 验证组件真实交互与浏览器行为、与 story 集成；Vitest 快、轻、覆盖逻辑与渲染。大型仓库常结合：Vitest 管单元/逻辑，Test Runner 管组件交互，按层级分工。
Test Runner 管浏览器组件交互，Vitest 管单元逻辑，二者互补分工。
CSS Properties and Values API (@property registered) 的工程价值是什么？
@property 注册自定义属性使其类型化（syntax、inherits、initial-value），工程价值：类型化属性可参与动画/过渡插值、类型校验、与设计令牌结合。它让自定义属性"受控"，取代字符串拼接，支持更优雅的动画。工程应用是类型化动画与令牌。
@property 提供类型化自定义属性，支持动画与令牌，是工程价值所在。
Parser API（CSS Parser Worklet）是什么？
CSS Parser API 提供自定义 CSS 解析能力（在 Worklet 中），配合 CSS 语法扩展。它是实验性/提案特性，允许解析自定义 CSS 语法。工程价值：自定义 CSS 语法解析，但浏览器支持有限、需按官方阶段标注。它是高级 CSS 扩展的方向。
Parser API 是实验性提案，提供自定义 CSS 解析，支持有限。
Animation Worklet 在自定义动画时间轴（WorkletAnimation）中的工程应用是什么？
WorkletAnimation 用 Animation Worklet 在离主线程自定义动画时间轴，可结合滚动（scroll-driven）、合成器驱动动画。工程应用：自定义动画逻辑（如滚动驱动、弹性动画）、离主线程流畅运行。它是高级动画的工程方向，支持有限。
WorkletAnimation 自定义时间轴、离主线程，支持滚动驱动等高级动画。
Paint Worklet（CSS Paint API）在自定义背景与边框中的现代实践是什么？
Paint Worklet 用 registerPainter 自定义绘制，CSS 用 paint() 引用，用于自定义背景、边框、纹理。现代实践：噪点、网格、渐变、复杂边框等无法用纯 CSS 实现的绘制，在 Worklet 线程执行不阻塞主线程。工程价值是自定义视觉表现且性能好。
Paint Worklet 自定义背景/边框，在隔离线程绘制，性能好。
Worklet 的 addModule() 注册与生命周期管理的现代应用是什么？
Worklet 通过 CSS.paintWorklet.addModule('url') 等加载模块注册。生命周期管理：加载时机（页面初始化/按需）、模块加载异步、错误处理。现代应用：在合适时机加载 Worklet 模块，管理加载完成与失败，避免阻塞。工程上需处理加载时序与错误。
addModule 异步加载 Worklet 模块，需管理加载时机与错误。
CSS Paint API 的 paint(letname, args) 在工程中的现代应用是什么？
CSS 用 background: paint(name, args) 引用注册的 painter，args 传入参数（如颜色、尺寸）。现代应用：自定义绘制带参数（动态背景、纹理），painter 在 Worklet 线程按 PaintSize 绘制。工程价值是参数化自定义绘制，配合 CSS 变量动态。
paint() 带参数引用 painter，实现参数化自定义绘制。
Worklet 在跨域（cross-origin）的工程边界与跨 iframe 的协作是什么？
Worklet 模块加载受同源/跨域限制，跨域加载需 CORS 支持。跨 iframe 协作：每个 iframe 有独立的 Worklet 作用域，跨 iframe 的 Worklet 不共享，需在各 iframe 分别加载。工程边界：跨域 Worklet 需正确 CORS 头，跨 iframe 协作按各自作用域管理。
Worklet 跨域需 CORS，跨 iframe 作用域独立，是工程边界。
CSS Custom Ident 与新选择器语法提案（:--foo）是什么？
CSS Custom Ident 指自定义标识符（如自定义属性名、自定义状态），新选择器语法提案（如 :--foo 自定义状态伪类）允许用自定义标识符作选择器。它们是实验性/提案特性，用于自定义元素状态与扩展。工程上需按官方阶段标注，支持有限。
Custom Ident 与 :--foo 选择器是提案特性，用于自定义状态扩展。
为什么"不把实验性 API 写成已稳定特性"？
实验性 API（如 WebGPU 部分、Worklet 部分、CSS 提案）尚未定稿或浏览器支持不普及，写成已稳定会误导开发者、导致生产环境兼容性问题。应标注官方阶段（提案、实验性、Baseline）与浏览器支持，避免夸大。工程上按能力检测与降级处理。
诚实标注实验性 API 的阶段与支持，避免误导与兼容性风险。
CSS Custom Functions 与 if() 函数（提案/实验性）按官方阶段如何标注？
CSS Custom Functions（@function）与 if() 是 CSS 提案/实验性特性，支持有限。工程上应标注其官方阶段（CSS Values 等提案），说明浏览器支持（可能需 flag），不能当作稳定特性。按能力检测提供降级。可增强 CSS 表达但需谨慎。
Custom Functions 与 if() 是提案特性，需标注阶段与支持，谨慎使用。
CSS Parser Level 4/5 与 @scope 兼容性的现代取舍是什么？
@scope 允许限定样式作用域（选择器隔离），改善样式隔离。现代取舍：@scope 已部分支持（Chrome 等），但跨浏览器兼容性不一，需按需使用与降级；Parser Level 4/5 提供高级解析。工程上 @scope 用于现代浏览器，旧浏览器用传统命名/封装替代。
@scope 提供作用域但兼容性不一，需按目标浏览器选择与降级。
@property registered properties 与 animation 的工程价值是什么？
@property 注册的属性（类型化）可参与 CSS 动画/过渡插值，因为浏览器知道其类型。工程价值：对自定义属性（颜色、渐变、角度）做动画，实现复杂视觉效果。未注册的自定义属性无法插值。注册后动画可用且受浏览器优化。
@property 注册使自定义属性可动画插值，是自定义属性动画的前提。
CSS Properties and Values API（@property）在动画插值与类型注册的现代工程边界是什么？
@property 注册类型使自定义属性可动画插值，但边界：需明确类型（syntax）、浏览器支持不一、未注册属性无法插值、初始值需匹配。现代工程边界：类型注册是动画插值的前提，但需检测支持与降级，不能依赖所有浏览器。按需注册并处理兼容。
@property 类型注册支撑动画插值，但支持与降级是边界。
CSS font-palette 调色板与 COLRv1 字体（Chrome 98+）在彩色字体中的现代工程价值是什么？
font-palette 允许为彩色字体（COLRv1）选择调色板，@font-palette-values 定义调色板。COLRv1 是彩色字体格式（Chrome 98+）。工程价值：用 CSS 切换彩色字体的配色，无需变换字体文件，实现图标/表情/装饰字体的动态配色。是现代彩色字体的 CSS 能力。
font-palette + COLRv1 让彩色字体可 CSS 调色，是彩色字体工程方向。
Custom State API（自定义 CSS 状态 setState）在组件状态驱动样式中的现代价值是什么？
Custom State API 让自定义元素用 setState 声明自定义状态（如 "active"、"loading"），CSS 用自定义伪类选择器（:--active）驱动样式。现代价值：组件状态驱动样式而无 data 属性暴露、封装内部状态、与自定义元素结合。替代 data 属性的一种更语义化方式。
setState 声明自定义状态，CSS 用自定义伪类样式化，组件状态驱动样式。
Storybook 的 Measure & Outline addons（布局测量）是什么？
Storybook 的 Measure addon 显示组件尺寸/间距测量，Outline addon 显示元素轮廓标注。工程价值：调试布局、检查间距/尺寸、可视化元素边界。是组件布局调试的辅助工具。
Measure/Outline 提供布局测量与轮廓标注，辅助布局调试。
Storybook 8/9 的 Test Runner（自动化测试运行器）是什么？
Storybook 8/9 的 Test Runner 用 Playwright 在真实浏览器运行 story 的测试（play 交互、快照、a11y），作为脚本在 CI 中执行。工程价值：story 测试自动化、跨浏览器、回归检测、CI 集成。是组件测试的运行器。
Test Runner 在浏览器自动化运行 story 测试，集成 CI 捕获回归。
Storybook 的 Story 单元测试（composeStories + RTL）的现代边界是什么？
composeStories 把 story 转成可测组件，用 Testing Library（RTL）在 jsdom 断言渲染结果。现代边界：它测的是组件渲染与交互逻辑（jsdom），不测真实浏览器行为与布局；视觉/浏览器行为需 test-runner 或 E2E。边界是单元层 vs 浏览器层分工。
composeStories + RTL 测 jsdom 渲染逻辑，浏览器行为由 test-runner 承担。
Storybook 的 Static Deployment（部署为静态站点）是什么？
Storybook 可构建为静态站点（build-storybook），部署到静态托管（Netlify、Vercel、GitHub Pages 等），供团队/客户端浏览组件文档。工程价值：组件文档可分享、可访问、无需本地运行，配合 CI 自动部署。是组件文档的分发方式。
build-storybook 生成静态站点，部署后供团队浏览与分享。
Storybook 8/9 的 Vitest Plugin（与 Vitest 集成）是什么？
Storybook 8/9 的 Vitest Plugin 让 Vitest 运行 story 的测试（composeStories），在 Vitest 环境中测试 story 渲染与交互。工程价值：与 Vitest 生态统一、快速的单元级 story 测试、与现有测试整合。是 story 测试与 Vitest 协作的桥梁。
Vitest Plugin 让 Vitest 跑 story 测试，与单元测试生态统一。
CI 中如何自动部署 Storybook 站点？
CI 中自动部署 Storybook：build-storybook 构建静态站点，上传到托管（Netlify 等）或 PR 预览，配合测试（test-runner、视觉回归）作为门禁。工程价值：组件文档自动更新、PR 预览、质量门禁，团队协作高效。是组件文档的自动化流程。
CI 构建 + 部署 + 测试门禁，实现 Storybook 自动部署与质量保障。
ADR（Architecture Decision Records）是什么？
ADR 是架构决策记录，用结构化文档记录重大架构决策（背景、方案、权衡、后果）。工程价值：决策可追溯、新成员理解上下文、变更评审、避免重复决策。适合大型团队/架构治理。配合 RFC 流程做决策评审。
ADR 记录架构决策与权衡，提供可追溯的决策上下文，是治理工具。
Bit + Storybook + Pluralsight Flow 的工程协作链是什么？
Bit 分发组件，Storybook 提供组件文档与演示，Pluralsight Flow 提供设计协作/审查。协作链：Bit 管理组件版本与分发 → Storybook 文档展示 → Flow 设计与评审协作。工程价值：组件开发、文档、设计协作打通，形成组件化工作流。
Bit（分发）+ Storybook（文档）+ Flow（协作）形成组件化协作链。
Design Tokens W3C Spec 与跨平台令牌同步（iOS/Android/Web）是什么？
Design Tokens W3C Spec 定义设计令牌的标准化格式（JSON），可导出为各平台（CSS 变量、iOS/Android 资源）。跨平台同步：从单一令牌源生成各平台令牌，保证设计一致。工程价值：设计令牌统一管理、跨平台一致、自动生成、减少手工维护。
W3C Design Tokens 规范标准化令牌，跨平台生成与同步保证一致。
Paint Worklet 的 PaintSize 在响应式画布中的工程应用是什么？
Paint Worklet 的 paint 方法接收 PaintSize（当前绘制区域的宽高），根据尺寸绘制，实现响应式画布。工程应用：自适应的背景/纹理，随容器尺寸变化重绘。价值是绘制与容器尺寸解耦，动态适配。
PaintSize 提供绘制区域尺寸，绘制可响应容器变化。
Layout Worklet 的 LayoutChild 与 LayoutFragment 的现代边界是什么？
CSS Layout API 中 LayoutChild 表示待布局的子元素，LayoutFragment 表示布局后的片段（位置、尺寸）。它们是自定义布局的输入输出。现代边界：Layout API 支持有限（Chromium 实验性），实现复杂，工程上需能力检测与降级。边界是实验性与支持范围。
LayoutChild/LayoutFragment 是布局 API 的输入输出，但支持有限、实验性。
Worklet 的 CSS.paintWorklet.addModule('url') 的加载时机工程价值是什么？
addModule 异步加载 Worklet 模块，加载时机影响：过早加载阻塞、过晚导致首帧无绘制。工程价值：在合适时机（初始化/按需）加载，管理加载完成回调，避免未加载时 fallback。配合性能优化，按需加载减少初始开销。
addModule 加载时机需权衡，避免阻塞与首帧缺失，按需加载。
Paint Worklet 在复杂背景（噪点、网格）中的现代工程应用是什么？
Paint Worklet 可在 Worklet 线程绘制复杂背景（噪点、网格、纹理），用 CSS 引用。现代工程应用：动态噪点背景、网格、渐变纹理，绘制在隔离线程、不阻塞主线程、性能好。替代图片或复杂 CSS。
Paint Worklet 绘制噪点/网格等复杂背景，隔离线程性能好。
Layout Worklet 在瀑布流（masonry）的工程边界与现状是什么？
瀑布流（masonry）可用 Layout Worklet 自定义布局实现，但 CSS Layout API 支持有限（Chromium 实验性），实现复杂。现状：瀑布流多数用 JS 库（如 CSS columns、grid 或图片库）实现，Layout Worklet 是实验方向。工程边界：Layout API 支持不足，瀑布流用成熟方案，Worklet 仅实验。
Layout Worklet 瀑布流是实验方向，现状多用于成熟 JS 方案。
Worklet 的 console.log 在 Worklet 线程调试中的工程价值是什么？
Worklet 线程支持 console.log 等调试输出，可打印绘制/布局/动画过程中的状态。工程价值：在隔离线程中调试自定义绘制/布局，观察参数与状态，定位问题。它是 Worklet 调试的主要手段，虽无 DOM 但可输出日志。
console.log 在 Worklet 线程调试，是验证自定义逻辑的手段。
Paint Worklet 的 paint(letname) 在 Canvas-like 2D 上下文的现代边界是什么？
Paint Worklet 的 paint 方法接收一个 Canvas-like 2D 上下文（OffscreenCanvas 渲染上下文），提供有限绘制 API（fill、stroke、path 等）。现代边界：上下文能力有限（非完整 Canvas API）、不是 DOM 元素、需在 Worklet 线程。边界是"有限 2D 绘制 + 无 DOM + 隔离线程"。
paint 用有限 2D 上下文绘制，无 DOM、隔离线程，是能力边界。