用途：为页面添加滚动效果（阅读进度条、元素进入视口时显现、轻量视差），全部使用公开 CSS 规范 animation-timeline: scroll()/view() 与 animation-range，不写 JavaScript，作为渐进增强；不支持该 API 或开启减少动态效果的浏览器仍显示完整静态内容。触发场景：用户提到 css scroll driven animation、animation-timeline、无 JS 滚动动画、纯 CSS 滚动效果，或调用 /css-scroll-driven-native。
主要能力：读取技能自带 assets/demo.html 与 assets/demo.css，按项目 design.md 调整颜色与间距 token，把 CSS/HTML 写入目标项目，并用 Chromium 无头浏览器验证。三种机制：进度条用 animation-timeline: scroll(root) 绑定整页滚动进度；显现用 view() 加 animation-range: entry 0% cover 40%；视差用同一 view() 时间线配不同 animation-range 形成分层速度差。
必要规则：所有动画必须包在 @supports (animation-timeline: scroll()) 或 view() 内，块外为静态默认状态，不得默认 opacity:0；动画再包在 @media not (prefers-reduced-motion: reduce) 内；不得硬编码浏览器版本号，使用前查 caniuse.com/css-scroll-driven-animations；animation-duration 仍需声明（如 1ms）以触发引擎；用 playwright-verify 在 Chromium 截取 0%/50%/100% 滚动位置并模拟 reduce-motion 断言。
适用与限制：适合已支持该 API 的浏览器做增强，不适合要求立即稳定跨浏览器运行的场景，此时应以 JS IntersectionObserver 方案为主、本技能仅作覆盖。Firefox、Safari 支持仍在推进，可能需开启标志或尚未稳定，具体支持情况暂未提供固定结论，需自行核实。若 @supports 写错或 reduce-motion 下内容被隐藏，视为失败；0%/50%/100% 截图相同通常说明缺少 animation-duration。