MCPInstall

optimizing-performance

Analyzes and optimizes application performance across frontend, backend, and database layers. Use when diagnosing slowness, improving load times, optimizing queries, reducing bundle size, or when asked about performance issues.

Installs
218
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/cloudai-x/claude-workflow-v2 --skill optimizing-performance
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads optimizing-performance automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Optimizing Performance

When to Load

  • Trigger: Diagnosing slowness, profiling, caching strategies, reducing load times, bundle size optimization
  • Skip: Correctness-focused work where performance is not a concern

Performance Optimization Workflow

Copy this checklist and track progress:

Performance Optimization Progress:
- [ ] Step 1: Measure baseline performance
- [ ] Step 2: Identify bottlenecks
- [ ] Step 3: Apply targeted optimizations
- [ ] Step 4: Measure again and compare
- [ ] Step 5: Repeat if targets not met

Critical Rule: Never optimize without data. Always profile before and after changes.

Step 1: Measure Baseline

Profiling Commands

# Node.js profiling
node --prof app.js
node --prof-process isolate*.log > profile.txt

# Python profiling
python -m cProfile -o profile.stats app.py
python -m pstats profile.stats

# Web performance
lighthouse https://example.com --output=json

Step 2: Identify Bottlenecks

Common Bottleneck Categories

CategorySymptomsTools
CPUHigh CPU usage, slow computationProfiler, flame graphs
MemoryHigh RAM, GC pauses, OOMHeap snapshots, memory profiler
I/OSlow disk/network, waitingstrace, network inspector
DatabaseSlow queries, lock contentionQuery analyzer, EXPLAIN

Step 3: Apply Optimizations

Frontend Optimizations

Bundle Size:

// ❌ Import entire library
import _ from "lodash";

// ✅ Import only needed functions
import debounce from "lodash/debounce";

// ✅ Use dynamic imports for code splitting
const HeavyComponent = lazy(() => import("./HeavyComponent"));

Rendering:

// ❌ Render on every parent update
function Child({ data }) {
  return <ExpensiveComponent data={data} />;
}

// ✅ Memoize when props don't change
const Child = memo(function Child({ data }) {
  return <ExpensiveComponent data={data} />;
});

// ✅ Use useMemo for expensive computations
const processed = useMemo(() => expensiveCalc(data), [data]);

Images:

<!-- ❌ Unoptimized -->
<img src="large-image.jpg" />

<!-- ✅ Optimized -->
<img
  src="image.webp"
  srcset="image-300.webp 300w, image-600.webp 600w"
  sizes="(max-width: 600px) 300px, 600px"
  width="600"
  height="400"
  alt="Description"
  loading="lazy"
  decoding="async"
/>

Backend Optimizations

Database Queries:

-- ❌ N+1 Query Problem
SELECT * FROM users;
-- Then for each user:
SELECT * FROM orders WHERE user_id = ?;

-- ✅ Single query with JOIN
SELECT u.id, u.name, o.id AS order_id, o.total
FROM users u
LEFT JOIN orders o ON u.id = o.user_id;

-- ✅ Or use pagination
SELECT id, name FROM users WHERE id > :last_id ORDER BY id LIMIT 100;

Caching Strategy:

// Multi-layer caching
const getUser = async (id) => {
  // L1: In-memory cache (fastest)
  let user = memoryCache.get(`user:${id}`);
  if (user) return user;

  // L2: Redis cache (fast)
  user = await redis.get(`user:${id}`);
  if (user) {
    user = JSON.parse(user);
    memoryCache.set(`user:${id}`, user, 60);
    return user;
  }

  // L3: Database (slow)
  user = await db.users.findById(id);
  await redis.setex(`user:${id}`, 3600, JSON.stringify(user));
  memoryCache.set(`user:${id}`, user, 60);

  return user;
};

Async Processing:

// ❌ Blocking operation
app.post("/upload", async (req, res) => {
  await processVideo(req.file); // Takes 5 minutes
  res.send("Done");
});

// ✅ Queue for background processing
app.post("/upload", async (req, res) => {
  const jobId = await queue.add("processVideo", { file: req.file });
  res.status(202).send({ jobId, status: "processing" });
});

Algorithm Optimizations

// ❌ O(n²) - nested loops
function findDuplicates(arr) {
  const duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) duplicates.push(arr[i]);
    }
  }
  return duplicates;
}

// ✅ O(n) - hash map
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();
  for (const item of arr) {
    if (seen.has(item)) duplicates.add(item);
    seen.add(item);
  }
  return [...duplicates];
}

Step 4: Measure Again

After applying optimizations, re-run profiling and compare:

Comparison Checklist:
- [ ] Run same profiling tools as baseline
- [ ] Compare metrics before vs after
- [ ] Verify no regressions in other areas
- [ ] Document improvement percentages

Performance Targets

Web Vitals

MetricGoodNeeds WorkPoor
LCP< 2.5s2.5-4s> 4s
INP< 200ms200-500ms> 500ms
CLS< 0.10.1-0.25> 0.25
TTFB< 800ms800ms-1.8s> 1.8s

API Performance

MetricTarget
P50 Latency< 100ms
P95 Latency< 500ms
P99 Latency< 1s
Error Rate< 0.1%

Validation

After optimization, validate results:

Performance Validation:
- [ ] Metrics improved from baseline
- [ ] No functionality regressions
- [ ] No new errors introduced
- [ ] Changes are sustainable (not one-time fixes)
- [ ] Performance gains documented

If targets not met, return to Step 2 and identify remaining bottlenecks.

FAQ

What does the optimizing-performance skill do?

Analyzes and optimizes application performance across frontend, backend, and database layers. Use when diagnosing slowness, improving load times, optimizing queries, reducing bundle size, or when asked about performance issues.

How do I install optimizing-performance?

Run npx skills add https://github.com/cloudai-x/claude-workflow-v2 --skill optimizing-performance in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/optimizing-performance/ (personal) or .claude/skills/optimizing-performance/ (project).

Which AI agents can use optimizing-performance?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is optimizing-performance safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains optimizing-performance?

It is published by cloudai-x in cloudai-x/claude-workflow-v2. It has 218 recorded installs.

More from cloudai-x/claude-workflow-v2

View all →

analyzing-projects

cloudai-x/claude-workflow-v2

Analyzes codebases to understand structure, tech stack, patterns, and conventions. Use when onboarding to a new project, exploring unfamiliar code, or when asked "how does this work?" or "what's the architecture?"

convex-backend

cloudai-x/claude-workflow-v2

Convex backend development guidelines. Use when writing Convex functions, schemas, queries, mutations, actions, or any backend code in a Convex project. Triggers on tasks involving Convex database operations, real-time subscriptions, file storage, or serverless functions.

Backend & APIs236 installs

designing-architecture

cloudai-x/claude-workflow-v2

Open the skill to read its SKILL.md instructions.

parallel-execution

cloudai-x/claude-workflow-v2

Patterns for parallel subagent execution using the Agent tool (formerly Task). Use when coordinating multiple independent tasks, spawning dynamic subagents, or implementing features that can be parallelized.

AI & Agents210 installs

managing-git

cloudai-x/claude-workflow-v2

Manages Git workflows including branching, commits, and pull requests. Use when working with Git, creating commits, opening PRs, managing branches, resolving conflicts, or when asked about version control best practices.

web-design-guidelines

cloudai-x/claude-workflow-v2

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines".

Frontend & Design175 installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

handoff

mattpocock/skills

Compact the current conversation into a handoff document for another agent to pick up.

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.