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

构建可复用 UI 组件库与设计系统时的组件模式与样式方案

在 React/Vue/Svelte 中设计可复用组件库、组件 API 或前端设计系统时，提供组合模式、CSS-in-JS 选型与最佳实践。

在 Capacitor 移动应用中使用 Tailwind…

当需要在 Capacitor 混合移动应用里用 Tailwind CSS 做移动优先样式、处理刘海/Home 指示条安全区、触控友好交互、深色模式与性能优化时使用。

在组合 Three.js、GSAP、React Three…

当需要在同一 Web 应用中集成多个 3D 渲染与动画库（Three.js、GSAP ScrollTrigger、R3F、Motion、React Spring）时，提供架构模式、状态管理与性能优化方案。

需要人工交互验证网页无障碍时：用浏览器驱动键盘、焦点…

对运行中的页面做半自动人工层 WCAG 无障碍检查（键盘操作、焦点顺序、a11y 树、重排缩放、动效、表单错误、目标尺寸），按证据等级和严重度分级并闭环台账，只定位评估不修复。

用 spf13/cobra 构建 Go CLI…

在 Go 项目中使用或采用 spf13/cobra（代码导入 github.com/spf13/cobra）构建 CLI 命令树时，按此做法组织命令、Run 钩子、Args 校验、flags、补全与测试。

用 Directory.Build 系列文件集中管理…

当需要在多项目 .NET 仓库中集中管理构建属性、包版本和 MSBuild 参数时，用 Directory.Build.props/.targets/.rsp 与 Directory.Packages.props 统一配置。

Blazor 跨组件共享状态：用级联值、DI…

当多个无直接父子关系的 Blazor 组件需要共享并响应式更新状态（主题、购物车、通知数、用户偏好）时，按作用域选择 CascadingValue、CascadingValueSource<T> 或作用域服务。

需要预制动画 React 组件时用 Magic UI 与…

在构建落地页、营销站点、仪表盘或交互式 UI 时，用现成的动画组件库替代手写 Framer Motion/GSAP 动画。

用 React Flow 构建节点式 UI…

在设计基于节点的流程图/工作流应用时，决定是否使用 React Flow、如何组织状态与集成、以及如何按节点规模做性能优化。

用 Spring Boot 3.x 构建 REST API…

在开发 Spring Boot 3.x 应用、微服务或响应式 Java 服务时，按分层结构实现控制器、服务、数据访问、安全与测试。

用浏览器自动化在多个视口宽度下检测网站响应式布局并定位断点问…

当需要检查网页在不同屏幕宽度下的布局表现、找出布局断裂的确切宽度时使用。

构建电商店面（结账/购物车/商品页/导航）时的最佳实践与后端…

在开发任何电商店面组件（结账、购物车、商品页、商品列表、导航、首页等）时，提供 UI/UX、SEO、移动端、后端集成与常见错误的完整实施规范。

用 Tailwind CSS…

在 Tailwind CSS 中构建复杂二维网格、圣杯布局、响应式卡片网格、容器查询、粘性/固定定位、滚动吸附、多列排版与打印样式时使用。

HTML内嵌SVG logo替换前预览分析

替换HTML内嵌SVG logo前，先提取渲染并分析颜色与bbox，确认视觉尺寸再改。

HTML多视口真机渲染验收

用系统python3的Playwright指定headless shell，跑桌面/移动双宽度检测横向溢出并截图验收。