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

Web/前端应用直接调用 AI 模型时，用…

当 React/Vue/Next/Nuxt/静态站点/SPA/仪表盘/AI 聊天 UI 等浏览器端应用需要接入 AI 文本生成或流式输出时，用 @cloudbase/js-sdk 从浏览器直接调用模型，并在写代码前完成资格与分组就绪检查。

在 Nuxt 项目用 @nuxt/content…

当项目已安装 @nuxt/content，需要处理 content.config.ts、collections、queryCollection、Markdown/MDC 渲染、内容数据库、hooks、自定义 source、搜索或 Content v2 迁移时使用。

SSR 页面非关键区域交互延迟：用渐进式…

当服务端渲染页面包含非关键、无需立即交互的区域时，用渐进式 hydration 延迟这些区域的 JS 与 hydration，优先让关键区域可交互。

在 React/React Native/Ink 中构建…

面对 assistant-ui 的高层、跨领域或架构问题，需要选择包、选择 runtime 或理解 elements/primitives/aui client/runtime/adapters 分层与消息模型时使用。

在 React Three Fiber 中配置纹理颜色空间…

适用于 React Three Fiber/Three.js/Drei 项目中需要正确处理颜色贴图与数据贴图、UV 通道、采样、视频纹理、渲染目标和纹理缓存/释放的场景。

在 Web/React/Vue/Svelte 中实现…

需要在网页或前端框架中渲染设计师产出的 After Effects 动画、加载动画、图标微交互，并支持播放、暂停、跳转、滚动、悬停控制时使用。

在 PixiJS v8 中用 blendMode…

当需要在 PixiJS v8 中用 GPU 混合或滤镜方式合成 Sprite/Container，并优化批处理与避免静默回退时使用。

在 json-render 的 Svelte 应用中使用…

当需要为 @json-render Svelte 应用添加标准 shadcn-svelte UI 组件并配置 catalog/registry 时使用。

为 headless VTEX 店铺设计 BFF 层并保护…

适用于任何与 VTEX API 通信的 headless storefront、移动应用或 kiosk，用于建立服务端 BFF、分类公私 API、安全管理 VtexIdclientAutCookie 和 API key。

在增强 Next.js 应用视觉设计时，用现代组件、配色…

适用于需要美化 Next.js/React 前端界面、统一设计系统、增强响应式与可访问性的场景。

需要从 vite-flare-starter…

适用于以 Cloudflare Workers 为目标、希望用 vite-flare-starter 开箱即用模板快速获得带认证、数据库、对象存储和 AI 的全栈应用。

需要滚动触发动画、钉住区块、scrub 或视差时，用…

适用于实现滚动驱动动画：进入/离开视口触发 tween/timeline、把动画进度绑定滚动、固定区块、伪横向滚动和视差。

Angular 路由技能已弃用：改用官方…

当你准备依照某个 Angular 路由技能配置懒加载、函数式守卫、解析器或路由参数，却可能用到已停止维护的过时内容时，用来切换到官方维护的技能包。

用 Next.js 16 + shadcn/ui…

在用 Next.js + shadcn/ui 搭前端（新建项目、加 UI 组件、样式化页面、写 App Router 数据/缓存/Server Actions 代码）时，按这套约定与命令执行。

设计或审查 Three.js 游戏 HUD、菜单…

当你为 Three.js 游戏设计或检查 HUD、菜单、暂停/胜负/设置/加载等界面，并需要响应式、安全区、文本适配和触控可用性时使用。