Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/bovinphang/frontend-craft/fec-performance-optimizationnpx skills add bovinphang/frontend-craft --skill fec-performance-optimizationgit clone --depth 1 https://github.com/bovinphang/frontend-craftWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/bovinphang/frontend-craft/fec-performance-optimization)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-performance-optimization"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-performance-optimization.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00078 | $0.01287 |
| Opus 5 | $0.00039 | $0.00643 |
| Sonnet 5 | $0.00016 | $0.00257 |
| Haiku 4.5 | $0.00008 | $0.00129 |
Grade A, and why
fec-performance-optimization scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 81 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端性能优化
用途
用可度量的方式定位前端性能瓶颈，并把优化建议收敛到用户主路径、构建产物和运行时证据。
流程
-
锁定体验目标
- 明确问题属于首屏加载、交互延迟、滚动卡顿、内存上涨、网络瀑布、包体积，还是视觉稳定性。
- 记录路由、设备、网络条件、浏览器、复现步骤和当前可用指标。
- 没有指标时先建立基线，不直接给出“优化一切”的泛化建议。
-
建立度量基线
- 读取项目脚本、构建配置、依赖和已有性能报告。
- 对页面体验优先使用 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。
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 81 lines · 78 tokens per session scan A 87731782f741
fec-performance-optimization is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 3d ago), licensed MIT. It adds 78 tokens to every session and 1,287 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
brand-design
Brand-aware design system generator that acts as Head of Brand. Translates abstract brand language into a mathematically-validated, implementation-ready design system, writes creative-brief.md as the source of truth for all UI/UX in a project, and optionally compiles it to framework tokens (Tailwind v4 @theme, v3…
deslop
去除中文网文里的 AI 味。当用户说正文"太像AI写的/有翻译腔/太工整/没人味/排比堆砌/读起来假"、嫌"无缘无故的修辞""引用奇怪跨度大/语域不一致"、嫌"重复的修辞句式""同义反复(他非常生气他怒了)""极端词太多(非常/极大)""莫名其妙的陈述句""句号当顿号""段落太对仗工整行数雷同"，或要把 AI 稿改得像真人时使用。产出更口语、更有网感、风格统一的网文文字。.
english
英文网文出海写作（Wattpad / Royal Road / Webnovel / Radish / KDP）。当用户要写英文小说、出海英文平台、把中文故事改写成英文原生（不是翻译腔）、问英文平台怎么写/选哪个、或要去掉英文里的"中国网文翻译腔/AI腔"时使用。按英文网文规则产出像当地作者写的英文。.
ai-translating-content
Translate text between languages with AI while preserving brand voice and terminology. Use when translating app copy to Spanish, localizing marketing content, multilingual support tickets, i18n with AI, machine translation with brand voice, translating product descriptions, localizing help docs, batch translating i18n…
localize
Full localization pipeline: scan for hardcoded strings, extract and manage string tables, validate translations, generate translator briefings, run cultural/sensitivity review, manage VO localization, test RTL/platform requirements, enforce string freeze, and report coverage.
chinese-documentation
中文文档排版参考——中英文空格、全半角标点、术语保留、链接格式、中文文案排版指北约定。仅在用户显式 /chinese-documentation 时调用，不要根据上下文自动触发。.