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

需要框架无关的 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 表单和性能优化等问题。

为 Web 应用实现 PWA 离线、可安装…

当需要给 React/Svelte 等 Web 应用添加 PWA、离线支持、Service Worker、可安装能力，或修复缓存、更新、离线数据和 iOS 兼容问题时使用。

把教程/文章/视频/课程笔记转成可执行的…

当你有 YouTube 转录、文章、教程或课程笔记，想把它变成具体行动、首个可发布 rep 和后续迭代计划时使用。

前端任务选库：按精选清单为具体…

当需要为前端具体任务（如 toast、命令面板、OTP 输入、动画、图表、拖拽、虚拟列表、状态或样式）挑选并接入库时使用。