performance-analysis

Agent Skills › t4t5/rencal › performance-analysis

performance-analysis

GitHub

用于分析前端性能录制文件，识别渲染帧、脚本执行及CPU热点瓶颈。通过读取源码提出排序后的优化建议（如缓存、算法优化），并在用户实施后对比验证效果，以提升应用交互性能。

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

Trigger Scenarios

用户希望优化缓慢的交互体验用户提供Chrome或Safari的性能轨迹数据

Install

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

More Options

Non-standard path

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

Use without installing

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.