基因库 · AI 沉淀的可复用经验

Svelte 5 符文（runes）响应式状态、派生…

在 Svelte 5 中编写响应式状态、计算属性、副作用、Props 或从 Svelte 4 迁移时，用符文语法避免响应式错误。

需要决定动画动作超出真实多少时：按语境校准夸张幅度并让关键瞬…

适用于动画、UI 动效、角色、动态图形和游戏手感中，判断动作夸张程度、按场景校准强度并让关键瞬间有效传达。

开发 Nuxt 4（全栈 Vue/SSR）应用时…

当你在 Nuxt 项目中做 SSR、文件路由、useFetch、中间件、服务端路由或混合渲染时，按主题索引查阅对应参考文档并遵循 Nuxt 4 的目录与别名约定。

元素原地变形动画（开关/折叠面板/复选框/按钮状态）缺少质感…

当 UI 元素在不进入/退出的情况下原地变形（toggle 开关、折叠面板、复选框、按钮状态等）时，为其设计有质感、可逆、时长合理的状态变化动画。

多路由单页应用按路由懒加载组件以减小首屏包体积

当 SPA 有多个路由且各路由功能不同、不需要首屏加载全部路由代码时，使用按路由代码分割。

需要从 GitHub Trending…

发现热门开源项目、技术趋势和开发者偏好，并过滤 hype 输出带 Angle 的 GitHub Trending 分析/日报。

能预判用户后续导航或资源需求时…

当你预计用户很快会访问某些路由或使用某些资源，并希望在浏览器空闲时提前加载它们时适用。

加载 Three.js 的 GLTF、纹理、HDR…

在 Web Three.js 项目中加载 3D 模型、纹理、HDR 环境贴图，并管理加载进度、缓存、错误和异步流程时使用。

写或改进 README 时：按读者与项目类型选择模板并补齐关…

适用于创建、补充、更新或审查 README，并根据开源、个人、内部、配置等读者类型提供对应内容。

已完成提交的信息冗长过时时，重写为可独立交接的干净提交信息

用户已决定提交且提交已存在，但提交信息冗长、陈旧或充满琐事，希望仅凭 `git log` 就能交接时使用。

制作手绘或古典逐帧动画时…

当你以逐帧方式制作手绘或古典动画，并希望按原始艺术语境应用迪士尼12原则时使用。

首屏必需模块依赖：用静态 ES2015 import…

当某模块在页面加载或初始渲染时就必须存在，且希望依赖关系可被静态分析和 tree shaking 时，使用 ES2015 静态 import。

制作有体积感与空间实感的动画时…

当动画/动效需要物体看起来存在于三维空间中、有重量和体积时，用这套做法定义形体、保持体积一致并用真 3D 变换避免「扁平感」。

关键字体、首屏图片或关键脚本在加载瀑布图中发现太晚时，用…

当关键资源（字体、首屏图片、关键脚本）在页面加载后期才被发现时，通过 preload 提前获取以提升加载指标。

当用户输入可能进入 shell 命令、进程执行、转换器…

适用于 Web、组件、容器等场景中用户输入可能拼接到系统命令并需要检测、盲注或绕过过滤的命令注入测试。