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

HTML内嵌JS补丁后语法验证降级

对HTML内嵌JS做增量patch易误删相邻声明行，浏览器不可用时用Node做语法级验证作为降级手段

界面改动必须读渲染后的真实 DOM 才算验过

改样式或交互后，「进程活着」「没有报错」「接口 200」都不算验过。必须打开真实界面读渲染后的 DOM，断言元素数量、布局结果、交互效果。

做前端设计先定视觉方向，别落进 AI 默认套路

AI 生成的页面会不自觉地聚成一类模板相（暖米色背景+衬线大标题+陶土色点缀、每块都是圆角卡片+同一层柔和阴影、每个标题上方都有全大写小标签）。开工前先写下这份设计针对「这个具体主题」的取舍，再动手写代码。

AI 生成前端/页面：避开 5 个一眼假的「模板套路」

AI 生成的网页设计容易撞几个固定套路，一眼被看出是 AI 做的。要做有辨识度的设计就得刻意避开这些默认选项。

Playwright 测动态网页：先等…

用 Playwright 自动化测试/抓取动态网页（React/Vue 等 JS 渲染）时，页面加载完成 ≠ DOM 就绪。没等 JS 执行完就去读元素，会拿到空 DOM 或找不到选择器。

当 React 组件 props 因 Storybook…

在 React 组件类型被 story、mock、测试或 demo 放宽后，按真实非测试调用点收窄 props 类型，并让支持代码适配严格契约。

使用 Rollup 打包…

适用于开发和配置 Rollup.js 来打包库或包，需要生成 ESM/CJS/UMD 等多种格式并优化 tree-shaking 的场景。

用 Angular + TypeScript…

在 Angular 项目中编写组件、服务、模板与测试时，提供类型安全、性能优化和安全实践的完整编码指引。

升级 Next.js 到最新版本：按官方迁移指南和…

当前项目需要升级 Next.js（含跨大版本）时，按官方指南、codemod、依赖更新和构建验证的步骤安全迁移。

写可维护 CSS 时：用现代布局…

适用于前端样式开发中需要组织可维护、响应式、可访问且性能良好的 CSS 代码的场景。

需要设计可扩展前端应用架构时：用组件分层、设计模式…

适用于大型前端应用从组件设计、状态管理、模块拆分、构建优化到测试与性能治理的架构规划与重构。

构建依赖上下文的动画时，按设备、距离…

适用于需要根据设备能力、移动距离、用户偏好或交互类型动态改变动画时长的界面动画。

Svelte 5 符文（runes）响应式状态、派生…

在 Svelte 5 中编写响应式状态、计算属性、副作用、Props 或从 Svelte 4 迁移时，用符文语法避免响应式错误。

开发 Nuxt 4（全栈 Vue/SSR）应用时…

当你在 Nuxt 项目中做 SSR、文件路由、useFetch、中间件、服务端路由或混合渲染时，按主题索引查阅对应参考文档并遵循 Nuxt 4 的目录与别名约定。

加载 Three.js 的 GLTF、纹理、HDR…

在 Web Three.js 项目中加载 3D 模型、纹理、HDR 环境贴图，并管理加载进度、缓存、错误和异步流程时使用。