optimize

Name: optimize
Author: heyhank-app

30stars13forks

How to install optimize?

heyhank-app/heyhank/optimize

$npx -y skills add heyhank-app/heyhank --skill optimize

Installs into the current project.

Summary

Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.

Files · 1

View on GitHub

SKILL.md

1	Identify and fix performance issues to create faster, smoother user experiences.
2
3	## Assess Performance Issues
4
5	Understand current performance and identify problems:
6
7	1. Measure current state:
8	- Core Web Vitals: LCP, FID/INP, CLS scores
9	- Load time: Time to interactive, first contentful paint
10	- Bundle size: JavaScript, CSS, image sizes
11	- Runtime performance: Frame rate, memory usage, CPU usage
12	- Network: Request count, payload sizes, waterfall
13
14	2. Identify bottlenecks:
15	- What's slow? (Initial load? Interactions? Animations?)
16	- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
17	- How bad is it? (Perceivable? Annoying? Blocking?)
18	- Who's affected? (All users? Mobile only? Slow connections?)
19
20	CRITICAL: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
21
22	## Optimization Strategy
23
24	Create systematic improvement plan:
25
26	### Loading Performance
27
28	Optimize Images:
29	- Use modern formats (WebP, AVIF)
30	- Proper sizing (don't load 3000px image for 300px display)
31	- Lazy loading for below-fold images
32	- Responsive images (`srcset`, `picture` element)
33	- Compress images (80-85% quality is usually imperceptible)
34	- Use CDN for faster delivery
35
36	```html
37	<img
38	src="hero.webp"
39	srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
40	sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
41	loading="lazy"
42	alt="Hero image"
43	/>
44	```
45
46	Reduce JavaScript Bundle:
47	- Code splitting (route-based, component-based)
48	- Tree shaking (remove unused code)
49	- Remove unused dependencies
50	- Lazy load non-critical code
51	- Use dynamic imports for large components
52
53	```javascript
54	// Lazy load heavy component
55	const HeavyChart = lazy(() => import('./HeavyChart'));
56	```
57
58	Optimize CSS:
59	- Remove unused CSS
60	- Critical CSS inline, rest async
61	- Minimize CSS files
62	- Use CSS containment for independent regions
63
64	Optimize Fonts:
65	- Use `font-display: swap` or `optional`
66	- Subset fonts (only characters you need)
67	- Preload critical fonts
68	- Use system fonts when appropriate
69	- Limit font weights loaded
70
71	```css
72	@font-face {
73	font-family: 'CustomFont';
74	src: url('/fonts/custom.woff2') format('woff2');
75	font-display: swap; /* Show fallback immediately */
76	unicode-range: U+0020-007F; /* Basic Latin only */
77	}
78	```
79
80	Optimize Loading Strategy:
81	- Critical resources first (async/defer non-critical)
82	- Preload critical assets
83	- Prefetch likely next pages
84	- Service worker for offline/caching
85	- HTTP/2 or HTTP/3 for multiplexing
86
87	### Rendering Performance
88
89	Avoid Layout Thrashing:
90	```javascript
91	// ❌ Bad: Alternating reads and writes (causes reflows)
92	elements.forEach(el => {
93	const height = el.offsetHeight; // Read (forces layout)
94	el.style.height = height * 2; // Write
95	});
96
97	// ✅ Good: Batch reads, then batch writes
98	const heights = elements.map(el => el.offsetHeight); // All reads
99	elements.forEach((el, i) => {
100	el.style.height = heights[i] * 2; // All writes
101	});
102	```
103
104	Optimize Rendering:
105	- Use CSS `contain` property for independent regions
106	- Minimize DOM depth (flatter is faster)
107	- Reduce DOM size (fewer elements)
108	- Use `content-visibility: auto` for long lists
109	- Virtual scrolling for very long lists (react-window, react-virtualized)
110
111	Reduce Paint & Composite:
112	- Use `transform` and `opacity` for animations (GPU-accelerated)
113	- Avoid animating layout properties (width, height, top, left)
114	- Use `will-change` sparingly for known expensive operations
115	- Minimize paint areas (smaller is faster)
116
117	### Animation Performance
118
119	GPU Acceleration:
120	```css
121	/* ✅ GPU-accelerated (fast) */
122	.animated {
123	transform: translateX(100px);
124	opacity: 0.5;
125	}
126
127	/* ❌ CPU-bound (slow) */
128	.animated {
129	left: 100px;
130	width: 300px;
131	}
132	```
133
134	Smooth 60fps:
135	- Target 16ms per frame (60fps)
136	- Use `requestAnimationFrame` for JS animations
137	- Debounce/throttle scroll handlers
138	- Use CSS animations when possible
139	- Avoid long-running JavaScript during animations
140
141	Intersection Observer:
142	```javascript
143	// Efficiently detect when elements enter viewport
144	const observer = new IntersectionObserver((entries) => {
145	entries.forEach(entry => {
146	if (entry.isIntersecting) {
147	// Element is visible, lazy load or animate
148	}
149	});
150	});
151	```
152
153	### React/Framework Optimization
154
155	React-specific:
156	- Use `memo()` for expensive components
157	- `useMemo()` and `useCallback()` for expensive computations
158	- Virtualize long lists
159	- Code split routes
160	- Avoid inline function creation in render
161	- Use React DevTools Profiler
162
163	Framework-agnostic:
164	- Minimize re-renders
165	- Debounce expensive operations
166	- Memoize computed values
167	- Lazy load routes and components
168
169	### Ne

People who liked this also viewed

6 picks

Type

lark-openapi-explorer飞书/Lark 原生 OpenAPI 探索：从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足，需要查找并调用原生飞书 OpenAPI 时使用。SkillsJul 2026378k16k
lark-skill-maker创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill（包装原子 API 或编排多步流程）时使用。SkillsJul 2026377k16k
azure-cost-optimizationOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026209k1.3k
vercel-react-native-skillsVercel's official collection of agent skillsSkillsJul 2026172k29k
mcp-builderGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate externaSkillsJul 202693k163k
gws-sharedgws CLI: Shared patterns for authentication, global flags, and output formatting.SkillsJul 202653k30k

optimize

30stars13forks

View on GitHub

How to install optimize?

heyhank-app/heyhank/optimize

$npx -y skills add heyhank-app/heyhank --skill optimize

Installs into the current project.

Summary

Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.

Files · 1

View on GitHub

SKILL.md

1	Identify and fix performance issues to create faster, smoother user experiences.
2
3	## Assess Performance Issues
4
5	Understand current performance and identify problems:
6
7	1. Measure current state:
8	- Core Web Vitals: LCP, FID/INP, CLS scores
9	- Load time: Time to interactive, first contentful paint
10	- Bundle size: JavaScript, CSS, image sizes
11	- Runtime performance: Frame rate, memory usage, CPU usage
12	- Network: Request count, payload sizes, waterfall
13
14	2. Identify bottlenecks:
15	- What's slow? (Initial load? Interactions? Animations?)
16	- What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
17	- How bad is it? (Perceivable? Annoying? Blocking?)
18	- Who's affected? (All users? Mobile only? Slow connections?)
19
20	CRITICAL: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
21
22	## Optimization Strategy
23
24	Create systematic improvement plan:
25
26	### Loading Performance
27
28	Optimize Images:
29	- Use modern formats (WebP, AVIF)
30	- Proper sizing (don't load 3000px image for 300px display)
31	- Lazy loading for below-fold images
32	- Responsive images (`srcset`, `picture` element)
33	- Compress images (80-85% quality is usually imperceptible)
34	- Use CDN for faster delivery
35
36	```html
37	<img
38	src="hero.webp"
39	srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
40	sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
41	loading="lazy"
42	alt="Hero image"
43	/>
44	```
45
46	Reduce JavaScript Bundle:
47	- Code splitting (route-based, component-based)
48	- Tree shaking (remove unused code)
49	- Remove unused dependencies
50	- Lazy load non-critical code
51	- Use dynamic imports for large components
52
53	```javascript
54	// Lazy load heavy component
55	const HeavyChart = lazy(() => import('./HeavyChart'));
56	```
57
58	Optimize CSS:
59	- Remove unused CSS
60	- Critical CSS inline, rest async
61	- Minimize CSS files
62	- Use CSS containment for independent regions
63
64	Optimize Fonts:
65	- Use `font-display: swap` or `optional`
66	- Subset fonts (only characters you need)
67	- Preload critical fonts
68	- Use system fonts when appropriate
69	- Limit font weights loaded
70
71	```css
72	@font-face {
73	font-family: 'CustomFont';
74	src: url('/fonts/custom.woff2') format('woff2');
75	font-display: swap; /* Show fallback immediately */
76	unicode-range: U+0020-007F; /* Basic Latin only */
77	}
78	```
79
80	Optimize Loading Strategy:
81	- Critical resources first (async/defer non-critical)
82	- Preload critical assets
83	- Prefetch likely next pages
84	- Service worker for offline/caching
85	- HTTP/2 or HTTP/3 for multiplexing
86
87	### Rendering Performance
88
89	Avoid Layout Thrashing:
90	```javascript
91	// ❌ Bad: Alternating reads and writes (causes reflows)
92	elements.forEach(el => {
93	const height = el.offsetHeight; // Read (forces layout)
94	el.style.height = height * 2; // Write
95	});
96
97	// ✅ Good: Batch reads, then batch writes
98	const heights = elements.map(el => el.offsetHeight); // All reads
99	elements.forEach((el, i) => {
100	el.style.height = heights[i] * 2; // All writes
101	});
102	```
103
104	Optimize Rendering:
105	- Use CSS `contain` property for independent regions
106	- Minimize DOM depth (flatter is faster)
107	- Reduce DOM size (fewer elements)
108	- Use `content-visibility: auto` for long lists
109	- Virtual scrolling for very long lists (react-window, react-virtualized)
110
111	Reduce Paint & Composite:
112	- Use `transform` and `opacity` for animations (GPU-accelerated)
113	- Avoid animating layout properties (width, height, top, left)
114	- Use `will-change` sparingly for known expensive operations
115	- Minimize paint areas (smaller is faster)
116
117	### Animation Performance
118
119	GPU Acceleration:
120	```css
121	/* ✅ GPU-accelerated (fast) */
122	.animated {
123	transform: translateX(100px);
124	opacity: 0.5;
125	}
126
127	/* ❌ CPU-bound (slow) */
128	.animated {
129	left: 100px;
130	width: 300px;
131	}
132	```
133
134	Smooth 60fps:
135	- Target 16ms per frame (60fps)
136	- Use `requestAnimationFrame` for JS animations
137	- Debounce/throttle scroll handlers
138	- Use CSS animations when possible
139	- Avoid long-running JavaScript during animations
140
141	Intersection Observer:
142	```javascript
143	// Efficiently detect when elements enter viewport
144	const observer = new IntersectionObserver((entries) => {
145	entries.forEach(entry => {
146	if (entry.isIntersecting) {
147	// Element is visible, lazy load or animate
148	}
149	});
150	});
151	```
152
153	### React/Framework Optimization
154
155	React-specific:
156	- Use `memo()` for expensive components
157	- `useMemo()` and `useCallback()` for expensive computations
158	- Virtualize long lists
159	- Code split routes
160	- Avoid inline function creation in render
161	- Use React DevTools Profiler
162
163	Framework-agnostic:
164	- Minimize re-renders
165	- Debounce expensive operations
166	- Memoize computed values
167	- Lazy load routes and components
168
169	### Ne

People who liked this also viewed

6 picks

Type