From aj-geddes-useful-ai-prompts-4
Profiles CPU usage in browsers and React apps using Chrome DevTools, Firefox Profiler, and React Profiler to identify hotspots, bottlenecks, and optimize performance.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin aj-geddes-useful-ai-prompts-4This skill uses the workspace's default tool permissions.
- [Overview](#overview)
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
CPU profiling identifies which functions consume most CPU time, enabling targeted optimization of expensive code paths.
Minimal working example:
Browser Profiling:
Chrome DevTools:
Steps:
1. DevTools → Performance
2. Click record
3. Perform action
4. Stop recording
5. Analyze flame chart
Metrics:
- Function call duration
- Call frequency
- Total time vs self time
Firefox Profiler:
- Built-in performance profiler
- Flame graphs
- Timeline view
- Export and share
React Profiler:
- DevTools → Profiler
- Component render times
- Phase: render vs commit
- Why component re-rendered
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Profiling Tools | Profiling Tools |
| Analysis & Interpretation | Analysis & Interpretation |
| Optimization Process | Optimization Process |
| Monitoring & Best Practices | Monitoring & Best Practices |