nextjs-react-expert

Name: nextjs-react-expert
Author: One-Man-Company

77stars16forks

How to install nextjs-react-expert?

one-man-company/skills-contextmanager/nextjs-react-expert

$npx -y skills add One-Man-Company/Skills-ContextManager --skill nextjs-react-expert

Installs into the current project.

Summary

React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations.

Files · 1

View on GitHub

SKILL.md

1	# Next.js & React Performance Expert
2
3	> From Vercel Engineering - 57 optimization rules prioritized by impact
4	> Philosophy: Eliminate waterfalls first, optimize bundles second, then micro-optimize.
5
6	---
7
8	## 🎯 Selective Reading Rule (MANDATORY)
9
10	Read ONLY sections relevant to your task! Check the content map below and load what you need.
11
12	> 🔴 For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH/MEDIUM.
13
14	---
15
16	## 📑 Content Map
17
18	\| File \| Impact \| Rules \| When to Read \|
19	\| --------------------------------------- \| ------------------ \| -------- \| --------------------------------------------------------------- \|
20	\| `1-async-eliminating-waterfalls.md` \| 🔴 CRITICAL \| 5 rules \| Slow page loads, sequential API calls, data fetching waterfalls \|
21	\| `2-bundle-bundle-size-optimization.md` \| 🔴 CRITICAL \| 5 rules \| Large bundle size, slow Time to Interactive, First Load issues \|
22	\| `3-server-server-side-performance.md` \| 🟠 HIGH \| 7 rules \| Slow SSR, API route optimization, server-side waterfalls \|
23	\| `4-client-client-side-data-fetching.md` \| 🟡 MEDIUM-HIGH \| 4 rules \| Client data management, SWR patterns, deduplication \|
24	\| `5-rerender-re-render-optimization.md` \| 🟡 MEDIUM \| 12 rules \| Excessive re-renders, React performance, memoization \|
25	\| `6-rendering-rendering-performance.md` \| 🟡 MEDIUM \| 9 rules \| Rendering bottlenecks, virtualization, image optimization \|
26	\| `7-js-javascript-performance.md` \| ⚪ LOW-MEDIUM \| 12 rules \| Micro-optimizations, caching, loop performance \|
27	\| `8-advanced-advanced-patterns.md` \| 🔵 VARIABLE \| 3 rules \| Advanced React patterns, useLatest, init-once \|
28
29	Total: 57 rules across 8 categories
30
31	---
32
33	## 🚀 Quick Decision Tree
34
35	What's your performance issue?
36
37	```
38	🐌 Slow page loads / Long Time to Interactive
39	→ Read Section 1: Eliminating Waterfalls
40	→ Read Section 2: Bundle Size Optimization
41
42	📦 Large bundle size (> 200KB)
43	→ Read Section 2: Bundle Size Optimization
44	→ Check: Dynamic imports, barrel imports, tree-shaking
45
46	🖥️ Slow Server-Side Rendering
47	→ Read Section 3: Server-Side Performance
48	→ Check: Parallel data fetching, streaming
49
50	🔄 Too many re-renders / UI lag
51	→ Read Section 5: Re-render Optimization
52	→ Check: React.memo, useMemo, useCallback
53
54	🎨 Rendering performance issues
55	→ Read Section 6: Rendering Performance
56	→ Check: Virtualization, layout thrashing
57
58	🌐 Client-side data fetching problems
59	→ Read Section 4: Client-Side Data Fetching
60	→ Check: SWR deduplication, localStorage
61
62	✨ Need advanced patterns
63	→ Read Section 8: Advanced Patterns
64	```
65
66	---
67
68	## 📊 Impact Priority Guide
69
70	Use this order when doing comprehensive optimization:
71
72	```
73	1️⃣ CRITICAL (Biggest Gains - Do First):
74	├─ Section 1: Eliminating Waterfalls
75	│ └─ Each waterfall adds full network latency (100-500ms+)
76	└─ Section 2: Bundle Size Optimization
77	└─ Affects Time to Interactive and Largest Contentful Paint
78
79	2️⃣ HIGH (Significant Impact - Do Second):
80	└─ Section 3: Server-Side Performance
81	└─ Eliminates server-side waterfalls, faster response times
82
83	3️⃣ MEDIUM (Moderate Gains - Do Third):
84	├─ Section 4: Client-Side Data Fetching
85	├─ Section 5: Re-render Optimization
86	└─ Section 6: Rendering Performance
87
88	4️⃣ LOW (Polish - Do Last):
89	├─ Section 7: JavaScript Performance
90	└─ Section 8: Advanced Patterns
91	```
92
93	---
94
95	## 🔗 Related Skills
96
97	\| Need \| Skill \|
98	\| ----------------------- \| --------------------------------- \|
99	\| API design patterns \| `@[skills/api-patterns]` \|
100	\| Database optimization \| `@[skills/database-design]` \|
101	\| Testing strategies \| `@[skills/testing-patterns]` \|
102	\| UI/UX design principles \| `@[skills/frontend-design]` \|
103	\| TypeScript patterns \| `@[skills/typescript-expert]` \|
104	\| Deployment & DevOps \| `@[skills/deployment-procedures]` \|
105
106	---
107
108	## ✅ Performance Review Checklist
109
110	Before shipping to production:
111
112	Critical (Must Fix):
113
114	- [ ] No sequential data fetching (waterfalls eliminated)
115	- [ ] Bundle size < 200KB for main bundle
116	- [ ] No barrel imports in app code
117	- [ ] Dynamic imports used for large components
118	- [ ] Parallel data fetching where possible
119
120	High Priority:
121
122	- [ ] Server components used where appropriate
123	- [ ] API routes optimized (no N+1 queries)
124	- [ ] Suspense boundaries for data fetching
125	- [ ] Stati

