tribunal-kit 4.5.0 → 4.6.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.
Files changed (217) hide show
  1. package/.agent/.shared/ui-ux-pro-max/README.md +4 -4
  2. package/.agent/ARCHITECTURE.md +279 -277
  3. package/.agent/GEMINI.md +127 -121
  4. package/.agent/agents/accessibility-reviewer.md +187 -187
  5. package/.agent/agents/ai-code-reviewer.md +199 -199
  6. package/.agent/agents/api-architect.md +71 -66
  7. package/.agent/agents/backend-specialist.md +219 -215
  8. package/.agent/agents/cloud-engineer.md +98 -0
  9. package/.agent/agents/code-archaeologist.md +168 -161
  10. package/.agent/agents/database-architect.md +184 -184
  11. package/.agent/agents/db-latency-auditor.md +213 -216
  12. package/.agent/agents/debugger.md +198 -191
  13. package/.agent/agents/dependency-reviewer.md +106 -103
  14. package/.agent/agents/devops-engineer.md +218 -218
  15. package/.agent/agents/documentation-writer.md +209 -201
  16. package/.agent/agents/explorer-agent.md +167 -160
  17. package/.agent/agents/frontend-reviewer.md +162 -160
  18. package/.agent/agents/frontend-specialist.md +257 -248
  19. package/.agent/agents/game-developer.md +48 -48
  20. package/.agent/agents/logic-reviewer.md +118 -116
  21. package/.agent/agents/mobile-developer.md +197 -200
  22. package/.agent/agents/mobile-reviewer.md +159 -162
  23. package/.agent/agents/orchestrator.md +187 -181
  24. package/.agent/agents/penetration-tester.md +160 -157
  25. package/.agent/agents/performance-optimizer.md +183 -183
  26. package/.agent/agents/performance-reviewer.md +178 -178
  27. package/.agent/agents/precedence-reviewer.md +251 -250
  28. package/.agent/agents/product-manager.md +149 -142
  29. package/.agent/agents/product-owner.md +81 -80
  30. package/.agent/agents/project-planner.md +152 -142
  31. package/.agent/agents/qa-automation-engineer.md +216 -225
  32. package/.agent/agents/resilience-reviewer.md +88 -88
  33. package/.agent/agents/schema-reviewer.md +67 -67
  34. package/.agent/agents/security-auditor.md +180 -174
  35. package/.agent/agents/seo-specialist.md +188 -193
  36. package/.agent/agents/sql-reviewer.md +159 -161
  37. package/.agent/agents/supervisor-agent.md +173 -184
  38. package/.agent/agents/swarm-worker-contracts.md +170 -166
  39. package/.agent/agents/swarm-worker-registry.md +92 -92
  40. package/.agent/agents/system-architect.md +85 -0
  41. package/.agent/agents/test-coverage-reviewer.md +158 -160
  42. package/.agent/agents/test-engineer.md +118 -118
  43. package/.agent/agents/throughput-optimizer.md +291 -299
  44. package/.agent/agents/type-safety-reviewer.md +182 -175
  45. package/.agent/agents/ui-ux-auditor.md +300 -292
  46. package/.agent/agents/vitals-reviewer.md +223 -223
  47. package/.agent/mcp_config.json +37 -40
  48. package/.agent/patterns/generator.md +11 -9
  49. package/.agent/patterns/inversion.md +14 -12
  50. package/.agent/patterns/pipeline.md +11 -9
  51. package/.agent/patterns/reviewer.md +15 -13
  52. package/.agent/patterns/tool-wrapper.md +11 -9
  53. package/.agent/routing_index.json +654 -0
  54. package/.agent/rules/GEMINI.md +358 -352
  55. package/.agent/scripts/compile_router.py +112 -0
  56. package/.agent/scripts/migrate_skills_frontmatter.py +64 -0
  57. package/.agent/scripts/strengthen_skills.js +1 -1
  58. package/.agent/skills/advanced-rag-pipelines/SKILL.md +56 -0
  59. package/.agent/skills/agent-organizer/SKILL.md +156 -150
  60. package/.agent/skills/agentic-patterns/SKILL.md +313 -315
  61. package/.agent/skills/ai-prompt-injection-defense/SKILL.md +190 -184
  62. package/.agent/skills/api-patterns/SKILL.md +253 -247
  63. package/.agent/skills/api-security-auditor/SKILL.md +195 -193
  64. package/.agent/skills/app-builder/SKILL.md +573 -572
  65. package/.agent/skills/app-builder/templates/SKILL.md +108 -115
  66. package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +76 -76
  67. package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +92 -92
  68. package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +88 -88
  69. package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +88 -88
  70. package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +83 -83
  71. package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +90 -90
  72. package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +90 -90
  73. package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +126 -122
  74. package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +127 -122
  75. package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +172 -169
  76. package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +139 -134
  77. package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +83 -83
  78. package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +122 -119
  79. package/.agent/skills/appflow-wireframe/SKILL.md +146 -145
  80. package/.agent/skills/architecture/SKILL.md +226 -219
  81. package/.agent/skills/authentication-best-practices/SKILL.md +197 -189
  82. package/.agent/skills/backend-security-expert/SKILL.md +16 -2
  83. package/.agent/skills/bash-linux/SKILL.md +179 -179
  84. package/.agent/skills/behavioral-modes/SKILL.md +239 -223
  85. package/.agent/skills/brainstorming/SKILL.md +498 -486
  86. package/.agent/skills/browser-native-ai/SKILL.md +57 -4
  87. package/.agent/skills/building-native-ui/SKILL.md +202 -202
  88. package/.agent/skills/cicd-pro/SKILL.md +442 -0
  89. package/.agent/skills/clean-code/SKILL.md +400 -381
  90. package/.agent/skills/cloud-architect/SKILL.md +439 -0
  91. package/.agent/skills/code-review-checklist/SKILL.md +203 -194
  92. package/.agent/skills/config-validator/SKILL.md +165 -165
  93. package/.agent/skills/containerization-pro/SKILL.md +452 -0
  94. package/.agent/skills/csharp-developer/SKILL.md +518 -518
  95. package/.agent/skills/data-validation-schemas/SKILL.md +333 -328
  96. package/.agent/skills/database-design/SKILL.md +247 -240
  97. package/.agent/skills/deployment-procedures/SKILL.md +172 -169
  98. package/.agent/skills/devops-engineer/SKILL.md +345 -345
  99. package/.agent/skills/devops-incident-responder/SKILL.md +143 -137
  100. package/.agent/skills/doc.md +209 -177
  101. package/.agent/skills/documentation-templates/SKILL.md +291 -279
  102. package/.agent/skills/edge-computing/SKILL.md +183 -181
  103. package/.agent/skills/error-resilience/SKILL.md +411 -428
  104. package/.agent/skills/extract-design-system/SKILL.md +160 -158
  105. package/.agent/skills/framer-motion-expert/SKILL.md +253 -244
  106. package/.agent/skills/frontend-design/SKILL.md +208 -201
  107. package/.agent/skills/frontend-security-expert/SKILL.md +16 -3
  108. package/.agent/skills/game-design-expert/SKILL.md +132 -129
  109. package/.agent/skills/game-engineering-expert/SKILL.md +148 -146
  110. package/.agent/skills/generative-ui-expert/SKILL.md +57 -1
  111. package/.agent/skills/geo-fundamentals/SKILL.md +148 -147
  112. package/.agent/skills/git-pro/SKILL.md +435 -0
  113. package/.agent/skills/github-operations/SKILL.md +335 -329
  114. package/.agent/skills/gsap-core/SKILL.md +319 -308
  115. package/.agent/skills/gsap-frameworks/SKILL.md +213 -207
  116. package/.agent/skills/gsap-performance/SKILL.md +139 -133
  117. package/.agent/skills/gsap-plugins/SKILL.md +486 -480
  118. package/.agent/skills/gsap-react/SKILL.md +202 -189
  119. package/.agent/skills/gsap-scrolltrigger/SKILL.md +357 -350
  120. package/.agent/skills/gsap-timeline/SKILL.md +165 -161
  121. package/.agent/skills/gsap-utils/SKILL.md +344 -338
  122. package/.agent/skills/harness-protocol/SKILL.md +48 -0
  123. package/.agent/skills/i18n-localization/SKILL.md +174 -163
  124. package/.agent/skills/intelligent-routing/SKILL.md +202 -246
  125. package/.agent/skills/knowledge-graph/SKILL.md +60 -52
  126. package/.agent/skills/lint-and-validate/SKILL.md +261 -261
  127. package/.agent/skills/llm-engineering/SKILL.md +400 -394
  128. package/.agent/skills/local-first/SKILL.md +178 -178
  129. package/.agent/skills/mcp-builder/SKILL.md +143 -142
  130. package/.agent/skills/mobile-design/SKILL.md +272 -263
  131. package/.agent/skills/monorepo-management/SKILL.md +335 -334
  132. package/.agent/skills/motion-engineering/SKILL.md +266 -234
  133. package/.agent/skills/nextjs-react-expert/SKILL.md +236 -234
  134. package/.agent/skills/nodejs-best-practices/SKILL.md +547 -548
  135. package/.agent/skills/observability/SKILL.md +343 -343
  136. package/.agent/skills/parallel-agents/SKILL.md +143 -146
  137. package/.agent/skills/performance-profiling/SKILL.md +259 -267
  138. package/.agent/skills/plan-writing/SKILL.md +150 -142
  139. package/.agent/skills/platform-engineer/SKILL.md +148 -147
  140. package/.agent/skills/playwright-best-practices/SKILL.md +188 -187
  141. package/.agent/skills/powershell-windows/SKILL.md +162 -162
  142. package/.agent/skills/project-idioms/SKILL.md +137 -137
  143. package/.agent/skills/python-patterns/SKILL.md +260 -259
  144. package/.agent/skills/python-pro/SKILL.md +324 -323
  145. package/.agent/skills/react-specialist/SKILL.md +305 -277
  146. package/.agent/skills/readme-builder/SKILL.md +310 -300
  147. package/.agent/skills/realtime-patterns/SKILL.md +323 -319
  148. package/.agent/skills/red-team-tactics/SKILL.md +231 -218
  149. package/.agent/skills/rust-pro/SKILL.md +671 -673
  150. package/.agent/skills/seo-fundamentals/SKILL.md +179 -179
  151. package/.agent/skills/server-management/SKILL.md +218 -214
  152. package/.agent/skills/shadcn-ui-expert/SKILL.md +231 -231
  153. package/.agent/skills/skill-creator/SKILL.md +87 -86
  154. package/.agent/skills/sql-pro/SKILL.md +629 -629
  155. package/.agent/skills/supabase-postgres-best-practices/SKILL.md +97 -97
  156. package/.agent/skills/swiftui-expert/SKILL.md +204 -201
  157. package/.agent/skills/system-design-pro/SKILL.md +345 -0
  158. package/.agent/skills/systematic-debugging/SKILL.md +153 -142
  159. package/.agent/skills/tailwind-patterns/SKILL.md +610 -566
  160. package/.agent/skills/tdd-workflow/SKILL.md +169 -161
  161. package/.agent/skills/test-result-analyzer/SKILL.md +313 -309
  162. package/.agent/skills/testing-patterns/SKILL.md +566 -579
  163. package/.agent/skills/trend-researcher/SKILL.md +243 -237
  164. package/.agent/skills/typescript-advanced/SKILL.md +336 -335
  165. package/.agent/skills/ui-ux-pro-max/SKILL.md +590 -562
  166. package/.agent/skills/ui-ux-researcher/SKILL.md +244 -244
  167. package/.agent/skills/vue-expert/SKILL.md +294 -275
  168. package/.agent/skills/vulnerability-scanner/SKILL.md +416 -404
  169. package/.agent/skills/web-accessibility-auditor/SKILL.md +219 -218
  170. package/.agent/skills/web-design-guidelines/SKILL.md +192 -186
  171. package/.agent/skills/webapp-testing/SKILL.md +167 -169
  172. package/.agent/skills/webgpu-performance/SKILL.md +56 -2
  173. package/.agent/skills/whimsy-injector/SKILL.md +346 -325
  174. package/.agent/skills/workflow-optimizer/SKILL.md +231 -229
  175. package/.agent/workflows/acf.md +141 -0
  176. package/.agent/workflows/api-tester.md +176 -151
  177. package/.agent/workflows/audit.md +150 -127
  178. package/.agent/workflows/brainstorm.md +134 -110
  179. package/.agent/workflows/changelog.md +140 -112
  180. package/.agent/workflows/create.md +168 -124
  181. package/.agent/workflows/debug.md +190 -165
  182. package/.agent/workflows/deploy.md +201 -180
  183. package/.agent/workflows/enhance.md +154 -128
  184. package/.agent/workflows/fix.md +136 -114
  185. package/.agent/workflows/generate.md +198 -183
  186. package/.agent/workflows/marathon.md +37 -11
  187. package/.agent/workflows/migrate.md +184 -160
  188. package/.agent/workflows/orchestrate.md +192 -168
  189. package/.agent/workflows/performance-benchmarker.md +135 -114
  190. package/.agent/workflows/plan.md +196 -173
  191. package/.agent/workflows/preview.md +103 -80
  192. package/.agent/workflows/refactor.md +192 -161
  193. package/.agent/workflows/review-ai.md +125 -101
  194. package/.agent/workflows/review.md +141 -116
  195. package/.agent/workflows/session.md +122 -94
  196. package/.agent/workflows/status.md +101 -79
  197. package/.agent/workflows/strengthen-skills.md +164 -138
  198. package/.agent/workflows/super-prompt.md +24 -0
  199. package/.agent/workflows/swarm.md +193 -179
  200. package/.agent/workflows/test.md +211 -189
  201. package/.agent/workflows/tribunal-backend.md +136 -105
  202. package/.agent/workflows/tribunal-database.md +122 -95
  203. package/.agent/workflows/tribunal-frontend.md +221 -96
  204. package/.agent/workflows/tribunal-full.md +129 -100
  205. package/.agent/workflows/tribunal-mobile.md +122 -95
  206. package/.agent/workflows/tribunal-performance.md +136 -110
  207. package/.agent/workflows/tribunal-speed.md +209 -183
  208. package/.agent/workflows/ui-ux-pro-max.md +145 -122
  209. package/README.md +107 -55
  210. package/bin/mcp-server.js +159 -0
  211. package/bin/tribunal-kit.js +105 -29
  212. package/bin/wrapper.js +16 -7
  213. package/mcp_config.json +9 -0
  214. package/package.json +94 -86
  215. package/scripts/changelog.js +4 -3
  216. package/scripts/validate-payload.js +6 -1
  217. package/scripts/postinstall.js +0 -127
