Synthèse automatique
Fournit une approche systématique pour identifier et résoudre les goulots d'étranglement de performance dans les bases de données, les API et le frontend.
Points forts
- Flux de travail clair pour classer les goulots d'étranglement
- Couvre l'optimisation des index de base de données, le caching API et le lazy loading frontend
- Inclut des étapes de mesure de base et de vérification
Limites
- Suppose une familiarité avec des outils spécifiques (curl, webpack-bundle-analyzer)
- Peut ne pas couvrir les optimisations spécifiques à un langage ou framework
- Pas de directives pour les systèmes distribués ou les microservices
Lorsque les temps de réponse de l'application sont lents ou que vous devez améliorer systématiquement les performances sur toute la pile.
Lorsque le problème de performance est déjà isolé à un composant nécessitant une expertise approfondie (par exemple, la réécriture de requêtes SQL complexes au-delà de l'indexation).
Analyse de sécurité
SûrThe skill provides guidance on performance optimization techniques across layers, with no destructive, exfiltrating, or obfuscated actions. It uses Bash for measurement tools (curl, npm) and database scripts, which are standard and safe when used as directed for analysis purposes.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
My /api/users endpoint is taking over 2 seconds. I suspect it's a database query. Help me profile and optimize it.The admin dashboard loads slowly due to large bundle size. How can I reduce it with code splitting and lazy loading?I'm seeing many repeated database queries when fetching orders with their items. How do I detect and fix N+1?name: arch-performance-optimization version: 1.1.0 description: '[Architecture] Use when analyzing and improving performance for database queries, API endpoints, or frontend rendering.' allowed-tools: Read, Write, Edit, Grep, Glob, Bash, Task
[IMPORTANT] Use
TaskCreateto break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI may ask user whether to skip.
Prerequisites: MUST READ .claude/skills/shared/evidence-based-reasoning-protocol.md before executing.
Quick Summary
Goal: Analyze and resolve performance bottlenecks across database, API, network, and frontend layers.
Workflow:
- Identify Bottleneck — Classify as database, API, network, or frontend issue
- Measure Baseline — Gather metrics before changes (response time, query time, bundle size)
- Optimize — Apply layer-specific fixes (indexes, caching, lazy loading, OnPush)
- Verify — Measure again and confirm improvement without regressions
Key Rules:
- Never use
SELECT *or unbounded result sets in production - Always use async I/O; never block threads with
.Result - Avoid N+1 queries — use eager loading or batch fetching
- Use bounded parallelism (
ParallelAsyncwithmaxConcurrent) for background jobs
Performance Optimization Workflow
When to Use This Skill
- Slow API response times
- Database query optimization
- Frontend rendering issues
- Memory usage concerns
- Scalability planning
Pre-Flight Checklist
- [ ] Identify performance bottleneck
- [ ] Gather baseline metrics
- [ ] Determine acceptable thresholds
- [ ] Plan measurement approach
Performance Analysis Framework
Step 1: Identify Bottleneck Type
Performance Issue
├── Database (slow queries, N+1)
├── API (serialization, processing)
├── Network (payload size, latency)
└── Frontend (rendering, bundle size)
Step 2: Measure Baseline
# 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
Database Optimization
⚠️ MUST READ: CLAUDE.md for N+1 detection, eager loading, projection, paging, and parallel query patterns. See database-optimization skill for advanced index and query optimization.
Index Recommendations
-- 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);
API Optimization
⚠️ MUST READ: CLAUDE.md for parallel tuple queries and response DTO patterns.
Caching
// 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;
}
Frontend Optimization
Bundle Size
// :x: Import entire library
import _ from 'lodash';
// :white_check_mark: Import specific functions
import { debounce } from 'lodash-es/debounce';
Lazy Loading
// :white_check_mark: Lazy load routes
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];
Change Detection
// :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)
Virtual Scrolling
// 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>
Background Job Optimization
⚠️ MUST READ: CLAUDE.md for bounded parallelism (ParallelAsync with maxConcurrent) and batch processing (UpdateManyAsync) patterns.
Performance Monitoring
Logging Slow Operations
var sw = Stopwatch.StartNew();
var result = await ExecuteOperation();
sw.Stop();
if (sw.ElapsedMilliseconds > 1000)
Logger.LogWarning("Slow operation: {Ms}ms", sw.ElapsedMilliseconds);
Database Query Logging
// In DbContext configuration
optionsBuilder.LogTo(
Console.WriteLine,
new[] { DbLoggerCategory.Database.Command.Name },
LogLevel.Information);
Performance Checklist
Database
- [ ] Indexes on filtered columns
- [ ] Eager loading for relations
- [ ] Projection for partial data
- [ ] Paging at database level
- [ ] No N+1 queries
API
- [ ] Parallel operations where possible
- [ ] Response DTOs (not entities)
- [ ] Caching for static data
- [ ] Pagination for lists
Frontend
- [ ] Lazy loading for routes
- [ ] OnPush change detection
- [ ] Track-by for lists
- [ ] Virtual scrolling for large lists
- [ ] Tree-shaking imports
Background Jobs
- [ ] Bounded parallelism
- [ ] Batch operations
- [ ] Paged processing
- [ ] Appropriate scheduling
Anti-Patterns to AVOID
: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
Verification Checklist
- [ ] Baseline metrics recorded
- [ ] Bottleneck identified and addressed
- [ ] Changes measured against baseline
- [ ] No new performance issues introduced
- [ ] Monitoring in place
Related
arch-security-reviewdatabase-optimization
IMPORTANT Task Planning Notes (MUST FOLLOW)
- Always plan and break work into many small todo tasks
- Always add a final review todo task to verify work quality and identify fixes/enhancements
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/architecture-performance-optimization-mm78nmmh/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/architecture-performance-optimization-mm78nmmh' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/architecture-performance-optimization-mm78nmmh/download' --output '.skill-downloads/architecture-performance-optimization-mm78nmmh/SKILL.md.part' && mv '.skill-downloads/architecture-performance-optimization-mm78nmmh/SKILL.md.part' '.skill-downloads/architecture-performance-optimization-mm78nmmh/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Outils déclarés par l’auteur (à vérifier dans votre agent) : Read, Write, Edit, Grep, Glob, Bash, Task
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/architecture-performance-optimization-mm78nmmh/SKILL.md' && test -s '.skill-downloads/architecture-performance-optimization-mm78nmmh/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/arch-performance-optimization' && cp -R '.skill-downloads/architecture-performance-optimization-mm78nmmh' '.claude/skills/arch-performance-optimization'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/architecture-performance-optimization-mm78nmmh'openskills read 'architecture-performance-optimization-mm78nmmh'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/architecture-performance-optimization-mm78nmmh/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.