performance-analysis

Agent Skills › t4t5/rencal › performance-analysis

performance-analysis

GitHub

协助用户优化前端性能。引导用户提供性能录制文件，分析渲染帧、脚本执行及CPU热点以识别瓶颈，结合源码提出具体优化建议（如缓存、简化算法），待用户确认后实施并验证效果。

.agents/skills/performance-analysis/SKILL.md t4t5/rencal

触发场景

用户希望优化缓慢的交互体验需要分析 Chrome 或 Safari 的性能追踪记录

安装

npx skills add t4t5/rencal --skill performance-analysis -g -y

更多选项

非标准路径

npx skills add https://github.com/t4t5/rencal/tree/main/.agents/skills/performance-analysis -g -y

不安装直接使用

npx skills use t4t5/rencal@performance-analysis

指定 Agent (Claude Code)

npx skills add t4t5/rencal --skill performance-analysis -a claude-code -g -y

安装 repo 全部 skill

npx skills add t4t5/rencal --all -g -y

预览 repo 内 skill

npx skills add t4t5/rencal --list

SKILL.md

Frontmatter

{
    "name": "performance-analysis",
    "description": "Analyze frontend performance recordings and propose ranked optimizations. Use when the user wants to optimize a slow interaction or analyze a Chrome\/Safari performance trace."
}

You are helping the user optimize the performance of a specific part of the app.

Workflow

Ask for a recording: Ask the user to do a Chrome DevTools performance recording (in Safari Web Inspector or Chrome) of the interaction they want to optimize. They should save the recording JSON file in the recordings/ directory.
Analyze the recording: Run just analyze recordings/<filename>.json to get a breakdown of rendering frames, layout events, script events, and CPU profile hotspots.
Identify bottlenecks: Look at:
- Longest rendering frames — anything over 16ms breaks 60fps
- Top script executions — which events take the most time
- CPU self-time — which functions are burning the most CPU (especially in src/)
- CPU total time — which call trees are the most expensive
Read the relevant source code: Based on the CPU profile hotspots, read the source files to understand what the code is doing and why it's slow.
Propose optimizations: Present concrete, ranked optimization ideas to the user. Common patterns:
- Caching/memoizing repeated computations
- Replacing heavy library calls (e.g. date-fns) with lightweight arithmetic
- Reducing algorithmic complexity (e.g. pre-indexing instead of O(n*m) loops)
- Avoiding unnecessary object allocations (especially Date objects)
Let the user choose: Don't implement anything until the user picks which optimizations to pursue.
After implementing: Ask the user to do another recording so you can compare before/after with just analyze and verify the improvements.