用途:该技能用于 research-wiki vault UI 的动态设计、实现与评审,尤其是 Reels/Capture 模式(?capture=1)、apps/vault-ui/frontend/src/components/GraphView.tsx 中的语义图谱动画、src/styles.css 中的 HUD/字幕动效,以及短视频演示中需要吸引注意但不让工具显得花哨的场景。
核心规则:动效必须解释图谱,不得装饰屏幕。只允许附着于 node(当前概念聚光、选中论文聚焦、度数/簇强调)、link(手动链接流、相似边点燃、邻域绽放)、camera(克制的缩放适配、宏观到微观聚焦,无激进平移)、HUD(细微指标/字幕脉冲、进度状态,无全屏特效)。若动效无法回答揭示了什么研究关系,则不应加入。
硬性禁止:全屏扫描/扫掠叠加、故障效果、随机装饰粒子、背景闪光、散景/光斑装饰、全局节点闪烁、快速镜头甩动/平移/缩放、在 captureMode 为 false 时影响普通图谱模式,以及无截图支持的“看起来不错”断言。
方向选择:在多个动效概念间选择时,先用 anneal 式评分。起草 2–3 个候选并在同一夹具上评分:Question、Scale,包括首 2 秒钩子(静音竖屏可见变化,0/1/2)、研究价值、语义附着、克制性、捕获稳定性、运行时健康(pass/fail)。按分数选择,接近平分时用品味打破。
首选模式:概念聚光、链接绽放、相似边点燃、核心坍缩、宏观到微观聚焦、工作流叙事。关键阶段不短于 2.5 秒,适配手机录制。
实现护栏:编辑前遵循仓库 GitNexus 影响规则。GraphView.tsx 优先用 canvas 局部辅助函数如 drawCaptureSpotlight() 与 captureLinkParticleCount(),动效置于 captureMode 或捕获步骤条件下,保留拖拽结束固定行为,仅用户拖拽可设 fx/fy,不得仅因稳定镜头自动固定节点,除非 DOM/SVG 时间线明确需要,否则不新增动画依赖。styles.css 保持捕获布局全屏安静,HUD/字幕可轻微脉冲,不得重新引入 .capture-graph::before 扫掠或 captureSweep,隐藏控件需 pointer-events: none。App.tsx 保持 ?capture=1 可分享可复现,若为用户进入需提供退出路径(Exit 和/或 Esc),不得将捕获模式设为默认体验。
验证:cd apps/vault-ui/frontend;npm run test:graph-physics;npm run build;npm run test:smoke。运行时视觉检查需覆盖普通图谱模式、?capture=1 的 9:16 视口各阶段、以及移动宽度。记录 consoleErrors、pageErrors、failedRequests、badResponses 均为空,canvas 非空,无文字/HUD/字幕重叠,无全屏扫描扫掠动画。若涉及后端静态服务或全仓库代码,另跑 uv run pytest、npx gitnexus detect-changes、git diff --check。评审以发现优先,视觉成功需截图、命令与普通模式正常性佐证,剩余视觉风险需说明。