B16 沉浸式前端 是做什么的？
围绕一个可捍卫的视觉核心思想，创造令人难忘的体验。此技能是对更广泛项目工作流的补充；它不替代治理、规划、构建、验证或审查技能，也不声称能重现 B16 Dev OS。
确定需求
在提问之前，消化所有可用的上下文。仅在证据支持的情况下推断事实，注明来源或标记推断结果，并且仅针对可能实质性改变方向的信息缺口进行提问。如果方向尚未获得批准，请使用 briefing.md。
在实施之前，提交一个简洁的方向说明，涵盖视觉论题、内容层级、首屏焦点、排版、调色板、布局节奏、动效叙事、可能的技术栈、性能预算、降级方案、资产来源以及排除项。获得此方向的批准。不要将概念批准视为部署、购买、账户、令牌或无关系统更改的许可。
以意图驱动设计
- 从移动端开始，然后为更大视口扩展构图和编排。
- 将身份植根于主题、受众、素材、语言和真实内容。避免通用的组件库外观。
- 将视觉亮点集中在一个令人难忘的地方，并保持支撑系统的纪律性。
- 使用主动语态撰写人性化、技术准确的文案。使用句子大小写，避免使用破折号。切勿捏造证明、合作伙伴、推荐信、指标或能力。
- 每个项目使用一个连贯的图标系列，根据技术栈匹配度、身份、覆盖范围、许可、成本、维护、可访问性和体积进行选择。使用官方或授权的品牌标志。在技术栈支持的情况下，通过真正的 tree shaking 导入单个图标。
- 确保每个主要操作无需悬停即可操作。在相关情况下指定触摸、键盘、焦点、激活、加载、禁用、错误和空状态。
选择最小的足够技术栈
当考虑动效、2D Canvas 或 3D 时，请阅读 stack-selection.md。除非有正当理由并获批准，否则保留当前技术栈。
不要为了一个效果向 WordPress 添加 React。不要使任何库在所有站点上成为必需。不要仅仅因为依赖项出现在计划中就安装它。对于简单过渡，优先使用 CSS 和平台 API；对于组件编排，使用 Motion；对于有意的时间线或滚动序列，使用带有 ScrollTrigger 的 GSAP；对于要求高的 2D 场景，使用 PixiJS；对于直接 WebGL，使用 Three.js；当 React 已存在且声明式场景组合有益时，使用带有选择性 drei 辅助工具的 React Three Fiber。Lenis 是可选的，不是自动的。
仅将 ReactBits 和 Codrops 作为选择性参考。在重用之前确认代码和资产的许可和来源。优先进行原创合成；对于任何许可摘录，保留所需的声明。
在构建之前指定动效
对于每个有意义的动画，记录：
- 目的：它解释、优先级区分、确认或使空间布局更易理解的内容。
- 触发方式：加载、进入、点击、状态变更、指针、滚动或媒体进度。
- 持续时间和缓动函数：包括重复和中断的限制。
- 移动端行为：针对视口、粗指针、触摸、电池和设备能力的变化。
- 降级方案：针对减少动效、JavaScript 不可用、媒体加载失败、WebGL 丢失或硬件受限的情况，最终的静态状态。
避免仅依赖悬停的含义和装饰性的连续动效。导航、主要信息和行动号召必须在动画完成前正常工作。在 prefers-reduced-motion: reduce 下，渲染稳定的最终状态，并移除擦除、视差、自动播放或平滑滚动行为，而不仅仅是缩短它们。
预算性能
在实施之前，为项目设定可衡量的预算。考虑初始 JavaScript 体积、媒体权重、字体数量、动画并发性、长任务、布局偏移、最大内容绘制时间、帧稳定性、GPU 内存、设备像素比和热成本。
对于 Canvas 或 WebGL，提供静态海报；限制像素比；在屏幕外或隐藏时暂停；避免每帧分配；在小尺寸或受限设备上减少工作量；处理上下文故障；并释放帧、观察器、监听器、纹理、几何体、材质、渲染目标和渲染器状态。语义内容和控件必须保持在 Canvas 外部或独立于 Canvas。
按比例实施
保留已批准的方向和现有项目约定。保持语义 HTML 和真实内容作为真实来源。仅在能增加价值的地方加载重型体验。限制效果范围，使多个系统不控制同一属性。至多使用一个平滑滚动引擎，并且仅当其价值大于复杂性时才使用。
在计划获得批准之前，不要安装库、修改项目或实施。当实施被授权时，在添加任何技术栈或资产之前进行解释，并尊重项目的包管理器和锁文件。
诚实验证
对于实施或审查工作，使用 verification.md。检查移动端和桌面端截图、交互状态、触摸、键盘、焦点、减少动效、静态降级方案、加载和失败行为、性能证据，以及清理行为，其详细程度与变更规模相称。
准确报告实际运行了什么、通过了什么、视觉检查了什么以及仍有待验证的内容。切勿暗示运行了实际上未运行的构建、浏览器测试、可访问性检查、设备测试或性能测量。
参考来源
本指南是原创合成。请查阅 sources.md 获取权威文档和明确标记的社区灵感。不要通过此技能安装或执行第三方技能代码。