Agent skill

Perf Profiling

前后端性能分析技能：定位瓶颈、跑 benchmark、对比优化前后效果. An agent skill from 312362115/claude.

Install Perf Profiling

skills CLI

$ npx skills add 312362115/claude --skill perf-profiling -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install 312362115/claude perf-profiling --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/perf-profiling .claude/skills/perf-profiling && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "perf-profiling" agent skill from https://github.com/312362115/claude/tree/main/skills/perf-profiling into .claude/skills/perf-profiling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-profiling", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/312362115/claude/tree/main/skills/perf-profiling

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add 312362115/claude --skill perf-profiling -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install 312362115/claude perf-profiling --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/perf-profiling .agents/skills/perf-profiling && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "perf-profiling" agent skill from https://github.com/312362115/claude/tree/main/skills/perf-profiling into .agents/skills/perf-profiling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-profiling", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add 312362115/claude --skill perf-profiling -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install 312362115/claude perf-profiling --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/perf-profiling .cursor/skills/perf-profiling && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "perf-profiling" agent skill from https://github.com/312362115/claude/tree/main/skills/perf-profiling into .cursor/skills/perf-profiling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-profiling", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/312362115/claude.git --path skills/perf-profiling

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add 312362115/claude --skill perf-profiling -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install 312362115/claude perf-profiling --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/perf-profiling .gemini/skills/perf-profiling && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "perf-profiling" agent skill from https://github.com/312362115/claude/tree/main/skills/perf-profiling into .gemini/skills/perf-profiling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-profiling", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install 312362115/claude perf-profiling

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add 312362115/claude --skill perf-profiling -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/perf-profiling .github/skills/perf-profiling && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "perf-profiling" agent skill from https://github.com/312362115/claude/tree/main/skills/perf-profiling into .github/skills/perf-profiling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-profiling", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add 312362115/claude --skill perf-profiling -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install 312362115/claude perf-profiling --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/perf-profiling .opencode/skills/perf-profiling && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "perf-profiling" agent skill from https://github.com/312362115/claude/tree/main/skills/perf-profiling into .opencode/skills/perf-profiling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-profiling", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: perf-profiling
GitHub stars: 107
Token cost: ~1.1k tokens
SKILL.md length: 177 words
Files: 1
Skills in repo: 20
Repo updated: May 14, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

前后端性能分析技能：定位瓶颈、跑 benchmark、对比优化前后效果. An agent skill from 312362115/claude.

Tasks that involve Web performance
SKILL.md covers 第一步：明确分析目标, 前端性能分析, 后端性能分析 and 第四步：优化与对比, plus 2 more sections
Calls node, npx and python

What it does

Perf Profiling is an agent skill from 312362115/claude. 前后端性能分析技能：定位瓶颈、跑 benchmark、对比优化前后效果。前端覆盖 Core Web Vitals（LCP/FID/CLS）、Lighthouse 审计、Bundle 分析。后端覆盖 API 响应时间、数据库查询性能、内存/CPU profiling。核心原则：基于数据定位瓶颈，不做无依据的"优化"。触发词：性能优化、太慢了、性能分析、LCP、首屏、响应时间慢、profiling、benchmark。触发场景：性能相关需求验收、用户反馈慢、性能指标超标、重构后性能回归验证。

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Web performance. The licence is MIT.

When your agent uses it

Tasks that involve Web performance

Example prompts

“/perf-profiling”

Requirements

Python 3
Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 2d4fa49. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- node
- npx
- python
- curl
- pip
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, curl and pip, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Perf Profiling loads about 1.1k tokens when it runs. Until then it costs about 67 tokens; SKILL.md has 177 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~67
When it runs · the whole SKILL.md, loaded when a task matches: ~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from 312362115/claude at commit 2d4fa49, republished under its MIT licence (© 312362115). 177 words, ~1,104 tokens.

