Skip to main content
performance Performance optimization patterns covering Core Web Vitals, React render optimization, lazy loading, image optimization, backend profiling, LLM inference, and sustainability UX. Use when improving page speed, debugging slow renders, optimizing bundles, reducing image payload, profiling backend, deploying LLMs efficiently, or reducing digital carbon footprint.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/yonatangross/orchestkit --skill performance명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중...
name performance license MIT compatibility Claude Code 2.1.220+. description Performance optimization patterns covering Core Web Vitals, React render optimization, lazy loading, image optimization, backend profiling, LLM inference, and sustainability UX. Use when improving page speed, debugging slow renders, optimizing bundles, reducing image payload, profiling backend, deploying LLMs efficiently, or reducing digital carbon footprint. tags ["performance","core-web-vitals","lcp","inp","cls","react-compiler","virtualization","lazy-loading","code-splitting","image-optimization","avif","profiling","vllm","quantization","inference","caching","redis","prompt-caching","tanstack-query","prefetching","optimistic-updates","sustainability","carbon-footprint","page-weight"] context fork agent frontend-performance-engineer version 2.1.0 author OrchestKit user-invocable false disable-model-invocation false complexity high persuasion-type guidance effort high metadata {"category":"document-asset-creation"} allowed-tools ["Read","Glob","Grep","WebFetch","WebSearch"]
Performance
Comprehensive performance optimization patterns for frontend, backend, and LLM inference.
Quick Reference
Category Rules Impact When to Use Core Web Vitals 4 CRITICAL LCP, INP, CLS optimization with 2026 thresholds Render Optimization 3 HIGH React Compiler, memoization, virtualization Lazy Loading 3 HIGH Code splitting, route splitting, preloading Image Optimization 2 HIGH AVIF/WebP formats, responsive images Profiling & Backend 3 MEDIUM React DevTools, py-spy, bundle analysis LLM Inference 3 MEDIUM vLLM, quantization, speculative decoding Caching 2 HIGH Redis cache-aside, prompt caching, HTTP cache headers Query & Data Fetching 2 HIGH TanStack Query prefetching, optimistic updates, rollback Sustainability 1 MEDIUM Page weight budgets, lazy loading, optimized formats, dark mode
Total: 23 rules across 9 categories
Core Web Vitals
Google's Core Web Vitals with 2026 stricter thresholds.
Rule File Key Pattern LCP Optimization rules/cwv-lcp.mdPreload hero, SSR, fetchpriority="high" INP Optimization rules/cwv-inp.mdscheduler.yield, useTransition, requestIdleCallback INP Advanced rules/cwv-inp-advanced.mdLayout thrashing, third-party scripts, rAF patterns
Explicit dimensions, aspect-ratio, font-display
2026 Thresholds Metric Current Good 2026 Good LCP <= 2.5s <= 2.0s INP <= 200ms <= 150ms CLS <= 0.1 <= 0.08
Render Optimization React render performance patterns for React 19+.
Rule File Key Pattern React Compiler rules/render-compiler.mdAuto-memoization, "Memo" badge verification Manual Memoization rules/render-memo.mduseMemo/useCallback escape hatches, state colocation Virtualization rules/render-virtual.mdTanStack Virtual for 100+ item lists
Lazy Loading Code splitting and lazy loading with React.lazy and Suspense.
Rule File Key Pattern React.lazy + Suspense rules/loading-lazy.mdComponent lazy loading, error boundaries Route Splitting rules/loading-splitting.mdReact Router 7.x, Vite manual chunks Preloading rules/loading-preload.mdPrefetch on hover, modulepreload hints
Image Optimization Production image optimization for modern web applications.
Rule File Key Pattern Format Selection rules/images-formats.mdAVIF/WebP, quality 75-85, picture element Responsive Images rules/images-responsive.mdsizes prop, art direction, CDN loaders
Next.js Image component usage and the v16 image config defaults are first-party territory; see "Upstream coverage (do not restate)" below.
Profiling & Backend Profiling tools and backend optimization patterns.
Rule File Key Pattern React Profiling rules/profiling-react.mdDevTools Profiler, flamegraph, render counts Backend Profiling rules/profiling-backend.mdpy-spy, cProfile, memory_profiler, flame graphs Bundle Analysis rules/profiling-bundle.mdvite-bundle-visualizer, tree shaking, performance budgets
LLM Inference High-performance LLM inference with vLLM, quantization, and speculative decoding.
Rule File Key Pattern vLLM Deployment rules/inference-vllm.mdPagedAttention, continuous batching, tensor parallelism Quantization rules/inference-quantization.mdAWQ, GPTQ, FP8, INT8 method selection Speculative Decoding rules/inference-speculative.mdN-gram, draft model, 1.5-2.5x throughput
Caching Backend Redis caching and LLM prompt caching for cost savings and performance.
Rule File Key Pattern Redis & Backend rules/caching-redis.mdCache-aside, write-through, invalidation, stampede prevention HTTP & Prompt rules/caching-http.mdHTTP cache headers, LLM prompt caching, semantic caching
Query & Data Fetching TanStack Query v5 patterns for prefetching and optimistic updates.
Rule File Key Pattern Prefetching rules/query-prefetching.mdHover prefetch, route loaders, queryOptions, Suspense Optimistic Updates rules/query-optimistic.mdOptimistic mutations, rollback, cache invalidation
Sustainability Digital sustainability patterns for reducing carbon footprint and energy usage.
Rule File Key Pattern Sustainability UX rules/sustainability-ux.mdPage weight budgets, AVIF/WebP, lazy loading, dark mode
Local Profiling Target When profiling a local app (Lighthouse, Core Web Vitals, bundle analysis), use Portless named URLs for stable, self-documenting targets:
portless list
agent-browser open "https://app.localhost"
agent-browser profiler start
agent-browser wait --load networkidle
agent-browser profiler stop /tmp/profile.json
agent-browser open "https://app.localhost"
agent-browser screenshot /tmp/perf-baseline.png
npx lighthouse https://app.localhost --output=json --output-path=/tmp/lighthouse.json
Named URLs are stable across restarts and self-documenting in performance reports. Install Portless with npm i -g portless.
Quick Start Example
import Image from 'next/image' ;
export default async function Page (const data = await fetchHeroData ();
return (
<Image
src ={data.heroImage}
alt ="Hero"
priority
placeholder ="blur"
sizes ="100vw"
fill
/>
Key Decisions Decision Recommendation Memoization Let React Compiler handle it (2026 default) Lists 100+ items Use TanStack Virtual Image format AVIF with WebP fallback (30-50% smaller) LCP content SSR/SSG, never client-side fetch Code splitting Per-route for most apps, per-component for heavy widgets Prefetch strategy On hover for nav links, viewport for content Quantization AWQ for 4-bit, FP8 for H100/H200 Bundle budget Hard fail in CI to prevent regression
Common Mistakes
Client-side fetching LCP content (delays render)
Images without explicit dimensions (causes CLS)
Lazy loading LCP images (delays largest paint)
Heavy computation in event handlers (blocks INP)
Layout-shifting animations (use transform instead)
Lazy loading tiny components < 5KB (overhead > savings)
Missing error boundaries on lazy components
Using GPTQ without calibration data
Not benchmarking actual workload patterns
Only measuring in lab environment (need RUM)
Related Skills
ork:react-server-components-framework - Server-first renderingork:vite-advanced - Build optimizationbrowser-tools - Visual profiling with agent-browser + Portlesscaching - Cache strategies for responsesork:monitoring-observability - Production monitoring and alertingork:database-patterns - Query and index optimizationork:llm-integration - Local inference with Ollama
Capability Details
lcp-optimization Keywords: LCP, largest-contentful-paint, hero, preload, priority, SSR
Solves:
Optimize hero image loading
Server-render critical content
Preload and prioritize LCP resources
inp-optimization Keywords: INP, interaction, responsiveness, long-task, transition, yield
Solves:
Break up long tasks with scheduler.yield
Defer non-urgent updates with useTransition
Optimize event handler performance
cls-prevention Keywords: CLS, layout-shift, dimensions, aspect-ratio, font-display
Solves:
Reserve space for dynamic content
Prevent font flash and image pop-in
Use transform for animations
react-compiler Keywords: react-compiler, auto-memo, memoization, React 19
Solves:
Enable automatic memoization
Identify when manual memoization needed
Verify compiler is working
virtualization Keywords: virtual, TanStack, large-list, scroll, overscan
Solves:
Render 100+ item lists efficiently
Dynamic height virtualization
Window scrolling patterns
lazy-loading Keywords: React.lazy, Suspense, code-splitting, dynamic-import
Solves:
Route-based code splitting
Component lazy loading with error boundaries
Prefetch on hover and viewport
image-optimization Keywords: next/image, AVIF, WebP, responsive, blur-placeholder
Solves:
Next.js Image component patterns
Format selection and quality settings
Responsive sizing and CDN configuration
profiling Keywords: profiler, flame-graph, py-spy, DevTools, bundle-analyzer
Solves:
Profile React renders and backend code
Generate and interpret flame graphs
Analyze and optimize bundle size
inp-advanced Keywords: INP, scheduler-yield, layout-thrashing, third-party-scripts, requestAnimationFrame
Solves:
Break long tasks with scheduler.yield()
Audit and defer blocking third-party scripts
Avoid synchronous layout thrashing in event handlers
Optimize form submissions, dropdowns, accordions, filters
sustainability Keywords: sustainability, carbon-footprint, page-weight, green-ux, dark-mode, lazy-loading
Solves:
Enforce page weight budgets (< 1MB)
Eliminate auto-playing videos and heavy decorative animations
Serve optimized image formats (AVIF/WebP)
Implement cursor-based pagination to prevent over-fetching
llm-inference Keywords: vllm, quantization, speculative-decoding, inference, throughput
Solves:
Deploy LLMs with vLLM for production
Choose quantization method for hardware
Accelerate generation with speculative decoding
Upstream coverage (do not restate) These topics used to be restated in this skill's references, checklists, and examples. They are owned by first-party sources now; consult those instead of re-adding tutorials here. The ork-specific floors and scars that survived the cut live in references/ork-delta.md.
Topic First-party source Core Web Vitals mechanics, audit checklists, before/after examples skill: web-perf / cloudflare:web-perf (Chrome DevTools MCP); https://web.dev/vitals/ Real User Monitoring with the web-vitals library skill: web-perf; https://github.com/GoogleChrome/web-vitals Next.js Image component, v16 image config defaults, image CDN loaders skills: vercel:nextjs + vercel:next-upgrade; https://nextjs.org/docs/app/api-reference/components/image Image format selection and optimization checklists skill: vercel:nextjs; https://web.dev/learn/images React Compiler migration, memoization escape hatches, state colocation skill: vercel-react-best-practices; https://react.dev/learn/react-compiler React DevTools Profiler workflow, render audits skill: vercel-react-best-practices; https://react.dev/reference/react/Profiler TanStack Virtual list/grid virtualization patterns https://tanstack.com/virtual/latest/docs/introduction Route-based code splitting (React Router, Vite manual chunks) https://reactrouter.com/ and https://vite.dev/guide/build Generic profiling workflows (Lighthouse, py-spy, bundle analyzers) skill: web-perf; https://github.com/benfred/py-spy Redis and HTTP caching strategy patterns skill: upstash-redis-js; https://redis.io/docs/latest/ vLLM deployment, quantization, speculative decoding, edge inference https://docs.vllm.ai/ Full-stack performance audit walkthrough https://developer.chrome.com/docs/lighthouse/ ; ork delta in references/ork-delta.md + examples/orchestkit-performance-wins.md
References Load on demand with Read("${CLAUDE_PLUGIN_ROOT}/skills/performance/references/<file>"):
File Content ork-delta.mdOrchestKit floors, scars, and house decisions for this skill cc-prompt-cache-guide.mdCC 2.1.72 prompt cache optimization, stable-first prompt structure database-optimization.mdPostgres indexing and N+1 fixes backing the recorded audit wins
Real production before/after evidence (cache hierarchy, cost math): examples/orchestkit-performance-wins.md.
이 저장소의 다른 Skills Chain patterns for multi-phase pipelines: MCP detection, handoff files, checkpoint-resume, worktree agents, CronCreate monitoring. Use when building or debugging a pipeline skill.
OrchestKit doctor for health diagnostics across manifest integrity, hook configuration, skill validation, agent frontmatter, MCP server connectivity, CC version compatibility, and permission rules. Reports issues with severity levels and auto-remediation suggestions. Validates component counts, detects orphaned entries, and checks CC version matrix compliance. Use when diagnosing plugin health, troubleshooting configuration issues, or running pre-release checks.
Inspects the OrchestKit telemetry pipeline for the current project — lists all known telemetry files with write counts, sizes, schema status, growth trend, and orphan detection. Use when verifying the observability pipeline is healthy, debugging a missing writer, or auditing which files have schema locks vs. which are drift-vulnerable. Read-only — never modifies telemetry files.
