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

构建生产级可访问响应式前端 UI 时，用组件化、设计系统与…

在开发或修改用户界面、组件、布局、交互与状态时，按设计系统、WCAG 2.1 AA 和响应式标准交付，避免通用 AI 美感。

在 Blazor 中构建表单、校验输入并响应交互（含…

当需要在 Blazor 中添加表单、搜索框、筛选面板、内联编辑、数据录入、文件上传、校验与提交处理时使用。

Angular Signal Forms 已弃用，改用官方…

当你准备在 Angular v21+ 中构建基于 signal 的表单时，不要使用本已弃用技能，而应安装官方 Angular skills。

Three.js 浏览器游戏调试与性能剖析：定位空白画布…

当 Three.js 游戏出现空白画布、渲染或运行时错误、资源/音频加载、动画、输入、移动端或性能问题时，按顺序排查根因并基于实测数据优化。

PixiJS v8 中处理指针/鼠标/触摸/滚轮交互时的事件…

在 PixiJS v8 中为显示对象启用并处理指针、鼠标、触摸、滚轮事件，包括 eventMode 设置、事件传播、命中测试、拖拽与光标样式。

部署 Next.js 应用到生产环境（Docker 容器化…

当需要将 Next.js 应用容器化部署到生产环境、搭建 GitHub Actions CI/CD、管理环境变量、实现健康检查与 OpenTelemetry 监控时使用。

需要实现移动优先、跨设备自适应的前端界面时，用响应式布局…

适用于从手机到超宽屏、横竖屏、触摸/悬停设备、暗色模式和打印场景的响应式前端界面开发。

React Three Fiber 场景交互实现：指针拾取…

在 React Three Fiber 中实现对象选择、拖拽、键盘移动和相机控制等场景交互时使用。

PixiJS v8 应用性能优化：定位瓶颈后按需应用销毁…

当 PixiJS v8 应用出现 FPS 下降、卡顿、draw call 过多或 GPU 内存泄漏时，先做性能剖析再针对性优化。

用 Angular 17+ 独立组件、Signals…

在开发 Angular 17+ 企业级应用时，提供从组件设计、状态管理、路由、性能优化到测试的完整架构与实现规范。

PixiJS v8 资源加载与缓存管理：用 Assets…

在 PixiJS v8 中需要加载、缓存、分组、后台预载或卸载纹理、视频、字体、图集等资源时使用 Assets API。

用 Three.js/R3F 做 3D 动效时如何保证…

在网页中构建实时 3D 场景、GLTF 动画、滚动联动相机、实例化渲染与 React Three Fiber 动效，并做好性能优化与 GPU 资源释放。

Angular 测试技能已弃用，改用官方 Angular…

当你需要为 Angular v20+ 应用编写单元/集成测试，或正在使用已弃用的 angular-testing 技能时，应迁移到官方 Angular skills。

有视觉上下文（元素选中/标注/截图）时做最小化 UI 修改

当用户通过可视化选中元素、画标注或提供截图来提出前端改动需求时，精准地只改被指出的部分。

React 应用状态管理选型与落地：从本地状态到全局状态和服…

在 React 应用中搭建全局状态、管理服务端数据，或在 Redux Toolkit、Zustand、Jotai、React Query 之间做选择时使用。