Download SKILL.mdSave it as .claude/skills/perf-profiling/SKILL.md (or your agent's skills folder).

name: perf-profiling
description: 前后端性能分析技能：定位瓶颈、跑 benchmark、对比优化前后效果。前端覆盖 Core Web Vitals（LCP/FID/CLS）、Lighthouse 审计、Bundle 分析。后端覆盖 API 响应时间、数据库查询性能、内存/CPU profiling。核心原则：基于数据定位瓶颈，不做无依据的"优化"。触发词：性能优化、太慢了、性能分析、LCP、首屏、响应时间慢、profiling、benchmark。触发场景：性能相关需求验收、用户反馈慢、性能指标超标、重构后性能回归验证。
version: 1.0.0
last_updated: 2026-04-08
repository: https://github.com/312362115/claude

性能分析（Perf Profiling）

优化的前提是度量。不知道慢在哪，就不知道该优化哪。每次优化都要有"前"和"后"的数据对比，否则不算优化。

第一步：明确分析目标

性能问题
  │
  ├─ 前端性能？（页面加载慢、交互卡顿、首屏慢）
  │   └─ 前端分析流程
  │
  ├─ 后端性能？（API 响应慢、数据库查询慢、CPU/内存高）
  │   └─ 后端分析流程
  │
  └─ 不确定？
      └─ 先用浏览器 DevTools Network 面板判断瓶颈在前端还是后端

用 AskUserQuestion 确认：

具体症状：哪里慢？慢到什么程度？（要数据，不要"感觉"）
性能基线：当前是多少？目标是多少？
复现条件：特定页面？特定数据量？特定并发？

前端性能分析

2.1 Core Web Vitals 度量

指标	含义	达标	需改进	差
LCP	最大内容绘制	≤2.5s	≤4s	>4s
INP	交互到下一次绘制	≤200ms	≤500ms	>500ms
CLS	累计布局偏移	≤0.1	≤0.25	>0.25

度量工具：

bash

# Lighthouse CLI（如果可用）
npx lighthouse <url> --output=json --output-path=./lighthouse-report.json

# 或用 Playwright 采集性能数据
# 通过 MCP playwright 工具访问页面并执行 performance API

2.2 Bundle 分析

bash

# Webpack
npx webpack-bundle-analyzer stats.json

# Vite
npx vite-bundle-visualizer

# Next.js
ANALYZE=true next build

关注点：

总 bundle 大小（gzip 后）
最大的几个依赖占比
有没有重复打包的依赖
是否做了 code splitting

2.3 前端常见瓶颈与优化方向

瓶颈	诊断方式	优化方向
首屏大图/大资源阻塞 LCP	Lighthouse / Network 瀑布图	懒加载、压缩、CDN、preload 关键资源
JS Bundle 过大	Bundle 分析	Code splitting、tree shaking、动态导入
未优化图片	Lighthouse 图片审计	WebP/AVIF、响应式图片、压缩
布局抖动导致 CLS	Lighthouse CLS 审计	固定尺寸占位、字体预加载
大量 DOM 操作	Performance timeline	虚拟列表、减少重排、requestAnimationFrame
第三方脚本阻塞	Network + Coverage	延迟加载、异步加载、移除不必要的三方脚本

后端性能分析

3.1 API 响应时间度量

bash

# 简单测量（单次）
time curl -s -o /dev/null -w "%{time_total}" <api-url>

# 并发测试（如 wrk 可用）
wrk -t4 -c100 -d30s <api-url>

# 或用 Node.js 脚本测量
node -e "
const start = Date.now();
fetch('<api-url>').then(() => console.log(Date.now() - start + 'ms'));
"

记录关键指标：

p50 / p95 / p99 响应时间
吞吐量（req/s）
错误率

3.2 数据库查询分析

sql

-- MySQL/PostgreSQL 查询分析
EXPLAIN ANALYZE <your-query>;

javascript

// Node.js ORM 慢查询日志
// Prisma: 在 PrismaClient 初始化时开启
const prisma = new PrismaClient({ log: ['query', 'warn', 'error'] });

// Sequelize: 开启 benchmark
const sequelize = new Sequelize({ benchmark: true, logging: console.log });

关注点：

全表扫描（缺索引）
N+1 查询
未使用的索引
慢查询（>100ms）

3.3 Node.js / Python Profiling

Node.js：

bash

# CPU profiling
node --prof app.js
node --prof-process isolate-xxx.log > processed.txt

# 内存快照
node --inspect app.js
# 然后在 Chrome DevTools 中 Take Heap Snapshot

Python：

bash

# cProfile
python -m cProfile -s cumtime app.py

# memory_profiler
pip install memory_profiler
python -m memory_profiler app.py

3.4 后端常见瓶颈与优化方向

瓶颈	诊断方式	优化方向
数据库查询慢	EXPLAIN ANALYZE	加索引、优化查询、减少 N+1
序列化/反序列化开销	profiling	减少响应字段、分页、缓存
外部 API 调用阻塞	timing 日志	并行调用、缓存、超时控制
内存泄漏	内存快照对比	排查未释放的引用、闭包
CPU 密集计算	CPU profiling	Worker 线程、缓存计算结果
连接池耗尽	连接池监控	调整池大小、检查连接泄漏

第四步：优化与对比

4.1 优化前记录基线

在做任何改动之前，必须记录当前性能数据：

markdown

## 性能基线（优化前）

| 指标 | 值 | 测量条件 |
|------|-----|---------|
| LCP | 3.8s | 首页，Chrome，4G 模拟 |
| API /users 响应 | p95: 450ms | 100 并发，30s |
| 数据库查询 | 320ms | users 表 10 万行 |

4.2 优化后对比

每次优化后，用相同条件重新测量，对比前后：

markdown

## 优化效果对比

| 指标 | 优化前 | 优化后 | 改善 |
|------|--------|--------|------|
| LCP | 3.8s | 1.9s | -50% ✅ |
| API /users p95 | 450ms | 120ms | -73% ✅ |
| Bundle 大小 | 2.1MB | 890KB | -58% ✅ |

4.3 输出性能报告

完整性能分析后，输出报告到 docs/specs/ 或直接在对话中给出：

markdown

# 性能分析报告：<模块/页面>

## 问题描述
用户反馈/指标异常的具体描述

## 分析结论
瓶颈在哪，为什么慢

## 优化措施
| # | 措施 | 预期效果 | 实际效果 |
|---|------|---------|---------|

## 性能对比
基线 vs 优化后

## 后续建议
还可以进一步优化的方向

分析准则

数据驱动：不凭直觉优化。先度量，找到瓶颈，再优化，再度量
优先级：先优化影响最大的瓶颈（80/20 法则）
工具按项目选：不强制某个工具，项目里有什么用什么，缺什么建议安装什么
不过度优化：达到目标就停。从 3s 优化到 2s 和从 2s 优化到 1.5s 的成本完全不同
回归保护：性能优化不能破坏功能。优化后必须跑测试确认功能正常

与其他 skill 的关系

task-execute 执行中发现性能问题 → perf-profiling（分析定位）
refactoring 重构后 → perf-profiling（回归验证，确认性能没退化）
release 发版前 → perf-profiling（性能相关需求的验收）

Files

Just SKILL.md in skills/perf-profiling of 312362115/claude.

Open the folder on GitHubat commit 2d4fa49

Compare with similar skills

Perf Profiling next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Perf Profiling compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Perf Profiling this skill312362115/claude	107	—	~1.1k	Automated safety check: Pass	MIT	4 mo ago
React Doctormakeplane/plane	61k	12 repos	~657	Automated safety check: Pass	AGPL-3.0	yesterday
Fixing Motion Performanceibelick/ui-skills	9.5k	5 repos	~1.4k	Automated safety check: Pass	MIT	yesterday
GSAP Performance Tuninggreensock/gsap-skills	16k	4 repos	~1k	Automated safety check: Pass	MIT	2 mo ago
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase	10k	2 repos	~2.9k	Automated safety check: Pass	MIT	2 mo ago
Web Quality Auditaddyosmani/web-quality-skills	2.9k	—	~2.6k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
61k GitHub starsUsed in 12 repos~657 tokens
Frontend & DesignAuto-check passed
Fixing Motion Performance
ibelick/ui-skills
Audits and fixes web animation performance: layout thrashing, work that belongs on the compositor, scroll-linked motion and costly blur effects.
9.5k GitHub starsUsed in 5 repos~1.4k tokens
Frontend & DesignAuto-check passed
GSAP Performance Tuning
greensock/gsap-skills
Guides the agent to keep GSAP animations smooth by animating transforms and opacity, batching DOM reads and writes, and avoiding layout-heavy properties.
16k GitHub starsUsed in 4 repos~1k tokens
Frontend & DesignAuto-check passed
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
10k GitHub starsUsed in 2 repos~2.9k tokens
Frontend & DesignAuto-check passed
Web Quality Audit
addyosmani/web-quality-skills
Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing.
2.9k GitHub stars~2.6k tokensUpdated 1 mo ago
Frontend & DesignAuto-check passed
SEO Google
AgriciDaniel/codex-seo
Google SEO APIs: Search Console (Search Analytics, URL Inspection, Sitemaps), PageSpeed Insights v5, CrUX field data with 25-week history, Indexing API v3, and GA4 organic traffic.
791 GitHub starsUsed in 2 repos~3.4k tokens
Frontend & DesignAuto-check passed

Questions about Perf Profiling

What does Perf Profiling do?

前后端性能分析技能：定位瓶颈、跑 benchmark、对比优化前后效果. An agent skill from 312362115/claude. Perf Profiling is an agent skill from 312362115/claude.

When should I use Perf Profiling?

Perf Profiling fits situations like: tasks that involve Web performance.

How do I install Perf Profiling in Claude Code?

Run `npx skills add 312362115/claude --skill perf-profiling -a claude-code`. Or copy the skill folder (skills/perf-profiling in 312362115/claude) into .claude/skills/perf-profiling in your project. Claude Code loads it when a task matches its description.

How do I install Perf Profiling in Codex?

Run `npx skills add 312362115/claude --skill perf-profiling -a codex`. Or copy the skill folder (skills/perf-profiling in 312362115/claude) into .agents/skills/perf-profiling in your project. Codex loads it when a task matches its description.

Can I use Perf Profiling in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add 312362115/claude --skill perf-profiling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/perf-profiling, .gemini/skills/perf-profiling, .github/skills/perf-profiling and .opencode/skills/perf-profiling in your project.

What does Perf Profiling need to run?

Going by SKILL.md and its folder, Perf Profiling needs the command-line tools its instructions call (node, npx, python, curl and pip). Our summary lists: Python 3; Node.js.

Does Perf Profiling access the network?

SKILL.md contains no URLs. Its commands use npx, curl and pip, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Perf Profiling safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Perf Profiling use?

Perf Profiling is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Perf Profiling use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Perf Profiling?

Skills that share tags, products or a category with Perf Profiling: React Doctor (makeplane/plane, 61k stars), Fixing Motion Performance (ibelick/ui-skills, 9.5k stars), GSAP Performance Tuning (greensock/gsap-skills, 16k stars) and React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Perf Profiling?

312362115 (a GitHub user) maintains it in 312362115/claude, which has 107 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on May 14, 2026.

Source: 312362115/claude on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Perf Profiling

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

性能分析（Perf Profiling）

第一步：明确分析目标

前端性能分析

2.1 Core Web Vitals 度量

2.2 Bundle 分析

2.3 前端常见瓶颈与优化方向

后端性能分析

3.1 API 响应时间度量

3.2 数据库查询分析

3.3 Node.js / Python Profiling

3.4 后端常见瓶颈与优化方向

第四步：优化与对比

4.1 优化前记录基线

4.2 优化后对比

4.3 输出性能报告

分析准则

与其他 skill 的关系

Files

Compare with similar skills

Similar skills

More from 312362115/claude

Related

Questions about Perf Profiling