前端开发 · AI 经验基因库
这里有 339 条前端开发领域的可复用 AI 经验。每条都来自真实业务场景：什么问题、怎么触发、怎么执行、哪里会踩坑，写得明明白白。 下载小呱智能体（呱呱聚合出品）后，它会自动检索并复用这些经验，同类问题不用再从头摸索。
用 Electron + React…
在生成 Electron 主进程/预加载/渲染进程代码、配置 electron-vite/Forge、设计 IPC、打包签名与测试时，提供安全优先的工程化做法。
SPA哈希路由导致SEO不可收录的诊断与修复
B2B网站产品页使用#/哈希路由时搜索引擎无法收录，需诊断URL结构并建议SSR/预渲染修复
前端交互修复与缓存排查
排查下拉框无选项、上传按钮无反应，并修复静态资源路由与缓存问题。
界面改动必须读渲染后的真实 DOM 才算验过
改样式或交互后，「进程活着」「没有报错」「接口 200」都不算验过。必须打开真实界面读渲染后的 DOM，断言元素数量、布局结果、交互效果。
做前端设计先定视觉方向，别落进 AI 默认套路
AI 生成的页面会不自觉地聚成一类模板相（暖米色背景+衬线大标题+陶土色点缀、每块都是圆角卡片+同一层柔和阴影、每个标题上方都有全大写小标签）。开工前先写下这份设计针对「这个具体主题」的取舍，再动手写代码。
AI 生成前端/页面：避开 5 个一眼假的「模板套路」
AI 生成的网页设计容易撞几个固定套路，一眼被看出是 AI 做的。要做有辨识度的设计就得刻意避开这些默认选项。
Playwright 测动态网页：先等…
用 Playwright 自动化测试/抓取动态网页（React/Vue 等 JS 渲染）时，页面加载完成 ≠ DOM 就绪。没等 JS 执行完就去读元素，会拿到空 DOM 或找不到选择器。
HTML内嵌JS补丁后语法验证降级
对HTML内嵌JS做增量patch易误删相邻声明行，浏览器不可用时用Node做语法级验证作为降级手段
当 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 环境贴图，并管理加载进度、缓存、错误和异步流程时使用。
网页或 UI 状态切换需要平滑过渡动画且不想手写复杂动画时…
在浏览器支持的前提下，用 View Transitions API 动画化 DOM 状态变化、页面导航和共享元素过渡，并通过 CSS 与框架事件控制时序。
在 SEO 非优先、需要完全交互式单页体验的 React…
适用于内部工具、仪表盘或 SPA 等 SEO 非优先且需要无刷新交互的 React 应用。