.claude/skills/arch-performance-optimization/SKILL.md
Use when analyzing and improving performance for database queries, API endpoints, or frontend rendering.
npx skillsauth add CongDon1207/AGENTS.md performance-optimizationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Performance Issue
├── Database (slow queries, N+1)
├── API (serialization, processing)
├── Network (payload size, latency)
└── Frontend (rendering, bundle size)
# API response time
curl -w "@curl-format.txt" -o /dev/null -s "http://api/endpoint"
# Database query time (SQL Server)
SET STATISTICS TIME ON;
SELECT * FROM Table WHERE ...;
# Frontend bundle analysis
npm run build -- --stats-json
npx webpack-bundle-analyzer stats.json
// :x: N+1 Problem
var employees = await repo.GetAllAsync();
foreach (var emp in employees)
{
// Each iteration queries database!
Console.WriteLine(emp.Department.Name);
}
// :white_check_mark: Eager Loading
var employees = await repo.GetAllAsync(
e => e.CompanyId == companyId,
ct,
e => e.Department, // Include Department
e => e.Manager // Include Manager
);
// :x: Loading all columns
var employees = await repo.GetAllAsync();
var names = employees.Select(e => e.Name);
// :white_check_mark: Projection
var names = await repo.GetAllAsync(
q => q.Where(e => e.IsActive)
.Select(e => e.Name));
-- Frequently filtered columns
CREATE INDEX IX_Employee_CompanyId ON Employees(CompanyId);
CREATE INDEX IX_Employee_Status ON Employees(Status);
-- Composite index for common queries
CREATE INDEX IX_Employee_Company_Status
ON Employees(CompanyId, Status)
INCLUDE (FullName, Email);
-- Full-text search index
CREATE FULLTEXT INDEX ON Employees(FullName, Email);
// :x: Loading all then paging in memory
var all = await repo.GetAllAsync();
var page = all.Skip(skip).Take(take);
// :white_check_mark: Database-level paging
var page = await repo.GetAllAsync(
(uow, q) => q
.Where(e => e.IsActive)
.OrderBy(e => e.Id)
.Skip(skip)
.Take(take));
// :x: Sequential
var users = await userRepo.GetAllAsync();
var companies = await companyRepo.GetAllAsync();
var settings = await settingsRepo.GetAllAsync();
// :white_check_mark: Parallel (Tuple Await)
var (users, companies, settings) = await (
userRepo.GetAllAsync(),
companyRepo.GetAllAsync(),
settingsRepo.GetAllAsync()
);
// :x: Returning entire entity
return new Result { Employee = employee };
// :white_check_mark: Return only needed fields
return new Result
{
Id = employee.Id,
Name = employee.FullName,
Status = employee.Status
};
// Static data caching
private static readonly ConcurrentDictionary<string, LookupData> _cache = new();
public async Task<LookupData> GetLookupAsync(string key)
{
if (_cache.TryGetValue(key, out var cached))
return cached;
var data = await LoadFromDbAsync(key);
_cache.TryAdd(key, data);
return data;
}
// :x: Import entire library
import _ from 'lodash';
// :white_check_mark: Import specific functions
import { debounce } from 'lodash-es/debounce';
// :white_check_mark: Lazy load routes
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module')
.then(m => m.FeatureModule)
}
];
// :white_check_mark: OnPush for performance
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
})
// :white_check_mark: Track-by for lists
trackByItem = this.ngForTrackByItemProp<Item>('id');
// Template
@for (item of items; track trackByItem)
// For large lists
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
<cdk-virtual-scroll-viewport itemSize="50">
@for (item of items; track item.id) {
<div class="item">{{ item.name }}</div>
}
</cdk-virtual-scroll-viewport>
// :x: Unbounded
await items.ParallelAsync(ProcessAsync);
// :white_check_mark: Bounded
await items.ParallelAsync(ProcessAsync, maxConcurrent: 5);
// :x: One at a time
foreach (var item in items)
await repo.UpdateAsync(item);
// :white_check_mark: Batch update
await repo.UpdateManyAsync(items, dismissSendEvent: true);
var sw = Stopwatch.StartNew();
var result = await ExecuteOperation();
sw.Stop();
if (sw.ElapsedMilliseconds > 1000)
Logger.LogWarning("Slow operation: {Ms}ms", sw.ElapsedMilliseconds);
// In DbContext configuration
optionsBuilder.LogTo(
Console.WriteLine,
new[] { DbLoggerCategory.Database.Command.Name },
LogLevel.Information);
:x: SELECT * in production
var all = await context.Table.ToListAsync();
:x: Synchronous I/O
var result = asyncOperation.Result; // Blocks thread
:x: Unbounded result sets
await repo.GetAllAsync(); // Could be millions
:x: Repeated database calls in loops
foreach (var id in ids)
await repo.GetByIdAsync(id); // N queries
development
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications, OR when they provide screenshots/images/designs to replicate or draw inspiration from. For screenshot inputs, extracts design guidelines first using ai-multimodal analysis, then implements code following those guidelines. Generates creative, polished code that avoids generic AI aesthetics.
development
Use when the user asks to investigate, understand, explore, or explain how a feature works, asks about existing logic, or wants to understand code flow. Triggers on keywords like "how does", "explain", "investigate", "understand", "what does", "where is", "how works", "logic flow", "trace", "explore feature".
development
Use when the user asks to implement a new feature, enhancement, add functionality, build something new, or create new capabilities. Triggers on keywords like "implement", "add feature", "build", "create new", "develop", "enhancement".
development
Use when the user asks to generate comprehensive feature documentation with verified test cases, create feature README with code evidence, or document a complete feature with test verification. Triggers on keywords like "feature documentation", "document feature", "comprehensive docs", "feature README", "test verification", "verified documentation".