人工智能AI Agent代码智能体多智能体MCP ClientsAgent 编排【免费下载链接】oh-my-openagentOmO: Just type mass ulw keyword with your prompt. Now you are the master of graph engineering.项目地址https://gitcode.com/gh_mirrors/oh/oh-my-openagent点击查看免费下载导读本文以 oh-my-openagent 仓库中 frontend 技能规则的 perfection 规则集 为骨架完整讲解其核心主张任何前端页面都必须在真实浏览器环境中、以移动端与桌面端双预设达到 Lighthouse 四项Performance / Accessibility / Best Practices / SEO全部 100 分且不得以牺牲任何 UX 质量为代价。读完本文你将掌握一套可直接落地的「生产构建 → Playwright 驱动真实 Chrome → Lighthouse 审计 → React 渲染层双重门禁 → 根因修复」闭环流程并能在 CI 中将其固化为硬性阈值。一、该规则集在 oh-my-openagent 中的定位在 oh-my-openagent 的 shared-skills 体系中frontend 技能是一个「路由器而非规则书」其路由规则定义在 SKILL.md。任何涉及「编写或修改前端代码或审计性能 / SEO / 可访问性 / 质量」的请求都会被路由到references/perfection/README.md其原文路由表明确写着Writing or modifying frontend code, OR auditing performance / SEO / accessibility / quality → ALSOreferences/perfection/README.md。Lighthouse 100 in every category, measured on real Playwright Chromium (never thelighthouseCLI), achieved through architecture — never by dropping animations or hiding content.同时 SKILL.md 强调「design perfection 必须同时加载」Beauty with a 2 MB bundle fails; Lighthouse 100 that looks like AI slop fails. Both win or neither does.漂亮但 2MB 的包会失败Lighthouse 100 但长得像 AI 套壳垃圾同样失败。要么双赢要么双输。这正是 perfection 规则集第 5、6 条信条与 design 规则集联动的直接来源。整个规则集位于packages/shared-skills/skills/frontend/references/perfection/目录由两份文档和一个配套脚本组成文件作用perfection/README.md主规则集七大信条、审计工作流、根因清单、反模式、响应格式perfection/react-perf-tooling.mdReact 专属工具链react-scan / react-doctor 与 Playwright 的集成配方perfection/lighthouse-audit.py跨平台 Python 审计 CLI 的仓库级实现二、七大信条不可妥协的行为准则1. 必须通过真实浏览器审计绝不使用 CLIlighthouseCLI 默认运行的是chrome-headless-shell它不是你用户看到的东西它产生的数字会骗你。任何基于 CLI 的报告都必须被拒绝即使 CI 显示绿灯。正确的路径分四步生产模式构建应用next build next start、vite build vite preview、astro build astro preview、bun run build bun run start绝不对 dev server 做测量用channel: chrome启动 Playwright真实 Chrome stable而非 headless-shell 二进制通过playwright-lighthouse或chrome-launcherlighthouseNode API 运行 Lighthouse并挂接到 Playwright 的 CDP 端点——这样 cookie、登录态、预热缓存都能镜像真实回访用户所见用mobile 预设4x CPU 节流、Fast 3G作为主数字desktop 预设作为次数字两个都上报。这一信条在仓库中有完整的脚本级实现packages/shared-skills/skills/frontend/scripts/perfection/lighthouse-audit.py的 docstring 明确重申「NEVER uselighthouseCLI (uses headless-shell, not real Chrome)」其_run_with_playwright函数通过p.chromium.launch(channelchrome, headlessTrue, args[--remote-debugging-port0])启动真实 Chrome再从 WebSocket 端点解析出 CDP 端口交给内嵌的 Node 端 Lighthouse runner 执行审计见 lighthouse-audit.py。如果当前会话没有加载playwright技能应通过skill工具立即加载。2. 每项 100 分是地板不是目标99 分就是回归95 分就是火灾。你不能把「performance 93, accessibility 100, SEO 100, best-practices 100」当作通过——你要诊断是哪个审计项吃掉了那 7 分修复根因重跑直到移动端和桌面端四个面板全部 100 才上报。3. 在架构层面赢得分数性能在架构与代码质量层面就已注定包体积、渲染路径、水合策略、资源管线、图片格式与尺寸、字体加载、第三方脚本、关键 CSS、延迟 JS、路由级代码分割——这些才是撬动分数的杠杆。给 hero 图加个loadinglazy不是优化是恐慌。对每一个失败的审计项都必须追溯到具体的一行代码或一个具体的构建配置决策从源头修复不许贴创可贴。4. 绝不为凑分削弱 UX如果某个修复移除了 hover 状态、丢掉了 CSS 过渡、把带动画的挂载换成生硬闪现、把平滑滚动到视野换成瞬间跳转、把 60fps 交互降级到 30fps、或隐藏了你本来会渲染的内容——拒绝这个修复。产品的动画语言、动效设计与触感是承重墙。应该换这些思路进一步拆分 bundle先路由级再组件级再 feature-flag 级把非关键的绘制工作推迟到requestIdleCallback用 Web Worker 把重活移出主线程用 Comlink 提升开发体验跨路由过渡用View Transitions API屏外区块用content-visibility: autocontain-intrinsic-sizewill-change要精准只加在真正动画的那个属性上、且只在动画持续期间预加载 LCP 图片link relpreload asimage fetchpriorityhigh imagesrcset...关键 chunk 用 HTTP/2 server-push 或link relmodulepreload只做 GPU 合成动画transform、opacity、filter绝不动画width、height、top、left、margin、padding。5. 必须同步加载设计规则集任何视觉或布局工作都必须同时阅读设计规则集 design/README.md。该技能承载品牌级品味参考Apple、Stripe、Linear、Vercel、Claude、Notion、Airbnb、Figma 等和反 AI 套壳垃圾的立场。一个拿 100 分却长得像 AI SaaS 垃圾的页面是失败的。速度服务于设计设计骑乘在速度之上要么双赢要么双输。使用设计规则集的时机写 JSX/CSS之前拉取相关品牌参考来锚定视觉方向实现过程中对照反套壳护栏交叉检查宣布完成之前验证页面通过设计品味门槛而不只是 Lighthouse 门槛。6. 设计系统合规不可选design 规则集强制一道Phase 0 设计系统门——任何 UI 工作开始前项目必须先有DESIGN.md见 design/README.md 的 Phase 0 章节。本技能负责另一侧每次审计都必须验证合规性。Lighthouse 分数通过后还要跑设计系统合规检查颜色grep 代码库中未在DESIGN.md声明的裸 hex/rgb 值每个都是一次违规字体排印CSS/Tailwind 中每个 font-size 都必须映射到DESIGN.md的字体阶不允许随意尺寸间距每个 margin/padding/gap 都必须是基准单位4px的倍数理想情况下使用声明的 token组件任何被使用 2 次以上的组件必须记录在DESIGN.md第 5 节没有就补上深度如果DESIGN.md说「只用边框」那么box-shadow声明必须是零如果说「色调迁移」那么表面分隔就不能用边框。一个 Lighthouse 100 分但用了 14 个未声明 hex 码和 8 个魔法间距值的页面不算完成。设计系统就是架构Lighthouse 测量的是该架构的性能。7. React 专属性能工具是审计的一部分如果项目使用 React单靠 Lighthouse 看不到组件粒度的渲染层问题。还必须运行react-doctor静态成本最低。在任何浏览器审计前先跑npx react-doctorlatest --json把 perf 类发现当作审计失败处理react-scan/lite运行时、无头在 Playwright 运行中通过page.addInitScript注入排空其onEvent流若存在任何被归类为unnecessary的 commit 即判审计失败。完整的配方——包括 Playwright playwright-lighthousereact-scan/lite的集成、每路由渲染预算断言、以及扩展了下方清单的 React 专属根因清单——存放在 react-perf-tooling.md。任何 React 审计前必须先读它。Lighthouse 100 但react-scan报告每路由 30 次不必要渲染不算完成。两个门都必须通过合成分数和渲染质量。如果 React 层在抖动真实负载下合成分数会撒谎。三、审计工作流方式一跨平台 Python CLImacOS / Linux / Windowsuv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000 uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000 --threshold 95 uv run $SKILL_DIR/scripts/perfection/lighthouse-audit.py https://localhost:3000 --desktop-only其中$SKILL_DIR即仓库中的 packages/shared-skills/skills/frontend。该脚本的仓库实现细节值得展开lighthouse-audit.py它是uv run --script内联依赖脚本requires-python 3.11依赖playwright、typer、rich前置条件本机已安装 Chrome stable脚本使用channelchrome不会下载浏览器并具备node与全局lighthouse/chrome-launcher——脚本启动时会用node -e require(lighthouse); require(chrome-launcher)探测缺失则自动npm install -g lighthouse chrome-launcher默认执行 mobile desktop 两次审计可用--desktop-only/--mobile-only跳过其一--threshold默认 100内嵌的 Node runner 配置LIGHTHOUSE_RUNNER_JS可佐证预设细节mobile 走默认节流4x CPU、Fast 3Gdesktop 显式设置rttMs: 40, throughputKbps: 10240, cpuSlowdownMultiplier: 1与1350x940屏幕仿真onlyCategories限定为 performance / accessibility / best-practices / seo 四项输出用 rich 表格打印每项分数与 PASS/FAIL 状态任何一项低于阈值即以退出码 1 结束——这正是「未达标就不算完成」的脚本化表达lighthouse-audit.py。方式二测试套件内的 TypeScript 集成// scripts/audit.ts import { chromium } from playwright; import { playAudit } from playwright-lighthouse; const browser await chromium.launch({ channel: chrome }); const context await browser.newContext(); const page await context.newPage(); await page.goto(http://localhost:3000/route); await playAudit({ page, port: 9222, thresholds: { performance: 100, accessibility: 100, best-practices: 100, seo: 100 }, reports: { formats: { html: true, json: true }, name: lighthouse-route }, config: { extends: lighthouse:default, settings: { formFactor: mobile } }, }); await browser.close();三条流程纪律每条路由跑两遍一遍formFactor: mobile一遍formFactor: desktop两遍都必须 100/100/100/100从 JSON 报告诊断而不是 HTML用程序解析audits[*].score 1找出问题项不要肉眼盯着 HTML 报告看跑 3–5 次取中位数单次审计可能噪声很大CI 必须在每个 PR 上强制执行阈值。四、根因清单优先命中这些几乎总是元凶关键路径上的阻塞渲染 JS/CSS延迟加载、按路由代码分割、只内联关键 CSS未定尺寸的媒体每个img、video、iframe必须有显式width/height或 aspect-ratio 容器否则会造成 CLS错误的图片格式或尺寸优先 AVIFWebP 兜底JPEG 最后在构建时生成所有响应式尺寸绝不发送比渲染框更大的图片LCP 图片加fetchpriorityhigh字体font-display: swap是底线非关键字体用optional预加载唯一的关键字体子集化到实际用到的字符head中同步加载的第三方脚本延迟、首次交互时懒加载或者代理到自有域名把第三方 DNS TLS 握手移出关键路径不需要水合的路线强行水合React Server Components、islands、client:load只放在交互真实存在的地方静态路由零 JS缺少语义化 HTML按钮用button链接用a href地标用nav/main/header/footer每个表单输入都有 label每个有意义的图片都有 alt 文本每条路由有唯一titleTab 顺序、焦点环、对比度、prefers-reduced-motion、ARIA 正确性Accessibility 100 意味着屏幕阅读器用户可以在没有帮助的情况下端到端驱动页面Meta 标签title、meta namedescription、OpenGraph、Twitter cards、结构化数据JSON-LD、html上的lang、viewport、canonical URL。五、反模式见一个拒一个反模式拒绝对策上报 CLI Lighthouse 分数拒绝。见信条 1为修 INP 删动画拒绝。改用 CSS-only 的 transform/opacity 动画防抖监听器把重活移出主线程用占位图替换 hero 图来修 LCP拒绝。正确修法是合适尺寸的 AVIF fetchpriorityhigh preconnect 图片 CDN为拿 100 分禁用某路由的 JS拒绝。要在 JS 启用的生产构建上、在真实用户设备配置下拿 100给屏外内容设display: none躲避审计拒绝。用content-visibility: auto加正确的懒挂载绝不对页面撒谎单次审计后宣布胜利拒绝。跑 3–5 次取中位数CI 强制执行阈值在 localhost 拿 100 就不重新测量部署 URL 直接上线拒绝。CDN、真实 DNS、真实 TLS 握手都算数六、React 项目的双重门禁react-scan / react-doctor两种工具的定位工具形态给你什么react-scanreact-scan/lite运行时插桩、无头每个 fiber 的commit事件及changeDescription——这个组件因为 prop / state / context / parent / hook 变了而重渲染。可与long-animation-frame关联把 LoAF 归因到具体组件react-doctor静态扫描、CI 友好跨 state/effects、perfmemoization、列表 key、昂贵 children、架构、安全、a11y 的确定性发现。npx react-doctorlatest一次性产出 JSON 报告。出自 Million.dev 团队两者互补react-scan告诉你此刻什么慢react-doctor告诉你结构上什么错。二者都是仅开发期且免费的。Lighthouse 运行 react-scan/lite 的规范集成核心要点必须在 React 挂载之前通过page.addInitScript注入react-scan/lite用page.evaluate会晚于 React 挂载错过所有首次渲染事件然后在运行期间排空其onEvent流结束时对渲染预算做断言// scripts/audit-with-react-scan.ts import { chromium } from playwright; import { playAudit } from playwright-lighthouse; const browser await chromium.launch({ channel: chrome }); const context await browser.newContext(); // 在 app 启动前注入 react-scan/lite await context.addInitScript(() { // ts-ignore — pulled from the projects node_modules or a self-hosted bundle import(react-scan/lite).then(({ instrument }) { (window as any).__renderEvents []; instrument({ onEvent: (event: any) { if (event.kind commit) (window as any).__renderEvents.push(event); }, recordChangeDescriptions: true, includeFiberSource: true, includeFiberIdentity: true, }); }); }); const page await context.newPage(); await page.goto(http://localhost:3000/route); await playAudit({ page, port: 9222, thresholds: { performance: 100, accessibility: 100, best-practices: 100, seo: 100 }, reports: { formats: { html: true, json: true }, name: lighthouse-route }, config: { extends: lighthouse:default, settings: { formFactor: mobile } }, }); // 拉取渲染事件并对渲染质量做断言 const events await page.evaluate(() (window as any).__renderEvents); const unnecessary events.filter((e: any) e.tree?.some((node: any) node.changeDescription?.kind unnecessary), ); if (unnecessary.length 0) { console.error(FAIL: ${unnecessary.length} unnecessary renders detected during audit); for (const e of unnecessary.slice(0, 10)) console.error( -, JSON.stringify(e, null, 2)); process.exit(1); } await browser.close();与基础 Lighthouse 流程一样每条路由跑 mobile desktop 两遍两遍都必须 100/100/100/100且零不必要渲染。react-doctor静态性能门在 Playwright 运行之前快速失败扫描无需浏览器应放在流水线更早的位置npx react-doctorlatest --json .react-doctor-report.json解析报告中的 perf 类发现把任何 perf 发现视为阻塞项——理由与 Lighthouse 分数 100 是阻塞项相同这些确定性缺陷在节流下迟早会显形到 Lighthouse 里。接进 CI 作为独立 job便宜、快、无需浏览器- name: React Doctor static perf scan uses: millionco/react-doctormain或内联带失败过滤- name: React Doctor static perf scan run: npx react-doctorlatest --json --fail-on perf审计时按什么顺序加载什么按此顺序运行遇到第一个失败即停react-doctor——成本最低。抓缺失 memoization、坏掉的列表 key、不稳定的 callback 引用、会不必要重渲染的昂贵 children。跑 Lighthouse 之前先把它报的全部修掉——性能分数的一半就赢在这里react-scan交互式dev——在真实 Chrome 里用npx react-scanlatest init加载页面走一遍 LCP 路由、最常点击的 CTA、任何动效密集视图。工具栏显示渲染计数覆盖层把不必要渲染标灰。修到干净为止Lighthouse 运行中的react-scan/lite——交互式已干净后运行上面的 Playwright 审计。它抓住只在节流下或只在首帧时出现的问题Playwright Lighthouse——标准运行。100 分 第 3 步的零不必要渲染 完成。React 专属性能根因对主根因清单的扩展Context value 身份抖动provider 的 value 忘了useMemo导致每次 provider 父级渲染时所有 consumer 都重渲染 →useMemo该 value或拆分 context让高频变化字段不与稳定字段同处memo 化子组件收到内联 object/array/callback propsChild config{{ a: 1 }} /每次渲染都打破React.memo→ 提升、useMemo或useCallback列表 key 用数组下标重排会撕裂 reconciler → 用数据中的稳定 id首屏上方无条件渲染昂贵组件→lazy()Suspense或移到 LCP 之下或服务端预渲染每次渲染都触发的 effects依赖数组缺失或依赖不稳定 → 稳定依赖、拆分 state、或提取到useEvent风格 ref把整个 context value 展开成 props让每个 consumer 都耦合所有字段 → 只解构实际用到的字段水合不匹配SSR 标记与客户端首渲染不一致 → react-doctor 结构性地标出修复分歧源头Date.now、locale、随机性、浏览器专属 API。react-doctor静态地发现这些问题react-scan在运行中的应用里确认症状。两者都干净之前Lighthouse 100 没有意义。该工作流专属的反模式忘记page.addInitScript改用page.evaluateevaluate在 React 挂载之后运行会错过所有初始渲染事件。必须用addInitScriptLighthouse 运行期间用非 lite 版react-scan完整 UI工具栏、canvas 覆盖层带来额外开销并拉低分数。测量只用react-scan/lite完整版只用于交互式开发上报 Lighthouse 100 而react-scan显示每路由 30 次不必要渲染React 层在抖动时分数毫无意义——即使合成运行通过了真实负载下 INP 和 CLS 也会劣化。两个门都必须清把trackUnnecessaryRenders当免费功能它有可观开销在 Lighthouse 运行中可能把性能分拖低 2–3 分。它用于交互式诊断不用于审计运行因为它只是个 linter就跳过 react-doctor它不是。它能检测 ESLint 插件检测不到的 React 专属缺陷缺 key、坏的 memo、不稳定 ref、水合不匹配因为它们需要 fiber 级推理。七、工具的初始安装与开发期门禁如果项目尚未接好这些工具规范安装片段位于 react-dev-tooling-skill.md。该文档定义了三件默认开发期工具react-grab、react-scan、react-doctor的标准安装npx grablatest init # react-grab — UI 元素 → AI 源上下文 npx react-doctorlatest install # react-doctor — agent-skill 安装 静态扫描 npx react-scanlatest init # react-scan — 渲染高亮三者的init/installCLI 会自动检测框架并把运行时工具门禁在process.env.NODE_ENV development/import.meta.env.DEV之后绝不进入生产。安装后要读 diff 确认每个工具都必须只出现在开发门禁之后。该文档还提供 Next.js App/Pages、Vite、Webpack/CRA、Remix、Astro 的手工安装片段以及*_DISABLE_REACT_DEVTOOLS环境变量特性开关和「生产构建后 curl 检查 unpkg 脚本是否泄漏」的验证方式。八、响应格式前端审计 / 构建任务的交付物当用户请求前端审计或构建时必须返回前后分数移动端和桌面端、全部四个类别设计系统合规发现的孤立 token / 已修复项、已记录的组件每个修复一行可追溯到它清除的审计项你刻意没有做的事以及为什么——尤其是每个为了保 UX 而拒绝的送分项基于浏览器的 Design QA 结果测过的断点、发现/修复的视觉 bug、验证过的状态如果再有一次迭代你会跑的下一次审计。如果本轮没有达到每项 100你要明确说出「尚未完成」然后继续迭代。九、一句话收束100 on every Lighthouse category, on a real browser, with full features and full animations intact. Or it is not done.用 oh-my-openagent 的表述Lighthouse 100 react-doctor 干净 react-scan 零不必要渲染三者全过才算完成。这套规则集的价值不在于「把分刷上去」而在于把性能问题钉死在架构层面、把分数与真实用户体验绑定——真实浏览器、真实设备预设、完整功能、完整动画缺一不可。赞分享人工智能AI Agent代码智能体多智能体MCP ClientsAgent 编排【免费下载链接】oh-my-openagentOmO: Just type mass ulw keyword with your prompt. Now you are the master of graph engineering.项目地址https://gitcode.com/gh_mirrors/oh/oh-my-openagent点击查看免费下载相关推荐oh-my-openagent 前端技能体系中的 React 性能审计react-scan 与 react-doctor 双门禁支撑 Lighthouse 100oh my openagent 前端技能体系中的 React 性能审计react scan 与 react doctor 双门禁支撑 Lighthouse 1人工智能AI Agent代码智能体多智能体MCP ClientsAgent 编排oh-my-openagent 前端设计 Lane D 实战用 .omo/frontend-design/state.md 管理设计记忆、设计债与交接记录oh my openagent 前端设计 Lane D 实战用 .omo/frontend design/state.md 管理设计记忆、设计债与交接记录 本人工智能AI Agent代码智能体多智能体MCP ClientsAgent 编排EasyLM多主机训练实战在Google Cloud TPU Pods上的部署经验EasyLM多主机训练实战在Google Cloud TPU Pods上的部署经验 EasyLM是一个基于JAX/Flax的一站式大语言模型解决方案支持预训大模型深度学习人工智能上一篇【免费下载】 Obsidian Web Clipper 网页剪藏功能详解与技术指南下一篇loadJS回调函数完全指南确保脚本加载后正确执行的7种方法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
