Can this skill help with frontend performance?

Yes, it includes patterns for identifying unnecessary re-renders in frameworks like React and provides guidance on using memoization and stable references to improve UI responsiveness.

Does it provide help with algorithmic efficiency?

Absolutely. It identifies O(n²) or worse complexities, such as nested loops over collections, and suggests more efficient alternatives using Maps, Sets, or optimized data structures.

How does it improve asynchronous operations?

The skill identifies sequential await statements that cause waterfalls and suggests using Promise.all or batching to execute independent operations in parallel.

How does it handle API over-fetching?

It suggests implementing field selection, sparse fieldsets, or DTOs to ensure that only the necessary data is transmitted, reducing bandwidth, memory usage, and serialization time.

What is the N+1 query problem this skill helps fix?

The N+1 problem occurs when an application makes one query to get a list of items and then N additional queries to fetch related data for each item. This skill provides strategies like eager loading and batching to resolve it.

Performance Patterns Optimizer

Name: Performance Patterns Optimizer
Author: hculap

byhculap

0•

API開発

Identifies and resolves software performance bottlenecks including N+1 queries, inefficient algorithms, and redundant API calls.

The Performance Patterns skill empowers Claude to diagnose and fix common architectural inefficiencies across the entire technology stack. It provides a structured framework for identifying high-impact issues like the N+1 query problem, over-fetching, and inefficient frontend re-renders, offering concrete remediation strategies such as eager loading, memoization, and batching. Whether you are optimizing a database layer, refactoring a React application, or streamlining a REST API, this skill helps ensure your code scales efficiently and remains responsive under load.

主な機能

01Improves frontend responsiveness by reducing unnecessary component re-renders

020 GitHub stars

03Optimizes API communication by addressing over-fetching and under-fetching

04Implements efficient data fetching strategies like pagination and Promise.all batching

05Detects and fixes N+1 query patterns in database and GraphQL layers

06Identifies O(n²) algorithmic complexities and suggests O(1) or O(n) solutions

ユースケース

01Refactoring slow database queries and implementing eager loading strategies

02Improving API performance by adding field selection and cursor-based pagination

03Optimizing React or frontend applications to eliminate UI jank and lag

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hculap/better-code performance-patterns

For use in Claude.ai and ChatGPT

主な機能

01Improves frontend responsiveness by reducing unnecessary component re-renders

020 GitHub stars

03Optimizes API communication by addressing over-fetching and under-fetching

04Implements efficient data fetching strategies like pagination and Promise.all batching

05Detects and fixes N+1 query patterns in database and GraphQL layers

06Identifies O(n²) algorithmic complexities and suggests O(1) or O(n) solutions

ユースケース

01Refactoring slow database queries and implementing eager loading strategies

02Improving API performance by adding field selection and cursor-based pagination

03Optimizing React or frontend applications to eliminate UI jank and lag

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hculap/better-code performance-patterns

For use in Claude.ai and ChatGPT