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

网页或 UI 状态切换需要平滑过渡动画且不想手写复杂动画时…

在浏览器支持的前提下，用 View Transitions API 动画化 DOM 状态变化、页面导航和共享元素过渡，并通过 CSS 与框架事件控制时序。

在 SEO 非优先、需要完全交互式单页体验的 React…

适用于内部工具、仪表盘或 SPA 等 SEO 非优先且需要无刷新交互的 React 应用。

页面以静态内容为主且只需局部交互时，用 Islands…

适用于博客、新闻、商品页等静态为主、局部交互的网站，并希望减少 JavaScript、优化 SEO 和首屏加载。

需要框架无关的 DOM/CSS/SVG/JS 对象时间线…

在 Vanilla JS 或任意前端框架中需要轻量时间线、stagger、SVG 路径动画、关键帧编排时使用 Anime.js。

用 Suspense + 流式 SSR 做选择性…

在 React 18+ 的 SSR 页面中，当慢的数据获取组件拖慢整棵树生成与首个可交互时间时，用流式 SSR 加选择性 hydration 优先让已到达的组件可交互。

用 Three.js 加载配置纹理…

在 Three.js 中加载/生成各类纹理（颜色、数据、立方体、HDR、程序化）、配置色彩空间与过滤、做 UV 映射与图集、管理显存时使用。

构建交互式 Three.js WebGL/WebGPU…

在浏览器中开发交互式 3D 场景、产品配置器、3D 可视化或沉浸式 Web 体验时，用 Three.js 组织场景、相机、渲染器、材质、灯光、动画与性能优化。

用 React 组件构建、预览、渲染并发送 HTML 邮件

当需要用 React 组件编写 HTML 邮件模板（欢迎、密码重置、通知、订单确认、新闻信等事务邮件），或为应用嵌入可视化邮件编辑器时使用。

构建或评审现代 Web UI 时，用于提升可访问性…

适用于创建或审查用户界面，遵循现代 Web 标准来提升可访问性、性能与用户体验。

建立页面结构时定义响应式布局网格：统一列数、间距…

在建立页面结构时，定义跨断点一致且灵活的响应式网格系统。

编写或审查 React useEffect…

在编写或审查 React 组件中的 useEffect、派生状态、数据获取或状态同步时，判断何时需要 Effect 以及更好的替代方案。

启动或现代化 React 项目时选择并落地 2026 现代…

适用于新建 React 应用或升级旧项目时，按 SSR/SEO、SPA、路由、状态、构建、测试与 AI 集成需求落地现代 React 栈。

在 Vue/Svelte/Nuxt…

在 Vue、Nuxt、Svelte、SvelteKit 或其他带 mount/unmount 生命周期的组件框架里，安全地创建并清理 GSAP 补间与 ScrollTrigger。

在 Vue 3 / Nuxt 4 项目中集成…

当你用 TailwindCSS v4 + motion-v/GSAP/Three.js 给 Vue 或 Nuxt 项目做动画落地页、Hero 区、3D 可视化、交互式背景与光标特效时，按此流程安装、配置并复制组件。

在 React 18+/19、Next.js App…

适用于构建 React 18+ 应用（.jsx/.tsx、Next.js App Router、create-react-app），解决组件创建、自定义 Hook、状态管理、渲染调试、类组件迁移、Server Components、Suspense、useActionState 表单和性能优化等问题。