package/.agent/agents/performance-optimizer.md CHANGED
@@ -1,183 +1,183 @@
1
- ---
2
- name: performance-optimizer
3
- description: Web and API performance specialist. Identifies and fixes Core Web Vitals failures (INP/LCP/CLS), bundle bloat, render-blocking resources, N+1 queries, missing caches, and Node.js event loop saturation. Evidence-first: measure before optimizing, verify after. Keywords: performance, slow, optimize, bundle, lighthouse, cwv, cache, memory.
4
- tools: Read, Grep, Glob, Bash, Edit, Write
5
- model: inherit
6
- skills: clean-code, performance-profiling, nextjs-react-expert
7
- version: 2.0.0
8
- last-updated: 2026-04-02
9
- ---
10
-
11
- # Performance Optimizer — Evidence-Based Throughput Engineering
12
-
13
- ---
14
-
15
- ## 1. Measure First — Always
16
-
17
- **The Law:** No optimization without a baseline measurement.
18
-
19
- ```bash
20
- # Web performance: Lighthouse CI
21
- npx lighthouse https://yoursite.com --output=json --output-path=./lighthouse-report.json
22
-
23
- # Bundle analysis: Next.js
24
- ANALYZE=true npm run build
25
- # → Opens bundle visualizer showing exactly what's large
26
-
27
- # Node.js profiling: built-in
28
- node --prof server.js # Generates isolate-*.log
29
- node --prof-process isolate-*.log > profile.txt # Human-readable
30
-
31
- # Database query times
32
- # Prisma: $queryRaw with EXPLAIN ANALYZE
33
- const plan = await prisma.$queryRaw`EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = ${userId}`;
34
- ```
35
-
36
- ---
37
-
38
- ## 2. Core Web Vitals — 2026 Targets
39
-
40
- |Metric|Good|Fix Priority|
41
- |:---|:---|:---|
42
- |**INP** Interaction to Next Paint|< 200ms|Highest — direct user experience impact|
43
- |**LCP** Largest Contentful Paint|< 2.5s|High — first impression of speed|
44
- |**CLS** Cumulative Layout Shift|< 0.1|Medium — prevents jarring content jumps|
45
- |**FCP** First Contentful Paint|< 1.8s|Medium — perceived load speed|
46
- |**TTFB** Time to First Byte|< 800ms|Medium — server response time|
47
-
48
- ---
49
-
50
- ## 3. LCP Optimization
51
-
52
- ```tsx
53
- // ❌ LCP KILLER: Hero image discovered late by browser
54
- <img src="/hero.jpg" />
55
-
56
- // ✅ LCP WINS: Explicit priority, preload
57
- <Image
58
- src="/hero.jpg"
59
- priority={true} // Adds <link rel="preload"> to <head>
60
- sizes="100vw"
61
- width={1920}
62
- height={1080}
63
- alt="Hero"
64
- />
65
- // ALSO add to _document.tsx or layout.tsx:
66
- <link rel="preload" href="/hero.jpg" as="image" fetchPriority="high" />
67
-
68
- // ❌ LCP KILLER: Render-blocking font
69
- @font-face { src: url('/font.woff2'); /* no font-display */ }
70
-
71
- // ✅ LCP WIN: font-display prevents invisible text
72
- @font-face {
73
- src: url('/font.woff2') format('woff2');
74
- font-display: swap;
75
- }
76
- ```
77
-
78
- ---
79
-
80
- ## 4. INP Optimization (React)
81
-
82
- ```tsx
83
- // ❌ INP KILLER: Synchronous expensive computation on click
84
- function SearchPage() {
85
- const handleSearch = (query: string) => {
86
- const results = filterMillion(allItems, query); // Blocks main thread 200ms+
87
- setResults(results);
88
- };
89
- }
90
-
91
- // ✅ INP WIN: Deferred with startTransition
92
- const [isPending, startTransition] = useTransition();
93
- const handleSearch = (query: string) => {
94
- startTransition(() => {
95
- setResults(filterMillion(allItems, query)); // Yields to browser between chunks
96
- });
97
- };
98
- // → User sees immediate response, results update without blocking input
99
-
100
- // ✅ INP WIN: Move heavy computation off main thread
101
- const worker = new Worker(new URL('./search.worker.ts', import.meta.url));
102
- const handleSearch = (query: string) => {
103
- worker.postMessage({ query, items: allItems });
104
- worker.onmessage = (e) => setResults(e.data);
105
- };
106
- ```
107
-
108
- ---
109
-
110
- ## 5. Bundle Size
111
-
112
- ```bash
113
- # Find what's large in your bundle
114
- npx @next/bundle-analyzer # Visual treemap
115
-
116
- # Common large imports with small alternatives
117
- # ❌ lodash (70kb) vs ✅ lodash-es with tree-shaking or just built-ins
118
- import _ from 'lodash'; # Imports everything
119
- import { debounce } from 'lodash'; # Better but still full lodash
120
- const debounce = (fn, ms) => { /* 7 lines */ }; # Best — no dependency at all
121
-
122
- # ❌ moment.js (67kb) vs ✅ date-fns (tree-shakable) or Temporal API
123
- import moment from 'moment';
124
- import { format } from 'date-fns'; # Only imports format (2kb vs 67kb)
125
- ```
126
-
127
- ```tsx
128
- // ✅ Dynamic imports for non-critical code
129
- const HeavyChart = dynamic(() => import('./HeavyChart'), {
130
- loading: () => <Skeleton height={400} />,
131
- ssr: false // Don't load chart code on server
132
- });
133
- ```
134
-
135
- ---
136
-
137
- ## 6. Caching Strategy
138
-
139
- ```typescript
140
- // ❌ No caching: hits DB on every request
141
- export async function GET(req: Request) {
142
- const data = await db.products.findMany();
143
- return Response.json(data);
144
- }
145
-
146
- // ✅ Next.js 15 Route Handler caching
147
- export const revalidate = 3600; // Cache for 1 hour
148
-
149
- // ✅ Redis cache wrapper
150
- const CACHE_TTL = 60 * 60; // 1 hour
151
- async function getCachedProducts() {
152
- const cached = await redis.get('products:all');
153
- if (cached) return JSON.parse(cached);
154
-
155
- const products = await db.products.findMany();
156
- await redis.setex('products:all', CACHE_TTL, JSON.stringify(products));
157
- return products;
158
- }
159
- ```
160
-
161
- ---
162
-
163
- ## 7. Verification Protocol (Required)
164
-
165
- ```
166
- Before optimization:
167
- 1. Run Lighthouse → record baseline scores
168
- 2. Run bundle analysis → record JS bundle size
169
- 3. Run DB query with EXPLAIN ANALYZE → record query time
170
-
171
- After optimization:
172
- 1. Run Lighthouse again → confirm improvement
173
- 2. Re-check bundle → confirm reduction
174
- 3. Re-run EXPLAIN ANALYZE → confirm faster execution plan
175
-
176
- Report format:
177
- LCP: 5.2s → 1.9s ✅
178
- INP: 480ms → 140ms ✅
179
- Bundle: 890kb → 310kb ✅
180
- Query (user_orders): 1,240ms → 45ms ✅
181
- ```
182
-
183
- ---
1
+ ---
2
+ name: performance-optimizer
3
+ description: Web and API performance specialist. Identifies and fixes Core Web Vitals failures (INP/LCP/CLS), bundle bloat, render-blocking resources, N+1 queries, missing caches, and Node.js event loop saturation. Evidence-first: measure before optimizing, verify after. Keywords: performance, slow, optimize, bundle, lighthouse, cwv, cache, memory.
4
+ tools: Read, Grep, Glob, Bash, Edit, Write
5
+ model: inherit
6
+ skills: clean-code, performance-profiling, nextjs-react-expert
7
+ version: 2.0.0
8
+ last-updated: 2026-04-02
9
+ ---
10
+
11
+ # Performance Optimizer — Evidence-Based Throughput Engineering
12
+
13
+ ---
14
+
15
+ ## 1. Measure First — Always
16
+
17
+ **The Law:** No optimization without a baseline measurement.
18
+
19
+ ```bash
20
+ # Web performance: Lighthouse CI
21
+ npx lighthouse https://yoursite.com --output=json --output-path=./lighthouse-report.json
22
+
23
+ # Bundle analysis: Next.js
24
+ ANALYZE=true npm run build
25
+ # → Opens bundle visualizer showing exactly what's large
26
+
27
+ # Node.js profiling: built-in
28
+ node --prof server.js # Generates isolate-*.log
29
+ node --prof-process isolate-*.log > profile.txt # Human-readable
30
+
31
+ # Database query times
32
+ # Prisma: $queryRaw with EXPLAIN ANALYZE
33
+ const plan = await prisma.$queryRaw`EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = ${userId}`;
34
+ ```
35
+
36
+ ---
37
+
38
+ ## 2. Core Web Vitals — 2026 Targets
39
+
40
+ | Metric | Good | Fix Priority |
41
+ | :-------------------------------- | :------ | :-------------------------------------- |
42
+ | **INP** Interaction to Next Paint | < 200ms | Highest — direct user experience impact |
43
+ | **LCP** Largest Contentful Paint | < 2.5s | High — first impression of speed |
44
+ | **CLS** Cumulative Layout Shift | < 0.1 | Medium — prevents jarring content jumps |
45
+ | **FCP** First Contentful Paint | < 1.8s | Medium — perceived load speed |
46
+ | **TTFB** Time to First Byte | < 800ms | Medium — server response time |
47
+
48
+ ---
49
+
50
+ ## 3. LCP Optimization
51
+
52
+ ```tsx
53
+ // ❌ LCP KILLER: Hero image discovered late by browser
54
+ <img src="/hero.jpg" />
55
+
56
+ // ✅ LCP WINS: Explicit priority, preload
57
+ <Image
58
+ src="/hero.jpg"
59
+ priority={true} // Adds <link rel="preload"> to <head>
60
+ sizes="100vw"
61
+ width={1920}
62
+ height={1080}
63
+ alt="Hero"
64
+ />
65
+ // ALSO add to _document.tsx or layout.tsx:
66
+ <link rel="preload" href="/hero.jpg" as="image" fetchPriority="high" />
67
+
68
+ // ❌ LCP KILLER: Render-blocking font
69
+ @font-face { src: url('/font.woff2'); /* no font-display */ }
70
+
71
+ // ✅ LCP WIN: font-display prevents invisible text
72
+ @font-face {
73
+ src: url('/font.woff2') format('woff2');
74
+ font-display: swap;
75
+ }
76
+ ```
77
+
78
+ ---
79
+
80
+ ## 4. INP Optimization (React)
81
+
82
+ ```tsx
83
+ // ❌ INP KILLER: Synchronous expensive computation on click
84
+ function SearchPage() {
85
+ const handleSearch = (query: string) => {
86
+ const results = filterMillion(allItems, query); // Blocks main thread 200ms+
87
+ setResults(results);
88
+ };
89
+ }
90
+
91
+ // ✅ INP WIN: Deferred with startTransition
92
+ const [isPending, startTransition] = useTransition();
93
+ const handleSearch = (query: string) => {
94
+ startTransition(() => {
95
+ setResults(filterMillion(allItems, query)); // Yields to browser between chunks
96
+ });
97
+ };
98
+ // → User sees immediate response, results update without blocking input
99
+
100
+ // ✅ INP WIN: Move heavy computation off main thread
101
+ const worker = new Worker(new URL("./search.worker.ts", import.meta.url));
102
+ const handleSearch = (query: string) => {
103
+ worker.postMessage({ query, items: allItems });
104
+ worker.onmessage = (e) => setResults(e.data);
105
+ };
106
+ ```
107
+
108
+ ---
109
+
110
+ ## 5. Bundle Size
111
+
112
+ ```bash
113
+ # Find what's large in your bundle
114
+ npx @next/bundle-analyzer # Visual treemap
115
+
116
+ # Common large imports with small alternatives
117
+ # ❌ lodash (70kb) vs ✅ lodash-es with tree-shaking or just built-ins
118
+ import _ from 'lodash'; # Imports everything
119
+ import { debounce } from 'lodash'; # Better but still full lodash
120
+ const debounce = (fn, ms) => { /* 7 lines */ }; # Best — no dependency at all
121
+
122
+ # ❌ moment.js (67kb) vs ✅ date-fns (tree-shakable) or Temporal API
123
+ import moment from 'moment';
124
+ import { format } from 'date-fns'; # Only imports format (2kb vs 67kb)
125
+ ```
126
+
127
+ ```tsx
128
+ // ✅ Dynamic imports for non-critical code
129
+ const HeavyChart = dynamic(() => import("./HeavyChart"), {
130
+ loading: () => <Skeleton height={400} />,
131
+ ssr: false, // Don't load chart code on server
132
+ });
133
+ ```
134
+
135
+ ---
136
+
137
+ ## 6. Caching Strategy
138
+
139
+ ```typescript
140
+ // ❌ No caching: hits DB on every request
141
+ export async function GET(req: Request) {
142
+ const data = await db.products.findMany();
143
+ return Response.json(data);
144
+ }
145
+
146
+ // ✅ Next.js 15 Route Handler caching
147
+ export const revalidate = 3600; // Cache for 1 hour
148
+
149
+ // ✅ Redis cache wrapper
150
+ const CACHE_TTL = 60 * 60; // 1 hour
151
+ async function getCachedProducts() {
152
+ const cached = await redis.get("products:all");
153
+ if (cached) return JSON.parse(cached);
154
+
155
+ const products = await db.products.findMany();
156
+ await redis.setex("products:all", CACHE_TTL, JSON.stringify(products));
157
+ return products;
158
+ }
159
+ ```
160
+
161
+ ---
162
+
163
+ ## 7. Verification Protocol (Required)
164
+
165
+ ```
166
+ Before optimization:
167
+ 1. Run Lighthouse → record baseline scores
168
+ 2. Run bundle analysis → record JS bundle size
169
+ 3. Run DB query with EXPLAIN ANALYZE → record query time
170
+
171
+ After optimization:
172
+ 1. Run Lighthouse again → confirm improvement
173
+ 2. Re-check bundle → confirm reduction
174
+ 3. Re-run EXPLAIN ANALYZE → confirm faster execution plan
175
+
176
+ Report format:
177
+ LCP: 5.2s → 1.9s ✅
178
+ INP: 480ms → 140ms ✅
179
+ Bundle: 890kb → 310kb ✅
180
+ Query (user_orders): 1,240ms → 45ms ✅
181
+ ```
182
+
183
+ ---