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

用 React Server Components…

当组件只需服务端数据访问、不需要客户端状态或事件处理时，用 RSC 实现零包体积的服务端渲染。

升级 React 应用并迁移类组件到 Hooks 时如何操作

在现代化 React 代码库、迁移到 Hooks 或升级到最新 React 版本时使用。

在 PixiJS v8 应用中添加屏幕阅读器与键盘导航无障碍…

当需要让 PixiJS v8 画布内容被屏幕阅读器和键盘用户访问时，通过 AccessibilitySystem 创建影子 DOM 覆盖层并配置可访问属性。

React 组件渲染变慢或频繁重渲染时…

当需要分析或优化 React 组件性能（渲染慢、重渲染抖动、列表卡顿、计算昂贵）时使用。

生成高端网站设计参考图时…

为落地页/营销站/产品页生成可被开发者或编码模型还原的高端前端设计参考图时，按每个区块单独出图并强制构图、背景、CTA多样化。

用 React Spring 与 Popmotion…

在 React 中构建自然、可中断、带惯性的物理弹簧动画与手势驱动界面时使用。

Three.js 浏览器游戏发布前的可验证 QA 与构建流程

在发布 Three.js 浏览器游戏前，用可测量的画布检查、机器人试玩、移动端与响应式验证、生产构建和风险报告来证明游戏真的能玩、能发布。

构建/升级 Three.js…

当你需要从零构建、升级或打磨 Three.js 浏览器游戏（含 premium/AAA/发布级要求）时，用这套流程统筹玩法、美术、UI、资产生成、调试与发布验收。

用 Nuxt 3 + Vue 3 + TypeScript…

在搭建或维护 Nuxt 3 / Vue 3 + TypeScript 项目时，指导代码组织、命名、类型、UI、性能与 Nuxt 专属约定。

在 Web Worker、Node/SSR 或严格 CSP…

当 PixiJS v8 需要脱离标准浏览器运行（Web Worker、OffscreenCanvas、Node/SSR、CSP 限制）时，用 DOMAdapter.set 切换适配器并处理 CSP 与 DOM 依赖问题。

用 Remotion 把文章/脚本做成 16:9…

当用户提供文章、脚本、笔记或清晰大纲，想要生成帧精确的 16:9 视频文件（mp4）而非点击式网页演示时使用。

PixiJS v8 文本渲染选型与性能优化：按更新频率和样式…

在 PixiJS v8 中渲染文本时，根据样式复杂度、更新频率和逐字动画需求选择合适的文本类并避免性能陷阱。

在 React/Next.js 中用 Framer…

在 React 或 Next.js 中编写/审查 Framer Motion 动画代码时，处理挂载卸载动画、布局动画、程序化控制与 SSR 兼容。

构建可复用 UI 组件库与设计系统时的组件模式与样式方案

在 React/Vue/Svelte 中设计可复用组件库、组件 API 或前端设计系统时，提供组合模式、CSS-in-JS 选型与最佳实践。

在 Capacitor 移动应用中使用 Tailwind…

当需要在 Capacitor 混合移动应用里用 Tailwind CSS 做移动优先样式、处理刘海/Home 指示条安全区、触控友好交互、深色模式与性能优化时使用。