用途:将一组有序的想法、标题、正文与媒体替代内容,组织成基于滚动的故事,同时保持其作为可读文档的完整阅读顺序。滚动位置只改变呈现方式,不改变内容的存在与含义。
主要能力:先建立故事地图,为每个节拍指定一个主张或认知变化及稳定 id;按关系选择最轻量的驱动方式,如离散交叉、视图进度或滚动进度;决定哪些内容留在正常文档流、哪些可粘性固定;在打磨过渡前先规定导航与回退,包括锚点、上一页/下一页、跳过故事、无 JavaScript、减少动态、无动态及不支持驱动的行为。
使用方式:开始时声明使用该技能;参考 references/patterns.md 了解故事形态与节奏,参考 references/contract.md 了解故事地图字段与回退不变量;需要保存产物时使用 artifact_path(name, "narrative-scrollytelling", "json"),不要自行拼接 .design 路径;保存后用 python3 scripts/validate_map.py <map.json> 校验。
适用场景:需要滚动驱动叙事的网页内容,如数据故事、产品介绍、长篇说明等,且要求内容在无脚本、减少动态等条件下仍可完整阅读。
限制:steps[] 顺序即规范 DOM 与阅读顺序,所有关键事实必须作为语义内容存在于画布帧、关键帧和过渡标签之外;不得劫持滚轮/触摸输入、锁定读者、要求滚动速度或方向,或把文档变成不可访问的幻灯片;滚动不移动焦点,粘性内容不得遮挡聚焦控件;默认不吸附,强制吸附需经审计例外;减少动态时移除视差、滚动空间位移、平滑滚动和长固定;无 JavaScript 与不支持特性模式须暴露完整故事;默认无自动持续运动,超过五秒的必要呈现需提供暂停、停止或隐藏控件。章节内按钮等组件反馈、声音资产与播放、标题正文措辞、设计令牌值、任务成功验证分别由其他技能负责。验证需在禁用 CSS/JavaScript、减少与无动态下通读,并测试键盘正反向遍历、锚点、缩放重排、短窄视口、触摸滚动、前进后退、深层锚点刷新和快速双向滚动,记录观察到的覆盖范围,其余标记为未验证。