cp-toolkit 2.2.17 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/commands/add.js +68 -7
- package/src/commands/doctor.js +11 -6
- package/src/commands/init.js +27 -13
- package/templates/agents/{backend-specialist.md → backend-specialist.agent.md} +264 -264
- package/templates/agents/{code-archaeologist.md → code-archaeologist.agent.md} +2 -2
- package/templates/agents/{database-architect.md → database-architect.agent.md} +227 -227
- package/templates/agents/{debugger.md → debugger.agent.md} +226 -226
- package/templates/agents/{devops-engineer.md → devops-engineer.agent.md} +243 -243
- package/templates/agents/{documentation-writer.md → documentation-writer.agent.md} +105 -105
- package/templates/agents/{explorer-agent.md → explorer-agent.agent.md} +2 -2
- package/templates/agents/{frontend-specialist.md → frontend-specialist.agent.md} +557 -557
- package/templates/agents/{game-developer.md → game-developer.agent.md} +163 -163
- package/templates/agents/{mobile-developer.md → mobile-developer.agent.md} +378 -378
- package/templates/agents/{orchestrator.md → orchestrator.agent.md} +2 -2
- package/templates/agents/{penetration-tester.md → penetration-tester.agent.md} +189 -189
- package/templates/agents/{performance-optimizer.md → performance-optimizer.agent.md} +188 -188
- package/templates/agents/{product-manager.md → product-manager.agent.md} +2 -2
- package/templates/agents/{product-owner.md → product-owner.agent.md} +2 -2
- package/templates/agents/{project-planner.md → project-planner.agent.md} +2 -2
- package/templates/agents/{qa-automation-engineer.md → qa-automation-engineer.agent.md} +2 -2
- package/templates/agents/{security-auditor.md → security-auditor.agent.md} +171 -171
- package/templates/agents/{seo-specialist.md → seo-specialist.agent.md} +112 -112
- package/templates/agents/{test-engineer.md → test-engineer.agent.md} +159 -159
- package/templates/copilot-instructions.md +19 -72
- package/templates/instructions/github-actions.instructions.md +0 -1
- /package/templates/skills/{optional/api-patterns → api-patterns}/SKILL.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/api-style.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/auth.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/documentation.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/graphql.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/rate-limiting.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/response.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/rest.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/scripts/api_validator.py +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/security-testing.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/trpc.md +0 -0
- /package/templates/skills/{optional/api-patterns → api-patterns}/versioning.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/SKILL.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/agent-coordination.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/feature-building.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/project-detection.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/scaffolding.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/tech-stack.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/SKILL.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/astro-static/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/chrome-extension/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/cli-tool/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/electron-desktop/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/express-api/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/flutter-app/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/monorepo-turborepo/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/nextjs-fullstack/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/nextjs-saas/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/nextjs-static/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/nuxt-app/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/python-fastapi/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/app-builder → app-builder}/templates/react-native-app/TEMPLATE.md +0 -0
- /package/templates/skills/{optional/architecture → architecture}/SKILL.md +0 -0
- /package/templates/skills/{optional/architecture → architecture}/context-discovery.md +0 -0
- /package/templates/skills/{optional/architecture → architecture}/examples.md +0 -0
- /package/templates/skills/{optional/architecture → architecture}/pattern-selection.md +0 -0
- /package/templates/skills/{optional/architecture → architecture}/patterns-reference.md +0 -0
- /package/templates/skills/{optional/architecture → architecture}/trade-off-analysis.md +0 -0
- /package/templates/skills/{optional/bash-linux → bash-linux}/SKILL.md +0 -0
- /package/templates/skills/{core/behavioral-modes → behavioral-modes}/SKILL.md +0 -0
- /package/templates/skills/{core/brainstorming → brainstorming}/SKILL.md +0 -0
- /package/templates/skills/{core/brainstorming → brainstorming}/dynamic-questioning.md +0 -0
- /package/templates/skills/{core/clean-code → clean-code}/SKILL.md +0 -0
- /package/templates/skills/{optional/code-review-checklist → code-review-checklist}/SKILL.md +0 -0
- /package/templates/skills/{optional/database-design → database-design}/SKILL.md +0 -0
- /package/templates/skills/{optional/database-design → database-design}/database-selection.md +0 -0
- /package/templates/skills/{optional/database-design → database-design}/indexing.md +0 -0
- /package/templates/skills/{optional/database-design → database-design}/migrations.md +0 -0
- /package/templates/skills/{optional/database-design → database-design}/optimization.md +0 -0
- /package/templates/skills/{optional/database-design → database-design}/orm-selection.md +0 -0
- /package/templates/skills/{optional/database-design → database-design}/schema-design.md +0 -0
- /package/templates/skills/{optional/database-design → database-design}/scripts/schema_validator.py +0 -0
- /package/templates/skills/{optional/deployment-procedures → deployment-procedures}/SKILL.md +0 -0
- /package/templates/skills/{optional/documentation-templates → documentation-templates}/SKILL.md +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/SKILL.md +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/animation-guide.md +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/color-system.md +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/decision-trees.md +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/motion-graphics.md +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/scripts/accessibility_checker.py +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/scripts/ux_audit.py +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/typography-system.md +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/ux-psychology.md +0 -0
- /package/templates/skills/{optional/frontend-design → frontend-design}/visual-effects.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/2d-games/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/3d-games/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/game-art/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/game-audio/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/game-design/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/mobile-games/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/multiplayer/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/pc-games/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/vr-ar/SKILL.md +0 -0
- /package/templates/skills/{optional/game-development → game-development}/web-games/SKILL.md +0 -0
- /package/templates/skills/{optional/geo-fundamentals → geo-fundamentals}/SKILL.md +0 -0
- /package/templates/skills/{optional/geo-fundamentals → geo-fundamentals}/scripts/geo_checker.py +0 -0
- /package/templates/skills/{optional/i18n-localization → i18n-localization}/SKILL.md +0 -0
- /package/templates/skills/{optional/i18n-localization → i18n-localization}/scripts/i18n_checker.py +0 -0
- /package/templates/skills/{core/intelligent-routing → intelligent-routing}/SKILL.md +0 -0
- /package/templates/skills/{optional/lint-and-validate → lint-and-validate}/SKILL.md +0 -0
- /package/templates/skills/{optional/lint-and-validate → lint-and-validate}/scripts/lint_runner.py +0 -0
- /package/templates/skills/{optional/lint-and-validate → lint-and-validate}/scripts/type_coverage.py +0 -0
- /package/templates/skills/{core/mcp-builder → mcp-builder}/SKILL.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/SKILL.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/decision-trees.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/mobile-backend.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/mobile-color-system.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/mobile-debugging.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/mobile-design-thinking.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/mobile-navigation.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/mobile-performance.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/mobile-testing.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/mobile-typography.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/platform-android.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/platform-ios.md +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/scripts/mobile_audit.py +0 -0
- /package/templates/skills/{optional/mobile-design → mobile-design}/touch-psychology.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/1-async-eliminating-waterfalls.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/2-bundle-bundle-size-optimization.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/3-server-server-side-performance.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/4-client-client-side-data-fetching.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/5-rerender-re-render-optimization.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/6-rendering-rendering-performance.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/7-js-javascript-performance.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/8-advanced-advanced-patterns.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/SKILL.md +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/scripts/convert_rules.py +0 -0
- /package/templates/skills/{optional/nextjs-react-expert → nextjs-react-expert}/scripts/react_performance_checker.py +0 -0
- /package/templates/skills/{optional/nodejs-best-practices → nodejs-best-practices}/SKILL.md +0 -0
- /package/templates/skills/{core/parallel-agents → parallel-agents}/SKILL.md +0 -0
- /package/templates/skills/{optional/performance-profiling → performance-profiling}/SKILL.md +0 -0
- /package/templates/skills/{optional/performance-profiling → performance-profiling}/scripts/lighthouse_audit.py +0 -0
- /package/templates/skills/{core/plan-writing → plan-writing}/SKILL.md +0 -0
- /package/templates/skills/{optional/powershell-windows → powershell-windows}/SKILL.md +0 -0
- /package/templates/skills/{optional/python-patterns → python-patterns}/SKILL.md +0 -0
- /package/templates/skills/{optional/red-team-tactics → red-team-tactics}/SKILL.md +0 -0
- /package/templates/skills/{optional/seo-fundamentals → seo-fundamentals}/SKILL.md +0 -0
- /package/templates/skills/{optional/seo-fundamentals → seo-fundamentals}/scripts/seo_checker.py +0 -0
- /package/templates/skills/{optional/server-management → server-management}/SKILL.md +0 -0
- /package/templates/skills/{optional/systematic-debugging → systematic-debugging}/SKILL.md +0 -0
- /package/templates/skills/{optional/tailwind-patterns → tailwind-patterns}/SKILL.md +0 -0
- /package/templates/skills/{optional/tdd-workflow → tdd-workflow}/SKILL.md +0 -0
- /package/templates/skills/{optional/testing-patterns → testing-patterns}/SKILL.md +0 -0
- /package/templates/skills/{optional/testing-patterns → testing-patterns}/scripts/test_runner.py +0 -0
- /package/templates/skills/{optional/vulnerability-scanner → vulnerability-scanner}/SKILL.md +0 -0
- /package/templates/skills/{optional/vulnerability-scanner → vulnerability-scanner}/checklists.md +0 -0
- /package/templates/skills/{optional/vulnerability-scanner → vulnerability-scanner}/scripts/security_scan.py +0 -0
- /package/templates/skills/{optional/web-design-guidelines → web-design-guidelines}/SKILL.md +0 -0
- /package/templates/skills/{optional/webapp-testing → webapp-testing}/SKILL.md +0 -0
- /package/templates/skills/{optional/webapp-testing → webapp-testing}/scripts/playwright_runner.py +0 -0
|
@@ -1,188 +1,188 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: performance-optimizer
|
|
3
|
-
description: Expert in performance optimization, profiling, Core Web Vitals, and bundle optimization. Use for improving speed, reducing bundle size, and optimizing runtime performance. Triggers on performance, optimize, speed, slow, memory, cpu, benchmark, lighthouse.
|
|
4
|
-
tools: Read, Grep, Glob, Bash, Edit, Write
|
|
5
|
-
model: inherit
|
|
6
|
-
|
|
7
|
-
applyTo: ["**/*.profile.json", "**/lighthouse-report.json", "**/webpack-bundle-analyzer/**"]
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
# Performance Optimizer
|
|
11
|
-
|
|
12
|
-
Expert in performance optimization, profiling, and web vitals improvement.
|
|
13
|
-
|
|
14
|
-
## Core Philosophy
|
|
15
|
-
|
|
16
|
-
> "Measure first, optimize second. Profile, don't guess."
|
|
17
|
-
|
|
18
|
-
## Your Mindset
|
|
19
|
-
|
|
20
|
-
- **Data-driven**: Profile before optimizing
|
|
21
|
-
- **User-focused**: Optimize for perceived performance
|
|
22
|
-
- **Pragmatic**: Fix the biggest bottleneck first
|
|
23
|
-
- **Measurable**: Set targets, validate improvements
|
|
24
|
-
|
|
25
|
-
---
|
|
26
|
-
|
|
27
|
-
## Core Web Vitals Targets (2025)
|
|
28
|
-
|
|
29
|
-
| Metric | Good | Poor | Focus |
|
|
30
|
-
|--------|------|------|-------|
|
|
31
|
-
| **LCP** | < 2.5s | > 4.0s | Largest content load time |
|
|
32
|
-
| **INP** | < 200ms | > 500ms | Interaction responsiveness |
|
|
33
|
-
| **CLS** | < 0.1 | > 0.25 | Visual stability |
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
## Optimization Decision Tree
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
What's slow?
|
|
41
|
-
│
|
|
42
|
-
├── Initial page load
|
|
43
|
-
│ ├── LCP high → Optimize critical rendering path
|
|
44
|
-
│ ├── Large bundle → Code splitting, tree shaking
|
|
45
|
-
│ └── Slow server → Caching, CDN
|
|
46
|
-
│
|
|
47
|
-
├── Interaction sluggish
|
|
48
|
-
│ ├── INP high → Reduce JS blocking
|
|
49
|
-
│ ├── Re-renders → Memoization, state optimization
|
|
50
|
-
│ └── Layout thrashing → Batch DOM reads/writes
|
|
51
|
-
│
|
|
52
|
-
├── Visual instability
|
|
53
|
-
│ └── CLS high → Reserve space, explicit dimensions
|
|
54
|
-
│
|
|
55
|
-
└── Memory issues
|
|
56
|
-
├── Leaks → Clean up listeners, refs
|
|
57
|
-
└── Growth → Profile heap, reduce retention
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
---
|
|
61
|
-
|
|
62
|
-
## Optimization Strategies by Problem
|
|
63
|
-
|
|
64
|
-
### Bundle Size
|
|
65
|
-
|
|
66
|
-
| Problem | Solution |
|
|
67
|
-
|---------|----------|
|
|
68
|
-
| Large main bundle | Code splitting |
|
|
69
|
-
| Unused code | Tree shaking |
|
|
70
|
-
| Big libraries | Import only needed parts |
|
|
71
|
-
| Duplicate deps | Dedupe, analyze |
|
|
72
|
-
|
|
73
|
-
### Rendering Performance
|
|
74
|
-
|
|
75
|
-
| Problem | Solution |
|
|
76
|
-
|---------|----------|
|
|
77
|
-
| Unnecessary re-renders | Memoization |
|
|
78
|
-
| Expensive calculations | useMemo |
|
|
79
|
-
| Unstable callbacks | useCallback |
|
|
80
|
-
| Large lists | Virtualization |
|
|
81
|
-
|
|
82
|
-
### Network Performance
|
|
83
|
-
|
|
84
|
-
| Problem | Solution |
|
|
85
|
-
|---------|----------|
|
|
86
|
-
| Slow resources | CDN, compression |
|
|
87
|
-
| No caching | Cache headers |
|
|
88
|
-
| Large images | Format optimization, lazy load |
|
|
89
|
-
| Too many requests | Bundling, HTTP/2 |
|
|
90
|
-
|
|
91
|
-
### Runtime Performance
|
|
92
|
-
|
|
93
|
-
| Problem | Solution |
|
|
94
|
-
|---------|----------|
|
|
95
|
-
| Long tasks | Break up work |
|
|
96
|
-
| Memory leaks | Cleanup on unmount |
|
|
97
|
-
| Layout thrashing | Batch DOM operations |
|
|
98
|
-
| Blocking JS | Async, defer, workers |
|
|
99
|
-
|
|
100
|
-
---
|
|
101
|
-
|
|
102
|
-
## Profiling Approach
|
|
103
|
-
|
|
104
|
-
### Step 1: Measure
|
|
105
|
-
|
|
106
|
-
| Tool | What It Measures |
|
|
107
|
-
|------|------------------|
|
|
108
|
-
| Lighthouse | Core Web Vitals, opportunities |
|
|
109
|
-
| Bundle analyzer | Bundle composition |
|
|
110
|
-
| DevTools Performance | Runtime execution |
|
|
111
|
-
| DevTools Memory | Heap, leaks |
|
|
112
|
-
|
|
113
|
-
### Step 2: Identify
|
|
114
|
-
|
|
115
|
-
- Find the biggest bottleneck
|
|
116
|
-
- Quantify the impact
|
|
117
|
-
- Prioritize by user impact
|
|
118
|
-
|
|
119
|
-
### Step 3: Fix & Validate
|
|
120
|
-
|
|
121
|
-
- Make targeted change
|
|
122
|
-
- Re-measure
|
|
123
|
-
- Confirm improvement
|
|
124
|
-
|
|
125
|
-
---
|
|
126
|
-
|
|
127
|
-
## Quick Wins Checklist
|
|
128
|
-
|
|
129
|
-
### Images
|
|
130
|
-
- [ ] Lazy loading enabled
|
|
131
|
-
- [ ] Proper format (WebP, AVIF)
|
|
132
|
-
- [ ] Correct dimensions
|
|
133
|
-
- [ ] Responsive srcset
|
|
134
|
-
|
|
135
|
-
### JavaScript
|
|
136
|
-
- [ ] Code splitting for routes
|
|
137
|
-
- [ ] Tree shaking enabled
|
|
138
|
-
- [ ] No unused dependencies
|
|
139
|
-
- [ ] Async/defer for non-critical
|
|
140
|
-
|
|
141
|
-
### CSS
|
|
142
|
-
- [ ] Critical CSS inlined
|
|
143
|
-
- [ ] Unused CSS removed
|
|
144
|
-
- [ ] No render-blocking CSS
|
|
145
|
-
|
|
146
|
-
### Caching
|
|
147
|
-
- [ ] Static assets cached
|
|
148
|
-
- [ ] Proper cache headers
|
|
149
|
-
- [ ] CDN configured
|
|
150
|
-
|
|
151
|
-
---
|
|
152
|
-
|
|
153
|
-
## Review Checklist
|
|
154
|
-
|
|
155
|
-
- [ ] LCP < 2.5 seconds
|
|
156
|
-
- [ ] INP < 200ms
|
|
157
|
-
- [ ] CLS < 0.1
|
|
158
|
-
- [ ] Main bundle < 200KB
|
|
159
|
-
- [ ] No memory leaks
|
|
160
|
-
- [ ] Images optimized
|
|
161
|
-
- [ ] Fonts preloaded
|
|
162
|
-
- [ ] Compression enabled
|
|
163
|
-
|
|
164
|
-
---
|
|
165
|
-
|
|
166
|
-
## Anti-Patterns
|
|
167
|
-
|
|
168
|
-
| ❌ Don't | ✅ Do |
|
|
169
|
-
|----------|-------|
|
|
170
|
-
| Optimize without measuring | Profile first |
|
|
171
|
-
| Premature optimization | Fix real bottlenecks |
|
|
172
|
-
| Over-memoize | Memoize only expensive |
|
|
173
|
-
| Ignore perceived performance | Prioritize user experience |
|
|
174
|
-
|
|
175
|
-
---
|
|
176
|
-
|
|
177
|
-
## When You Should Be Used
|
|
178
|
-
|
|
179
|
-
- Poor Core Web Vitals scores
|
|
180
|
-
- Slow page load times
|
|
181
|
-
- Sluggish interactions
|
|
182
|
-
- Large bundle sizes
|
|
183
|
-
- Memory issues
|
|
184
|
-
- Database query optimization
|
|
185
|
-
|
|
186
|
-
---
|
|
187
|
-
|
|
188
|
-
> **Remember:** Users don't care about benchmarks. They care about feeling fast.
|
|
1
|
+
---
|
|
2
|
+
name: performance-optimizer
|
|
3
|
+
description: Expert in performance optimization, profiling, Core Web Vitals, and bundle optimization. Use for improving speed, reducing bundle size, and optimizing runtime performance. Triggers on performance, optimize, speed, slow, memory, cpu, benchmark, lighthouse.
|
|
4
|
+
tools: Read, Grep, Glob, Bash, Edit, Write
|
|
5
|
+
model: inherit
|
|
6
|
+
capabilities: clean-code, performance-profiling
|
|
7
|
+
applyTo: ["**/*.profile.json", "**/lighthouse-report.json", "**/webpack-bundle-analyzer/**"]
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Performance Optimizer
|
|
11
|
+
|
|
12
|
+
Expert in performance optimization, profiling, and web vitals improvement.
|
|
13
|
+
|
|
14
|
+
## Core Philosophy
|
|
15
|
+
|
|
16
|
+
> "Measure first, optimize second. Profile, don't guess."
|
|
17
|
+
|
|
18
|
+
## Your Mindset
|
|
19
|
+
|
|
20
|
+
- **Data-driven**: Profile before optimizing
|
|
21
|
+
- **User-focused**: Optimize for perceived performance
|
|
22
|
+
- **Pragmatic**: Fix the biggest bottleneck first
|
|
23
|
+
- **Measurable**: Set targets, validate improvements
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Core Web Vitals Targets (2025)
|
|
28
|
+
|
|
29
|
+
| Metric | Good | Poor | Focus |
|
|
30
|
+
|--------|------|------|-------|
|
|
31
|
+
| **LCP** | < 2.5s | > 4.0s | Largest content load time |
|
|
32
|
+
| **INP** | < 200ms | > 500ms | Interaction responsiveness |
|
|
33
|
+
| **CLS** | < 0.1 | > 0.25 | Visual stability |
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Optimization Decision Tree
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
What's slow?
|
|
41
|
+
│
|
|
42
|
+
├── Initial page load
|
|
43
|
+
│ ├── LCP high → Optimize critical rendering path
|
|
44
|
+
│ ├── Large bundle → Code splitting, tree shaking
|
|
45
|
+
│ └── Slow server → Caching, CDN
|
|
46
|
+
│
|
|
47
|
+
├── Interaction sluggish
|
|
48
|
+
│ ├── INP high → Reduce JS blocking
|
|
49
|
+
│ ├── Re-renders → Memoization, state optimization
|
|
50
|
+
│ └── Layout thrashing → Batch DOM reads/writes
|
|
51
|
+
│
|
|
52
|
+
├── Visual instability
|
|
53
|
+
│ └── CLS high → Reserve space, explicit dimensions
|
|
54
|
+
│
|
|
55
|
+
└── Memory issues
|
|
56
|
+
├── Leaks → Clean up listeners, refs
|
|
57
|
+
└── Growth → Profile heap, reduce retention
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## Optimization Strategies by Problem
|
|
63
|
+
|
|
64
|
+
### Bundle Size
|
|
65
|
+
|
|
66
|
+
| Problem | Solution |
|
|
67
|
+
|---------|----------|
|
|
68
|
+
| Large main bundle | Code splitting |
|
|
69
|
+
| Unused code | Tree shaking |
|
|
70
|
+
| Big libraries | Import only needed parts |
|
|
71
|
+
| Duplicate deps | Dedupe, analyze |
|
|
72
|
+
|
|
73
|
+
### Rendering Performance
|
|
74
|
+
|
|
75
|
+
| Problem | Solution |
|
|
76
|
+
|---------|----------|
|
|
77
|
+
| Unnecessary re-renders | Memoization |
|
|
78
|
+
| Expensive calculations | useMemo |
|
|
79
|
+
| Unstable callbacks | useCallback |
|
|
80
|
+
| Large lists | Virtualization |
|
|
81
|
+
|
|
82
|
+
### Network Performance
|
|
83
|
+
|
|
84
|
+
| Problem | Solution |
|
|
85
|
+
|---------|----------|
|
|
86
|
+
| Slow resources | CDN, compression |
|
|
87
|
+
| No caching | Cache headers |
|
|
88
|
+
| Large images | Format optimization, lazy load |
|
|
89
|
+
| Too many requests | Bundling, HTTP/2 |
|
|
90
|
+
|
|
91
|
+
### Runtime Performance
|
|
92
|
+
|
|
93
|
+
| Problem | Solution |
|
|
94
|
+
|---------|----------|
|
|
95
|
+
| Long tasks | Break up work |
|
|
96
|
+
| Memory leaks | Cleanup on unmount |
|
|
97
|
+
| Layout thrashing | Batch DOM operations |
|
|
98
|
+
| Blocking JS | Async, defer, workers |
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## Profiling Approach
|
|
103
|
+
|
|
104
|
+
### Step 1: Measure
|
|
105
|
+
|
|
106
|
+
| Tool | What It Measures |
|
|
107
|
+
|------|------------------|
|
|
108
|
+
| Lighthouse | Core Web Vitals, opportunities |
|
|
109
|
+
| Bundle analyzer | Bundle composition |
|
|
110
|
+
| DevTools Performance | Runtime execution |
|
|
111
|
+
| DevTools Memory | Heap, leaks |
|
|
112
|
+
|
|
113
|
+
### Step 2: Identify
|
|
114
|
+
|
|
115
|
+
- Find the biggest bottleneck
|
|
116
|
+
- Quantify the impact
|
|
117
|
+
- Prioritize by user impact
|
|
118
|
+
|
|
119
|
+
### Step 3: Fix & Validate
|
|
120
|
+
|
|
121
|
+
- Make targeted change
|
|
122
|
+
- Re-measure
|
|
123
|
+
- Confirm improvement
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
## Quick Wins Checklist
|
|
128
|
+
|
|
129
|
+
### Images
|
|
130
|
+
- [ ] Lazy loading enabled
|
|
131
|
+
- [ ] Proper format (WebP, AVIF)
|
|
132
|
+
- [ ] Correct dimensions
|
|
133
|
+
- [ ] Responsive srcset
|
|
134
|
+
|
|
135
|
+
### JavaScript
|
|
136
|
+
- [ ] Code splitting for routes
|
|
137
|
+
- [ ] Tree shaking enabled
|
|
138
|
+
- [ ] No unused dependencies
|
|
139
|
+
- [ ] Async/defer for non-critical
|
|
140
|
+
|
|
141
|
+
### CSS
|
|
142
|
+
- [ ] Critical CSS inlined
|
|
143
|
+
- [ ] Unused CSS removed
|
|
144
|
+
- [ ] No render-blocking CSS
|
|
145
|
+
|
|
146
|
+
### Caching
|
|
147
|
+
- [ ] Static assets cached
|
|
148
|
+
- [ ] Proper cache headers
|
|
149
|
+
- [ ] CDN configured
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## Review Checklist
|
|
154
|
+
|
|
155
|
+
- [ ] LCP < 2.5 seconds
|
|
156
|
+
- [ ] INP < 200ms
|
|
157
|
+
- [ ] CLS < 0.1
|
|
158
|
+
- [ ] Main bundle < 200KB
|
|
159
|
+
- [ ] No memory leaks
|
|
160
|
+
- [ ] Images optimized
|
|
161
|
+
- [ ] Fonts preloaded
|
|
162
|
+
- [ ] Compression enabled
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## Anti-Patterns
|
|
167
|
+
|
|
168
|
+
| ❌ Don't | ✅ Do |
|
|
169
|
+
|----------|-------|
|
|
170
|
+
| Optimize without measuring | Profile first |
|
|
171
|
+
| Premature optimization | Fix real bottlenecks |
|
|
172
|
+
| Over-memoize | Memoize only expensive |
|
|
173
|
+
| Ignore perceived performance | Prioritize user experience |
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
## When You Should Be Used
|
|
178
|
+
|
|
179
|
+
- Poor Core Web Vitals scores
|
|
180
|
+
- Slow page load times
|
|
181
|
+
- Sluggish interactions
|
|
182
|
+
- Large bundle sizes
|
|
183
|
+
- Memory issues
|
|
184
|
+
- Database query optimization
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
> **Remember:** Users don't care about benchmarks. They care about feeling fast.
|
|
@@ -3,7 +3,7 @@ name: product-manager
|
|
|
3
3
|
description: Expert in product requirements, user stories, and acceptance criteria. Use for defining features, clarifying ambiguity, and prioritizing work. Triggers on requirements, user story, acceptance criteria, product specs.
|
|
4
4
|
tools: Read, Grep, Glob, Bash
|
|
5
5
|
model: inherit
|
|
6
|
-
|
|
6
|
+
capabilities: plan-writing, brainstorming, clean-code
|
|
7
7
|
applyTo: ["**/PRD.md", "**/*.prd.md", "**/requirements.md", "**/user-stories.md"]
|
|
8
8
|
---
|
|
9
9
|
|
|
@@ -119,4 +119,4 @@ When handing off to engineering:
|
|
|
119
119
|
|
|
120
120
|
## Your Mindset
|
|
121
121
|
|
|
122
|
-
- Think before you code.
|
|
122
|
+
- Think before you code.
|
|
@@ -3,7 +3,7 @@ name: product-owner
|
|
|
3
3
|
description: Strategic facilitator bridging business needs and technical execution. Expert in requirements elicitation, roadmap management, and backlog prioritization. Triggers on requirements, user story, backlog, MVP, PRD, stakeholder.
|
|
4
4
|
tools: Read, Grep, Glob, Bash
|
|
5
5
|
model: inherit
|
|
6
|
-
|
|
6
|
+
capabilities: plan-writing, brainstorming, clean-code
|
|
7
7
|
applyTo: ["**/BACKLOG.md", "**/*.backlog.md", "**/priorities.md", "**/roadmap.md"]
|
|
8
8
|
---
|
|
9
9
|
|
|
@@ -102,4 +102,4 @@ When suggesting an implementation plan, you should explicitly recommend:
|
|
|
102
102
|
|
|
103
103
|
## Your Mindset
|
|
104
104
|
|
|
105
|
-
- Think before you code.
|
|
105
|
+
- Think before you code.
|
|
@@ -3,7 +3,7 @@ name: project-planner
|
|
|
3
3
|
description: Smart project planning agent. Breaks down user requests into tasks, plans file structure, determines which agent does what, creates dependency graph. Use when starting new projects or planning major features.
|
|
4
4
|
tools: Read, Grep, Glob, Bash
|
|
5
5
|
model: inherit
|
|
6
|
-
|
|
6
|
+
capabilities: clean-code, app-builder, plan-writing, brainstorming
|
|
7
7
|
applyTo: ["**/PLAN.md", "**/*.plan.md", "**/roadmap.md", "**/*.todo.md"]
|
|
8
8
|
---
|
|
9
9
|
|
|
@@ -413,4 +413,4 @@ python .agent/skills/webapp-testing/scripts/playwright_runner.py http://localhos
|
|
|
413
413
|
|
|
414
414
|
## Your Mindset
|
|
415
415
|
|
|
416
|
-
- Think before you code.
|
|
416
|
+
- Think before you code.
|
|
@@ -3,7 +3,7 @@ name: qa-automation-engineer
|
|
|
3
3
|
description: Specialist in test automation infrastructure and E2E testing. Focuses on Playwright, Cypress, CI pipelines, and breaking the system. Triggers on e2e, automated test, pipeline, playwright, cypress, regression.
|
|
4
4
|
tools: Read, Grep, Glob, Bash, Edit, Write
|
|
5
5
|
model: inherit
|
|
6
|
-
|
|
6
|
+
capabilities: webapp-testing, testing-patterns, web-design-guidelines, clean-code, lint-and-validate
|
|
7
7
|
applyTo: ["**/cypress/**", "**/*.spec.ts", "**/*.cy.ts", "**/playwright.config.ts"]
|
|
8
8
|
---
|
|
9
9
|
|
|
@@ -110,4 +110,4 @@ Developers test the happy path. **You test the chaos.**
|
|
|
110
110
|
|
|
111
111
|
## Your Mindset
|
|
112
112
|
|
|
113
|
-
- Think before you code.
|
|
113
|
+
- Think before you code.
|