Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →当修复 ai-shifu 聊天页在移动端与桌面端布局判定不一致的问题时使用本技能。基于真实可见视口宽度而不是仅 `#root.clientWidth` 计算 `frameLayout`，在 `resize` 与 `visualViewport.resize` 时同步，并在断点纠正后关闭过期的移动端抽屉状态。
.claude/skills/ai-shifu-chat-layout-width-detection/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-04 | ✗→✓ | ▲ Improved | -24% | 0% |
| case-05 | ✗→✓ | ▲ Improved | -9% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 4% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -20% | 0% |
| case-10 | ✗→✓ | ▲ Improved | -36% | 0% |
对于 ai-shifu/src/cook-web/src/app/c/[[...id]]，优先把聊天布局视为“视口问题”，而不只是“容器问题”。 若业务语义明确要求 FRAME_LAYOUT_MOBILE 只代表真实移动设备，而不是窄桌面窗口，则应把“是否返回 FRAME_LAYOUT_MOBILE”改为基于 user agent / 设备能力判断，同时保留 FRAME_LAYOUT_PC、FRAME_LAYOUT_PAD、FRAME_LAYOUT_PAD_INTENSIVE 的既有返回方式，避免影响现有消费方。
#root.clientWidth、document.documentElement.clientWidth、window.innerWidth、window.visualViewport?.width。uiConstants，并在 store 与页面间复用。resize、orientationchange、visualViewport.resize 时重新计算布局。calcFrameLayout 增加或更新测试，覆盖 root 节点缺失与移动端 WebView 容器宽度异常偏大的场景。calcFrameLayout 内部，不要改调用方对 FRAME_LAYOUT_* 的比较逻辑。calcFrameLayout 可能在 store 初始化阶段被服务端模块求值调用，读取 document 前必须做 SSR guard，服务端默认回退 FRAME_LAYOUT_PC，避免非聊天页面或错误兜底页因 document is not defined 先崩溃。react-device-detect 进行聊天布局切换。| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 23,196 | 7,221 | -69% | 1 | 1 | 0% | 4,254 | 936 | -78% | 0 | 0 | — |
case-02 | fail→fail | 15,791 | 3,408 | -78% | 1 | 1 | 0% | 3,187 | 909 | -71% | 0 | 0 | — |
case-03 | fail→fail | 19,050 | 6,096 | -68% | 1 | 1 | 0% | 4,210 | 936 | -78% | 0 | 0 | — |
case-04 | fail→pass | 8,120 | 3,686 | -55% | 1 | 1 | 0% | 1,478 | 1,125 | -24% | 0 | 0 | — |
case-05 | fail→pass | 12,990 | 8,658 | -33% | 1 | 1 | 0% | 2,312 | 2,101 | -9% | 0 | 0 | — |
case-06 | pass→pass | 11,634 | 3,819 | -67% | 1 | 1 | 0% | 1,963 | 1,125 | -43% | 0 | 0 | — |
case-07 | pass→pass | 8,967 | 1,829 | -80% | 1 | 1 | 0% | 1,373 | 719 | -48% | 0 | 0 | — |
case-08 | fail→pass | 4,763 | 1,902 | -60% | 1 | 1 | 0% | 757 | 788 | +4% | 0 | 0 | — |
case-09 | fail→pass | 13,841 | 8,178 | -41% | 1 | 1 | 0% | 2,560 | 2,050 | -20% | 0 | 0 | — |
case-10 | fail→pass | 18,110 | 9,679 | -47% | 1 | 1 | 0% | 3,177 | 2,048 | -36% | 0 | 0 | — |
case-11 | fail→pass | 12,377 | 2,660 | -79% | 1 | 1 | 0% | 2,189 | 863 | -61% | 0 | 0 | — |
case-12 | pass→pass | 13,284 | 8,605 | -35% | 1 | 1 | 0% | 2,171 | 1,714 | -21% | 0 | 0 | — |
case-13 | fail→pass | 16,608 | 9,505 | -43% | 1 | 1 | 0% | 3,330 | 2,477 | -26% | 0 | 0 | — |
case-14 | pass→pass | 15,275 | 8,361 | -45% | 1 | 1 | 0% | 2,298 | 1,871 | -19% | 0 | 0 | — |
case-15 | fail→pass | 14,368 | 5,390 | -62% | 1 | 1 | 0% | 2,455 | 1,425 | -42% | 0 | 0 | — |
case-16 | pass→fail | 8,008 | 5,151 | -36% | 1 | 1 | 0% | 1,430 | 1,301 | -9% | 0 | 0 | — |
case-17 | fail→pass | 12,725 | 4,101 | -68% | 1 | 1 | 0% | 1,983 | 1,185 | -40% | 0 | 0 | — |
case-18 | pass→pass | 9,218 | 1,549 | -83% | 1 | 1 | 0% | 1,439 | 694 | -52% | 0 | 0 | — |
case-19 | pass→pass | 10,995 | 2,730 | -75% | 1 | 1 | 0% | 1,732 | 894 | -48% | 0 | 0 | — |
case-20 | pass→pass | 10,130 | 7,930 | -22% | 1 | 1 | 0% | 1,881 | 1,855 | -1% | 0 | 0 | — |
case-21 | pass→pass | 5,365 | 6,595 | +23% | 1 | 1 | 0% | 790 | 1,542 | +95% | 0 | 0 | — |
case-22 | pass→pass | 4,075 | 5,152 | +26% | 1 | 1 | 0% | 752 | 1,366 | +82% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 20 counted toward the lift figure. The other 2 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +36 percentage points is the difference between those two pass rates over the 20 comparable cases. 4 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.