用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归；中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
FreePublished on GitHub
fec-performance-optimization
用于诊断或改进前端性能、Core Web Vitals、包体积、运行时渲染成本、网络瀑布、内存泄漏、长任务、Lighthouse 问题或性能预算；中文触发词包括 性能优化、页面卡顿、首屏慢、包体积、Web Vitals。
The English summary is being prepared. Showing the original description.
See how to installFiles included (3)
- SKILL.md4.6 KB
- references/framework-performance-patterns.md3.5 KB
- references/report-template.md1.5 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
前端性能优化
用途
用可度量的方式定位前端性能瓶颈，并把优化建议收敛到用户主路径、构建产物和运行时证据。
流程
-
锁定体验目标
- 明确问题属于首屏加载、交互延迟、滚动卡顿、内存上涨、网络瀑布、包体积，还是视觉稳定性。
- 记录路由、设备、网络条件、浏览器、复现步骤和当前可用指标。
- 没有指标时先建立基线，不直接给出“优化一切”的泛化建议。
-
建立度量基线
- 读取项目脚本、构建配置、依赖和已有性能报告。
- 对页面体验优先使用 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。
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
More skills from this repository
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.
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
fec-alchemy
FreeUse 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.
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
fec-alchemy
Free用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践，并通过原创的项目内重设计转化为当前项目能力，而不是复制原实现。
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
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.
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026
用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略；中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。
The English summary is being prepared. Showing the original description.
bovinphang/frontend-craft22Updated Sep 26, 2026