leikegeek/frontend-performance-audit
skills/frontend-common/performance-audit/SKILL.md
页面变慢、表格卡顿、表单输入抖动、重复请求、渲染次数异常或响应式/状态流开销过高时使用。要求基于证据提出低风险优化。
$ install --global
skillsauthnpx skillsauth add leikegeek/coding-exoskeleton frontend-performance-auditInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 4, 2026, 2:48 AM141.2s1 file scanned
SKILL.md
- name:
- frontend-performance-audit
- displayName:
- 前端性能审计
- description:
- 页面变慢、表格卡顿、表单输入抖动、重复请求、渲染次数异常或响应式/状态流开销过高时使用。要求基于证据提出低风险优化。
- triggers:
- ["前端性能", "页面卡顿", "表格很慢", "重复请求", "渲染性能", "输入卡顿"]
- autoTrigger:
- true
- version:
- 1.0.0
前端性能审计
前置检查
- 读取
AGENTS.md，确认techStack为frontend-vue3或frontend-react-umi。 - 若不是前端 profile，跳过本 skill，使用通用
performance-analysis。 - 明确卡顿页面、操作步骤、数据规模和出现频率。
- 优先收集浏览器性能面板、Network、渲染次数、日志或用户可复现证据。
审计流程
- 识别症状：首屏慢、交互慢、滚动慢、输入慢或请求慢。
- 区分瓶颈：请求、计算、渲染、响应式、调度、样式或资源体积。
- 找主要放大因素：重复请求、重复计算、深监听、大对象响应式、复杂插槽、全量刷新。
- 先给低风险优化，再评估结构拆分或懒加载。
- 每条建议都写清证据、方案、验证方式和回滚成本。
优先级
- P0：去重请求、缓存派生数据、减少无效刷新、修正监听源。
- P1：拆分重组件、懒加载非首屏弹窗/Tab、降低状态粒度。
- P2：调整架构或数据模型；仅在证据充分且用户确认后推进。
输出格式
- 症状
- 可能瓶颈
- 证据
- 最小改动方案
- 预期收益
- 副作用/风险
Related Skills
leikegeek/audit-context-intake
development
VerifiedTrustedCommunity
将本地 /code 流程产物、Git 可获取变更或 GitLab Merge Request 链接归一化为统一 AuditContext，供 audit-reviewer 执行业务、质量、安全一体化审计。
3SKILL.mdUpdated Jun 4, 2026
leikegeek/vue3-dialog-form-workflow
tools
VerifiedTrustedCommunity
在 Vue 3 项目中新增或改造弹窗、表单、导入流程、编辑回填、保存提交和关闭刷新链路时使用。强调独立 Dialog、本地表单状态和封装组件优先。
3SKILL.mdUpdated Jun 4, 2026
leikegeek/vue3-component-delivery
development
VerifiedTrustedCommunity
在 Vue 3 + TypeScript 项目中新增或修改 SFC、组合式逻辑、Element Plus/Sh* 包装组件、表格和页面组件时使用。强调 Composition API、组件契约和最小改动。
3SKILL.mdUpdated Jun 4, 2026
leikegeek/vue3-api-codegen
development
VerifiedTrustedCommunity
在 Vue 3 项目中接入 swagger/codegen 生成 API、核对生成目录、临时补充接口或替换页面内请求时使用。强调不手改生成物和契约收敛。
3SKILL.mdUpdated Jun 4, 2026