feat: improved the Claude Kit as a plugin

skills/performance-optimization/references/anti-patterns.md

@@ -0,0 +1,115 @@
+# Performance Anti-Patterns
+
+## N+1 Queries
+
+**Signal**: Many small queries instead of one batch query.
+
+### SQLAlchemy (Python)
+```python
+# BAD: N+1 — each user triggers a query for posts
+users = session.query(User).all()
+for user in users:
+    print(user.posts)  # lazy load, 1 query per user
+
+# GOOD: eager loading
+from sqlalchemy.orm import joinedload, selectinload
+users = session.query(User).options(selectinload(User.posts)).all()
+```
+
+### Prisma (TypeScript)
+```typescript
+// BAD: N+1
+const users = await prisma.user.findMany();
+for (const user of users) {
+  const posts = await prisma.post.findMany({ where: { authorId: user.id } });
+}
+
+// GOOD: include
+const users = await prisma.user.findMany({ include: { posts: true } });
+```
+
+### Django
+```python
+# BAD
+for order in Order.objects.all():
+    print(order.customer.name)  # N+1
+
+# GOOD
+for order in Order.objects.select_related('customer').all():
+    print(order.customer.name)  # 1 query with JOIN
+```
+
+## Unnecessary Re-renders (React)
+
+**Signal**: Components re-rendering when their data hasn't changed.
+
+```typescript
+// BAD: new object created every render
+<Child style={{ color: 'red' }} />
+
+// GOOD: stable reference
+const style = useMemo(() => ({ color: 'red' }), []);
+<Child style={style} />
+
+// BAD: new function every render
+<Button onClick={() => handleClick(id)} />
+
+// GOOD: stable callback
+const handleClick = useCallback(() => doSomething(id), [id]);
+<Button onClick={handleClick} />
+```
+
+Detect with: React DevTools Profiler → "Highlight updates when components render"
+
+## Blocking the Event Loop (Node.js)
+
+**Signal**: High event loop lag, slow response times.
+
+```typescript
+// BAD: synchronous file read blocks everything
+const data = fs.readFileSync('large-file.json');
+
+// GOOD: async
+const data = await fs.promises.readFile('large-file.json');
+
+// BAD: CPU-heavy in main thread
+const hash = crypto.pbkdf2Sync(password, salt, 100000, 64, 'sha512');
+
+// GOOD: async or worker_threads
+const hash = await new Promise((resolve, reject) => {
+  crypto.pbkdf2(password, salt, 100000, 64, 'sha512', (err, key) => {
+    err ? reject(err) : resolve(key);
+  });
+});
+```
+
+## Memory Leaks
+
+### Python
+- Circular references with `__del__`
+- Unclosed file handles / DB connections
+- Growing global caches without TTL
+- Detect: `objgraph`, `tracemalloc`
+
+### JavaScript
+- Detached DOM nodes
+- Forgotten event listeners (`addEventListener` without `removeEventListener`)
+- Closures capturing large scopes
+- Unbounded `Map`/`Set` growth
+- Detect: Chrome Heap Snapshots, `process.memoryUsage()`
+
+## Heavy Imports / Bundle Bloat
+
+```typescript
+// BAD: imports entire library
+import _ from 'lodash';
+
+// GOOD: tree-shakeable import
+import { debounce } from 'lodash-es';
+
+// GOOD: native alternative
+const debounce = (fn, ms) => { /* 5 lines */ };
+```
+
+Replace heavy deps: moment → dayjs, lodash → lodash-es or native, date-fns (tree-shakeable).
+Use `React.lazy()` + `Suspense` for route-based code splitting.

skills/performance-optimization/references/profiling.md

@@ -0,0 +1,109 @@
+# Profiling Tools Reference
+
+## Python
+
+### cProfile (built-in, function-level)
+```bash
+python -m cProfile -o output.prof script.py
+# Visualize
+pip install snakeviz && snakeviz output.prof
+```
+
+### py-spy (sampling, production-safe)
+```bash
+# Top-like view of running process
+py-spy top --pid 12345
+
+# Generate flame graph
+py-spy record -o profile.svg --pid 12345
+```
+
+### line_profiler (line-by-line)
+```bash
+# Add @profile decorator to target function
+kernprof -lv script.py
+```
+
+### memory_profiler (memory usage)
+```bash
+# Add @profile decorator
+python -m memory_profiler script.py
+
+# Or use stdlib tracemalloc for snapshot comparison
+```
+
+### Scalene (CPU + memory + GPU)
+```bash
+scalene script.py
+# Modern alternative, AI-suggested optimizations
+```
+
+## JavaScript / TypeScript
+
+### Chrome DevTools Performance
+- Performance tab → Record → interact → Stop
+- Flame chart shows main thread activity
+- Look for long tasks (>50ms), layout thrashing
+
+### Lighthouse (web vitals)
+```bash
+npx lighthouse https://localhost:3000 --output=json
+# CI integration
+npx @lhci/cli autorun
+```
+
+### Bundle Analysis
+```bash
+# Webpack
+npx webpack-bundle-analyzer stats.json
+
+# Next.js
+ANALYZE=true next build
+
+# Source map explorer
+npx source-map-explorer dist/**/*.js
+```
+
+### clinic.js (Node.js)
+```bash
+# Event loop health
+clinic doctor -- node app.js
+
+# CPU flame graph
+clinic flame -- node app.js
+
+# Async bottlenecks
+clinic bubbleprof -- node app.js
+```
+
+### Node.js built-in
+```bash
+node --prof app.js
+node --prof-process isolate-*.log > profile.txt
+```
+
+## Benchmarking
+
+### Python
+```bash
+# pytest-benchmark
+pytest --benchmark-only
+
+# timeit
+python -m timeit -s "setup" "expression"
+```
+
+### JavaScript/TypeScript
+```typescript
+// Vitest bench (built-in)
+// my-func.bench.ts
+import { bench } from 'vitest';
+
+bench('my function', () => {
+  myFunction(testData);
+});
+```
+
+```bash
+npx vitest bench
+```