People who liked this also viewed

6 picks

Type

nextjs-react-expert

77stars16forks

View on GitHub

How to install nextjs-react-expert?

one-man-company/skills-contextmanager/nextjs-react-expert

$npx -y skills add One-Man-Company/Skills-ContextManager --skill nextjs-react-expert

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Next.js & React Performance Expert
2
3	> From Vercel Engineering - 57 optimization rules prioritized by impact
4	> Philosophy: Eliminate waterfalls first, optimize bundles second, then micro-optimize.
5
6	---
7
8	## 🎯 Selective Reading Rule (MANDATORY)
9
10	Read ONLY sections relevant to your task! Check the content map below and load what you need.
11
12	> 🔴 For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH/MEDIUM.
13
14	---
15
16	## 📑 Content Map
17
18	\| File \| Impact \| Rules \| When to Read \|
19	\| --------------------------------------- \| ------------------ \| -------- \| --------------------------------------------------------------- \|
20	\| `1-async-eliminating-waterfalls.md` \| 🔴 CRITICAL \| 5 rules \| Slow page loads, sequential API calls, data fetching waterfalls \|
21	\| `2-bundle-bundle-size-optimization.md` \| 🔴 CRITICAL \| 5 rules \| Large bundle size, slow Time to Interactive, First Load issues \|
22	\| `3-server-server-side-performance.md` \| 🟠 HIGH \| 7 rules \| Slow SSR, API route optimization, server-side waterfalls \|
23	\| `4-client-client-side-data-fetching.md` \| 🟡 MEDIUM-HIGH \| 4 rules \| Client data management, SWR patterns, deduplication \|
24	\| `5-rerender-re-render-optimization.md` \| 🟡 MEDIUM \| 12 rules \| Excessive re-renders, React performance, memoization \|
25	\| `6-rendering-rendering-performance.md` \| 🟡 MEDIUM \| 9 rules \| Rendering bottlenecks, virtualization, image optimization \|
26	\| `7-js-javascript-performance.md` \| ⚪ LOW-MEDIUM \| 12 rules \| Micro-optimizations, caching, loop performance \|
27	\| `8-advanced-advanced-patterns.md` \| 🔵 VARIABLE \| 3 rules \| Advanced React patterns, useLatest, init-once \|
28
29	Total: 57 rules across 8 categories
30
31	---
32
33	## 🚀 Quick Decision Tree
34
35	What's your performance issue?
36
37	```
38	🐌 Slow page loads / Long Time to Interactive
39	→ Read Section 1: Eliminating Waterfalls
40	→ Read Section 2: Bundle Size Optimization
41
42	📦 Large bundle size (> 200KB)
43	→ Read Section 2: Bundle Size Optimization
44	→ Check: Dynamic imports, barrel imports, tree-shaking
45
46	🖥️ Slow Server-Side Rendering
47	→ Read Section 3: Server-Side Performance
48	→ Check: Parallel data fetching, streaming
49
50	🔄 Too many re-renders / UI lag
51	→ Read Section 5: Re-render Optimization
52	→ Check: React.memo, useMemo, useCallback
53
54	🎨 Rendering performance issues
55	→ Read Section 6: Rendering Performance
56	→ Check: Virtualization, layout thrashing
57
58	🌐 Client-side data fetching problems
59	→ Read Section 4: Client-Side Data Fetching
60	→ Check: SWR deduplication, localStorage
61
62	✨ Need advanced patterns
63	→ Read Section 8: Advanced Patterns
64	```
65
66	---
67
68	## 📊 Impact Priority Guide
69
70	Use this order when doing comprehensive optimization:
71
72	```
73	1️⃣ CRITICAL (Biggest Gains - Do First):
74	├─ Section 1: Eliminating Waterfalls
75	│ └─ Each waterfall adds full network latency (100-500ms+)
76	└─ Section 2: Bundle Size Optimization
77	└─ Affects Time to Interactive and Largest Contentful Paint
78
79	2️⃣ HIGH (Significant Impact - Do Second):
80	└─ Section 3: Server-Side Performance
81	└─ Eliminates server-side waterfalls, faster response times
82
83	3️⃣ MEDIUM (Moderate Gains - Do Third):
84	├─ Section 4: Client-Side Data Fetching
85	├─ Section 5: Re-render Optimization
86	└─ Section 6: Rendering Performance
87
88	4️⃣ LOW (Polish - Do Last):
89	├─ Section 7: JavaScript Performance
90	└─ Section 8: Advanced Patterns
91	```
92
93	---
94
95	## 🔗 Related Skills
96
97	\| Need \| Skill \|
98	\| ----------------------- \| --------------------------------- \|
99	\| API design patterns \| `@[skills/api-patterns]` \|
100	\| Database optimization \| `@[skills/database-design]` \|
101	\| Testing strategies \| `@[skills/testing-patterns]` \|
102	\| UI/UX design principles \| `@[skills/frontend-design]` \|
103	\| TypeScript patterns \| `@[skills/typescript-expert]` \|
104	\| Deployment & DevOps \| `@[skills/deployment-procedures]` \|
105
106	---
107
108	## ✅ Performance Review Checklist
109
110	Before shipping to production:
111
112	Critical (Must Fix):
113
114	- [ ] No sequential data fetching (waterfalls eliminated)
115	- [ ] Bundle size < 200KB for main bundle
116	- [ ] No barrel imports in app code
117	- [ ] Dynamic imports used for large components
118	- [ ] Parallel data fetching where possible
119
120	High Priority:
121
122	- [ ] Server components used where appropriate
123	- [ ] API routes optimized (no N+1 queries)
124	- [ ] Suspense boundaries for data fetching
125	- [ ] Stati

People who liked this also viewed

6 picks

Type