Initial commit

commands/perf.md

@@ -0,0 +1,57 @@
+---
+description: Analyze page performance - load times, DOM size, memory, and large resources.
+allowed-tools: Bash(*)
+model: sonnet
+---
+
+# Performance Analysis
+
+Run a comprehensive performance analysis on the current page.
+
+Use the **performance-debugger agent** for this task.
+
+## Collect Metrics
+
+1. **Page Load Timing**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
+     const t = performance.timing;
+     return {
+       firstByte: t.responseStart - t.navigationStart,
+       domInteractive: t.domInteractive - t.navigationStart,
+       domContentLoaded: t.domContentLoadedEventEnd - t.navigationStart,
+       loadComplete: t.loadEventEnd - t.navigationStart
+     };
+   })()'
+   ```
+
+2. **DOM Analysis**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
+     const all = document.querySelectorAll("*");
+     return {
+       totalElements: all.length,
+       scripts: document.scripts.length,
+       stylesheets: document.styleSheets.length,
+       images: document.images.length
+     };
+   })()'
+   ```
+
+3. **Large Resources**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js 'performance.getEntriesByType("resource").filter(r => r.transferSize > 50000).map(r => ({ name: r.name.split("/").pop(), kb: (r.transferSize/1024).toFixed(1) })).slice(0,10)'
+   ```
+
+4. **Screenshot** for context:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js
+   ```
+
+## Report
+
+Provide a summary with:
+- Load time assessment (good/needs improvement/poor)
+- DOM size assessment
+- Largest resources
+- Top 3 recommendations for improvement