Agent Skills › alamenai/terrae › perf

perf

GitHub

用于审计前端组件性能，检查资源清理、渲染成本等潜在问题，并依据规则提供具体修复建议与评分报告。

.claude/skills/perf/SKILL.md alamenai/terrae

Trigger Scenarios

需要评估或优化前端组件性能时发现应用存在内存泄漏或卡顿问题时

Install

npx skills add alamenai/terrae --skill perf -g -y

More Options

Non-standard path

npx skills add https://github.com/alamenai/terrae/tree/main/.claude/skills/perf -g -y

Use without installing

npx skills use alamenai/terrae@perf

指定 Agent (Claude Code)

npx skills add alamenai/terrae --skill perf -a claude-code -g -y

安装 repo 全部 skill

npx skills add alamenai/terrae --all -g -y

预览 repo 内 skill

npx skills add alamenai/terrae --list

SKILL.md

Frontmatter

{
    "name": "perf",
    "description": "Audit component performance and identify optimization opportunities with actionable fixes",
    "allowed-tools": "Read, Grep, Glob, Bash(git diff*)",
    "argument-hint": [
        "component-name"
    ]
}

Performance Audit Skill

Audit Terrae components for performance issues. Identifies problems, explains their impact, and provides actionable fixes.

If $ARGUMENTS is provided, audit only that component. Otherwise, audit all components in src/registry/map/.

Performance patterns and best practices are defined in .claude/rules/react/performance.md.

Instructions

Step 1: Identify Target

If a component name is provided, locate it in src/registry/map/. Otherwise, scan all component files.

Step 2: Run the Audit

For each component, read the full file and check every rule in .claude/rules/react/performance.md:

Resource cleanup (RAF, timers, listeners, markers, layers, sources, images, observers, canvas)
Recursive requestAnimationFrame polling
Untracked timers in renderers
Mapbox objects in state vs refs
useEffect dependency arrays (oversized, unstable references, callbacks)
Layer and source management (setPaintProperty vs remove/re-add, existence checks)
GeoJSON data handling (recomputation, update frequency)
Canvas performance (pixel ratio, size, getImageData, off-screen canvas)
DOM manipulation (innerHTML, style injection)
Memory leaks (event listeners, growing collections, stale closures)

Also check for:

Component re-render cost (expensive computations in render path, large JSX trees)
Duplicate utility functions across files (DRY violations that bloat bundle size)

Step 3: Report

Structure the report as:

## Performance Audit: [Component Name]

### Score: [X/10]

### Critical Issues
Issues that cause measurable performance degradation or memory leaks.

### Warnings
Patterns that could degrade performance under load or over time.

### Best Practices
Recommendations for following optimal patterns.

### Passed Checks
Checks that the component already handles correctly.

For each issue found, include:

What: Description of the problem
Where: File path and line number
Impact: What happens if not fixed (memory leak, jank, unnecessary re-renders, etc.)
Fix: Concrete code example showing the solution