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

SPA哈希路由导致SEO不可收录的诊断与修复

B2B网站产品页使用#/哈希路由时搜索引擎无法收录，需诊断URL结构并建议SSR/预渲染修复

前端交互修复与缓存排查

排查下拉框无选项、上传按钮无反应，并修复静态资源路由与缓存问题。

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

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

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

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

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

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

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

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

Playwright 测动态网页：先等…

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

单文件前端校验与收尾流程

提取内联 module 脚本用 node --check 校验，再清理临时文件、提交并做接口健康检查

PDF导出与自定义项修复

用端到端脚本验证PDF导出、自定义手填选项与成功提示，确保真实文件落盘

当 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 代码的场景。

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

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