Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →ai-shifu/chat-layout-width-detection
当修复 ai-shifu 聊天页在移动端与桌面端布局判定不一致的问题时使用本技能。基于真实可见视口宽度而不是仅 `#root.clientWidth` 计算 `frameLayout`，在 `resize` 与 `visualViewport.resize` 时同步，并在断点纠正后关闭过期的移动端抽屉状态。
Passed 18 of 20 test cases with the skill, and 10 of 20 without it.
and 9 more in the full report
9 fixed11 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
What standardized return constant names are used across the chat route store to represent PC, Tablet, Tablet Intensive, and Mobile screen layouts?
| Checked | Without skill | With skill |
|---|---|---|
| Uses FRAME_LAYOUT_PC, FRAME_LAYOUT_PAD, FRAME_LAYOUT_PAD_INTENSIVE, and FRAME_LAYOUT_MOBILE. | Missed | Passed |
The instructions your model reads when the skill loads.
对于 ai-shifu/src/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 进行聊天布局切换。test cases passed, vs 10 / 20 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.