用途
Lab 用于构建一个临时的开发页面，把真实组件的每个变体和状态同时展开在一屏内，便于集中查看和调整，而不必在应用里反复点击切换。该页面是开发页面，不作为发布产物。
主要能力
- 在同一页面展示组件的全部变体、尺寸与状态，包括 hover、pressed、focus、open、selected、disabled、loading、empty 和 error 等。
- 渲染真实组件而非复制品：页面导入并呈现实际组件。
- 将需要交互才能看到的状态强制展开，例如通过受控属性或 data-* 属性打开菜单、浮层、提示和子菜单，或用 force="hover" 保持悬停与聚焦状态。
- 用 lab-entry 包裹每个状态，标注组件名、状态和源码行，使条目与源码对应。
- 页面所需的网格、标签、筛选和控件由技能自带，使用者只需编写条目；需要调值时可用 lab-tune 为自定义属性添加范围。
使用方式
- 阅读各组件，列出其变体、尺寸和状态。
- 添加一个仅开发环境可用的路由（如 /lab），并在该路由中导入真实组件；将 lab.js 复制进应用并只加载一次。
- 对菜单、浮层、提示和子菜单等强制展开；除非用户要求，否则使用应用当前主题。
- 为每个状态编写 lab-entry 并链接源码；如需调值，添加 lab-tune。
- 启动开发服务器并实际打开该页面。
- 将路由和 lab.js 限制在开发环境，或在上线前删除。
检查规则与报告
资料给出八条成对规则，每条包含问题形式与替代做法，例如只展示静止状态、使用复制标记、菜单藏在触发器后、未经要求并排展示明暗主题、无标签网格、从零手写页面框架、只声明添加路由但未打开、以及 /lab 在生产环境可访问。报告按根因逐条给出 file:line - [rule-id] 描述，并附 Rule | Count | Severity 汇总；HIGH 为使用复制组件或生产可访问，MEDIUM 为缺失状态、仍需点击才能看到的状态或手写页面，LOW 为无标签条目或未为用户打开。存在任何 HIGH 时阻断，否则通过；无法渲染的状态标记为未验证。
适用场景
适合在设计系统或组件库开发中集中巡检组件状态、对照源码核对覆盖情况，并在调整默认值、动效、颜色和项目令牌时提供可视化参考。
限制
该技能面向开发环境，页面不得进入发布版本。资料未提供安装命令、价格、平台支持或具体实现代码以外的更多细节。