break

Break

此技能会选取一个组件，并在一个测试页面上，将其放到所有实际可能触达该组件的场景中渲染。这个页面就是交付物：一份视觉报告，用户可以从头到尾滚动查看并排展示的所有场景，以及标出的故障。

它只观察，不评判。这里的发现，是页面上肉眼可见的故障，并使用负责修复的领域技能所用的术语来描述。依据标准审查代码属于 interface-review 和 better-interface；探索设计备选方案属于 variant；逐一处理组件的产品状态属于 state-machine。

variant 坚持使用真实页面，而此技能则刻意将组件单独隔离。你不是在评判组件在上下文中的表现，而是在检查内容处于最坏情况时，它能否自我防护。

整个流程就是构建、看一遍、报告：只需几分钟，而不是一场完整的工作会话。流程中的任何事情都不值得增加埋点、调试浏览器或再检查一遍。

1. 确定一个组件的范围

每次运行只检查一个组件。“设置页面”不是一个组件；个人资料表单中的文本输入框才是。如果请求涉及多个组件，就列出候选项并询问用户要测试哪一个。

用一句话重述组件是什么：它接收什么、渲染什么，以及将放在哪里。

2. 根据组件推断场景

只对会变化的内容进行压力测试。当组件接收的内容在生产环境中可能呈现某种形态时，该场景才值得列入。因此，先阅读组件：它的 props、插槽、状态以及所渲染的数据。

scenarios.md 列出了各个维度、每个维度的取值，以及用于判断该维度是否适用的提示。对照组件逐项检查，只保留提示与组件相符的维度。文本输入框需要检查内容长度和状态，不需要检查条目数量。带固定标签的静态图标按钮需要检查容器和环境，不需要检查长文本。

构建之前，先把保留的场景逐一写下来，每个场景一行。然后用一行说明舍弃了哪些维度以及原因，以便尽早发现推断错误。

3. 构建测试页面

测试页面在单列中为每个场景渲染一次组件，并在每个实例上方显示一段简短标签。

在应用中添加一个临时路由，使用从项目中导入且未经修改的真实组件。该路由会自动继承应用的布局、字体、全局样式和 providers。

如果框架区分服务端组件和客户端组件，页面就必须使用客户端代码；在 Next 中添加 "use client"。否则，测试数据可能会在跨越这条边界时悄然消失，导致页面渲染为空。

页面只额外添加标签、容器宽度和测试 props。不添加自己的字体或样式，不模拟主题或替换 token，也不添加探针。在这些条件下观察的组件，已经是另一个组件。

通过 props 和测试数据传入场景。测试页面绝不导入生产状态，绝不连接实时数据，生产代码也绝不从测试页面导入内容。

4. 看一遍

在现成的浏览器中加载页面一次，从上到下快速查看每个场景，并记录肉眼可见的故障。“文本溢出输入框右侧”，而不是“间距感觉有点紧”。预测到的故障不算发现。

如果手头没有浏览器，就说明这一点，并把 URL 交给用户检查。启动浏览器、折腾窗口或调试浏览器都超出预算。如果跳过了查看，报告只需包含 URL 和场景列表，不要提供发现表格或页面备注。

然后在页面上标出你确实看到的每个故障：在对应场景的标签下方添加一行备注，并通过一次编辑完成。页面本身必须能够直接作为报告阅读。

5. 报告问题并停止

以表格形式报告发现的问题，先列出导致故障的场景：

场景	观察结果	负责人
一个无法断行的 60 字符字符串	溢出卡片，既不换行也不截断	better-typography
零个项目	区域空白，没有提示信息	better-writing

此技能不负责任何领域规则，也不作出任何判定。

“全部正常”就是一份完整且有用的报告。指出页面上有哪些场景，以及页面运行在哪里，让用户可以亲自查看每一个场景。到此为止，不要用偏好建议凑篇幅。

不要擅自修复任何内容。用户要求修复时，遵循对应负责技能的规则，然后重新渲染失败的场景进行确认。

6. 保持页面运行，按要求删除

页面是报告的一部分，因此它的生命周期比发现问题的表格更长。让它继续运行。只有用户表示不再需要时，才删除页面及其测试夹具。然后搜索路由和测试夹具名称，并检查 diff，确认没有遗留任何测试框架内容。

完成前检查

错误	修正方法
对每个组件运行所有维度	只保留符合线索的维度，并说明舍弃了哪些维度
把预测会发生的问题报告为已观察到的问题	实际渲染，或者不要报告
场景缺少输入内容	问题出在测试框架，而不是组件；修复页面客户端代码并重新加载一次
在测试框架中重建了一个外观相似的组件	从项目中导入真实组件
测试框架重新设置了组件的样式或主题	保持应用原有的布局、字体和设计令牌；页面只添加标签和宽度
每个场景都启动、调试或截图一次浏览器	只加载并查看一次，或者直接交出 URL 并跳过查看
将发现的问题表述为个人品味	报告页面上实际可见的内容，否则不报告
报告问题却没有标明负责人	指明依据其规则判断问题的领域技能
在正常运行的报告中凑入建议	“全部正常”加上场景列表就是报告
每个场景都调整一次视口大小	在页面上使用固定宽度的容器；加载一次即可查看全部场景
表格中报告了问题，但页面上没有标记	在对应场景的标签下注明；页面本身应能完整呈现报告
在报告的同一轮对话中删除页面	页面是报告的一部分；只有用户提出要求时才删除