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

CDP 驱动 Electron 应用的 UI…

已验证全自动 CDP E2E 套路：① React 19 受控输入用原生 setter + 事件：Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype,'value').set.call(el,text); el.dispatchEvent(new Event('input',{bubbles:true}))；② antd Modal.confirm 确认按钮在 .ant-modal-confirm-btns .ant-btn-primary（不是 .ant-modal-footer），右键菜单用 dispat

多份 AI 生成的行情/数据 HTML 报表怎么客观评分…

不要看各自的交卷说明,自己重放四步再定分：①Playwright offline=True+file:// 打开每份,统计 DOM 行数/内嵌 payload 条数/JS 错误/外链数;②从**原始数据源**独立重算关键指标(如从日K重算 MA/RSI)与各份三方对照;③把各份自述(字节数/sha256/条数/声称的因子数)与文件实际逐条核;④逐字段对比权威源(如交易所行情接口)找数值硬伤。关键坑:自测只验「行数+JS报错+外链」抓不出数值错,必须做数值校验;成交量单位在 A股不同板块不统一(沪市/科创板手vs股差100倍)会让自算量比放大100倍而主板恰好蒙对,只看单列不报错就漏了。

需要查阅最新 Remotion 文档时：用 Algolia…

在开发或调试 Remotion 时，查找并阅读当前官方文档以确认概念和 API，而不是依赖记忆。

用 Remotion 开发视频项目时…

在 Remotion 项目中创建视频、搭项目、写标记、做地图/多媒体/字幕/渲染/SaaS/升级等任务时，先加载对应的专项参考文档再动手。

在 Remotion Studio 中让 Remotion…

适用于用 Remotion 制作视频并希望在 Remotion Studio 中直接点选、拖拽、调整大小/旋转、编辑 CSS 样式和关键帧的场景。

用 GSAP 为 Vue/Nuxt HUD 实现高性能…

在 Vue/Nuxt 项目中用 GSAP 实现 HUD 面板、状态指示、数据可视化和 ScrollTrigger 动画时，按 TDD、性能、可访问性和清理要求操作。

在 Next.js + TypeScript 项目中使用…

适用于需要免 schema、免代码生成、运行时类型安全的 Next.js API 开发。

在 React 项目里为卡片/按钮/输入框添加动画边框光束时…

适用于 React 18+ 项目中，为卡片、按钮、输入框或任意容器快速添加不阻塞交互的动画边框光束/发光效果。

使用 Astro 开发静态优先、部分水合网站时的完整实践

适用于用 Astro 构建静态生成、最小 JavaScript、可集成多框架组件的高性能网站。

在 React 项目中落地…

当项目已引入 @hairy/react-lib（v1.47.0）并需要用它的 hooks/组件实现异步、监听、生命周期、条件渲染、容错、事件总线、分页或请求拦截时使用。

在 Next.js 项目中用 Clerk…

适用于使用 Clerk 的 Next.js 应用：按服务端/客户端正确取鉴权信息，保护页面、API、Server Actions，并处理会话令牌、缓存和手动 JWT 验证。

使用 Bootstrap 开发响应式界面时，按网格、组件…

在基于 Bootstrap 构建响应式、可维护的 Web 界面时，用内置网格、组件和工具类替代自定义 CSS，并兼顾表单验证、性能与无障碍。

需要快速搭建 GSAP 滚动动画产品落地页并部署时用这个模板

当需要基于指定模板，用 React 19、Vite、GSAP、Tailwind CSS 4 快速创建静态产品落地页并部署到 Vercel 或 Netlify 时使用。

在 Next.js 16+ 中启用 Cache…

当 Next.js 16+ 项目需要部分预渲染、混合静态与动态内容，并用 use cache、cacheLife、cacheTag、updateTag/revalidateTag 管理缓存时使用。

用 GSAP 实现迪士尼十二动画原则：从挤压拉伸到时间线编排

在 GSAP 中制作角色、UI 或元素动画时，按迪士尼十二原则设置 tween/timeline、缓动、交叠与运动路径。