用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归；中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。
中文简介正在准备中。当前显示原文说明。
bovinphang/frontend-craft222026年9月26日 更新
免费在 GitHub 公开
fec-performance-optimization
用于诊断或改进前端性能、Core Web Vitals、包体积、运行时渲染成本、网络瀑布、内存泄漏、长任务、Lighthouse 问题或性能预算；中文触发词包括 性能优化、页面卡顿、首屏慢、包体积、Web Vitals。
中文简介正在准备中。当前显示原文说明。
查看安装方法包含的文件（3）
- SKILL.md4.6 KB
- references/framework-performance-patterns.md3.5 KB
- references/report-template.md1.5 KB
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
前端性能优化
用途
用可度量的方式定位前端性能瓶颈，并把优化建议收敛到用户主路径、构建产物和运行时证据。
流程
-
锁定体验目标
- 明确问题属于首屏加载、交互延迟、滚动卡顿、内存上涨、网络瀑布、包体积，还是视觉稳定性。
- 记录路由、设备、网络条件、浏览器、复现步骤和当前可用指标。
- 没有指标时先建立基线，不直接给出“优化一切”的泛化建议。
-
建立度量基线
- 读取项目脚本、构建配置、依赖和已有性能报告。
- 对页面体验优先使用 Lighthouse、Performance trace、React Profiler、Vue Devtools、Memory snapshot 或 RUM 数据。
- 对包体优先看构建产物、source map、依赖重复、首屏 chunk 和动态 import 边界。
- 对运行时卡顿优先看长任务、重复渲染、昂贵计算、同步循环、布局抖动和大列表。
- 如果已有线上监控、平台指标或 CI 产物，先用它们确认受影响路由、设备、时间窗和用户主路径，再决定读哪些源码。
-
分层定位
- 加载层：关键 CSS、字体、图片、脚本阻塞、预加载和缓存。
- 渲染层：不稳定 key、过宽 Context、无意义 effect、重复计算、组件树过大。
- 数据层：串行请求、重复请求、过大 payload、缺少分页或缓存策略。
- 主线程：JSON/CSV 解析、图片处理、复杂排序过滤、同步压缩和大对象深拷贝。
- 资源层：事件监听、定时器、订阅、WebGL/Canvas 资源和对象 URL 未释放。
-
形成优化方案
- 每个建议必须绑定位置、影响、改法和验证方式。
- 优先处理高频主路径和 P95 体验；低频后台任务不抢占首屏预算。
- 先做低风险高收益改动，如懒加载、去重、缓存、尺寸预留、虚拟列表、稳定引用和释放资源。
- 对会牺牲可维护性的技巧，必须说明收益证据和替代方案。
- 建议进入实现前先过候选门禁：是否有指标支撑、能否定位到路由/组件/chunk/请求、是否可由前端验证、是否存在更小改动。
-
验证回归
- 重新运行受影响构建、测试和性能采集命令。
- 对比优化前后指标或产物体积。
- 确认 loading、empty、error、offline、reduced-motion 和移动端状态未被优化破坏。
预算
| 范围 | 默认目标 | 说明 |
|---|---|---|
| LCP | 约 2.5s 内 | 以核心页面、目标地区网络和真实设备为准 |
| CLS | 低于 0.1 | 媒体、广告、异步内容需要预留空间 |
| INP | 约 200ms 内 | 优先拆分长任务和降低交互路径重渲染 |
| 初始 JS | 遵循项目预算 | 没有预算时先报告当前 gzip / brotli 体积 |
| 主线程 | 避免连续长任务 | 大计算考虑分片、缓存或 Worker |
检查项
- 首屏资源是否包含非首屏组件、图表、编辑器、地图或全量图标库。
- 图片是否有明确尺寸、合适格式、懒加载和首屏优先级。
- 列表、表格、时间线是否需要虚拟化或分页。
- 搜索、筛选、排序是否在热路径重复 O(n*m) 扫描。
- 请求是否可并行、可缓存、可取消、可复用。
- 监听、订阅、定时器、AbortController、Object URL、Canvas/WebGL 资源是否对称清理。
约束
- 不做没有目标和证据的过早优化。
- 不靠关闭功能、删除状态反馈或降低可访问性来换性能分数。
- 不为一次 Lighthouse 分数牺牲真实用户主路径。
- 不引入大型新依赖解决小问题；先利用项目已有工具和浏览器能力。
- 不把后端、网络和浏览器侧问题混为一谈；前端能验证的部分要单独列证据。
- 不从 repo-wide grep 直接跳到优化结论；先用指标或复现路径收窄候选，再读相关源码。
详细参考
撰写性能分析报告时，加载 references/report-template.md。 需要按 React、Vue、Next.js 或 Nuxt 分类定位框架专项性能风险时，加载 references/framework-performance-patterns.md。
预期输出
输出有证据链的性能分析报告，说明基线、候选门禁、瓶颈、优化建议、验证方式和剩余风险。报告保存为 reports/performance-review-YYYY-MM-DD-HHmmss.md。
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.
中文简介正在准备中。当前显示原文说明。
bovinphang/frontend-craft222026年9月26日 更新
Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.
中文简介正在准备中。当前显示原文说明。
bovinphang/frontend-craft222026年9月26日 更新
用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践，并通过原创的项目内重设计转化为当前项目能力，而不是复制原实现。
中文简介正在准备中。当前显示原文说明。
bovinphang/frontend-craft222026年9月26日 更新
Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.
中文简介正在准备中。当前显示原文说明。
bovinphang/frontend-craft222026年9月26日 更新
用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略；中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。
中文简介正在准备中。当前显示原文说明。
bovinphang/frontend-craft222026年9月26日 更新