用途：当可视化需要嵌入 React 或 Next.js 产品界面时使用，关注的不只是图表渲染，还包括组件归属、水合安全、服务端与客户端边界、打包策略，以及 React 与实际绘图层之间的集成。默认假设 React 负责结构、布局和应用状态，可视化层负责比例尺、几何和范围明确的命令式渲染。
适用场景：在 React 组件中构建图表；应用使用 Next.js、App Router 或服务端/客户端组件边界；在 React 中使用 D3、Canvas、SVG、Vega-Lite、Plot、WebGL、deck.gl、PixiJS、Sigma.js、Three.js；使用 Mermaid、React Flow、Cytoscape.js、Sprotty、JointJS、GoJS、ELK、Dagre、Graphviz/WASM、D2 等 UML 类图渲染器；水合、SSR、动态加载或仅浏览器 API 影响实现；打包体积、路由级加载和产品集成重要；编辑型视觉叙事页面。
主要做法：区分服务端安全部分与必须在浏览器运行的部分；分离数据加载、转换、图表配置与渲染层；估算同页可见图表实例数量及可共享的昂贵工作；显式建模 URL 承载的视图状态（过滤、范围、指标、对比、选中实体、标签页、地图边界、缩放、相机目标、下钻路径）；仅用 localStorage 存小型偏好，较大保存视图、草稿、缓存切片、注释或跨设备工作区用 IndexedDB 或远程存储，传入的 URL 状态应覆盖持久化默认值；对仅浏览器可视化代码使用动态加载或 client-only 边界；图表接管滚轮、捏合或拖拽时明确浏览器契约，需取消默认滚动时用非被动原生监听器，不能假设框架级 onWheel 足够。
Next.js 指引：无需浏览器 API 时优先用服务端组件取数、框定内容与布局；交互图表、容器测量、指针事件或仅浏览器库用客户端组件；图表运行时不在初始路径或需避免 SSR 时用动态导入；可分享视图状态尽量以路由参数或搜索参数为规范输入，在初始化客户端图表状态前解析并规范化；高频瞬态变更用 replace 式导航，已提交选择、已应用过滤、下钻步骤与保存视图切换用 push 式导航。移动端保持主可视化优先或立即可用，次级过滤、检查器与设置放入可折叠面板、抽屉、底部弹层或内联控件；密集工作区桌面端用大纲/控制栏、中央视口与检查器栏。必要时用 window.visualViewport 或等价 resize 处理，交互优先用 Pointer Events 并设置 touch-action、扩大命中区域、提供拖拽替代与重置。慎用 IntersectionObserver、Scrollama、Motion useScroll、GSAP ScrollTrigger、CSS scroll timelines 或显式步骤控件，默认视图仍应传达结论；优先原生滚动与 position: sticky；用 prefers-reduced-motion 将动画切换为最终状态、关键帧或分步布局；懒加载重型 WebGL、3D、视频或生成图像资产并预留宽高比避免布局偏移；离屏、路由隐藏、切走标签或减少动效时暂停 WebGL 动画循环。
输出期望：说明 React 与可视化层的归属边界；说明图表适合 SSR、client-only 还是动态加载；提及哪些状态由 URL、本地、IndexedDB、远程保存或刻意短暂；说明仅客户端或对水合敏感的代码、需要抑制原生滚动或滚动链的交互、默认折叠或可关闭的控件与活动状态保留方式；移动端在线数据连接行为（过期状态、重连、离线/部分数据、低带宽模式、告警）如相关则说明；新工作需含技术设计章节，覆盖同时实例数、每实例与页面级性能、所选集成模式的维护影响；设计保持打包体积、导出需求与无障碍可见。
代表提示：如何将此图表集成到 React 应用；此处 D3、Canvas 或 Vega-Lite 的正确 React 模式；让可视化在 Next.js App Router 中干净运行；构建带粘性图形与减少动效回退的 React 滚动叙事；该图表应为客户端组件还是用动态导入；帮助避免可视化的水合与 SSR 问题；构建交互式 React UML、ERD、流程、状态机、依赖或架构图。
限制：不涉及具体收费、价格或平台支持细节；相关内容（如测试、滚动叙事、UML 架构）在资料中指向其他技能文件，本技能不重复展开。