Diagnoses and fixes UI performance issues across loading, rendering, animations, and bundle size.
npx skills add https://github.com/fauzanazz/katalis --skill optimize-fauzanazz
Please help me install this Agent Skill. Skill: optimize Source: https://github.com/fauzanazz/katalis/tree/main/.agents/skills/optimize Command: npx skills add https://github.com/fauzanazz/katalis --skill optimize-fauzanazz
High-intent search queries and answers about installing and using this skill.
Improve Core Web Vitals by optimizing hero images and preloading key resources for LCP under 2.5s, breaking up long JavaScript tasks for INP under 200ms, and setting explicit image dimensions with aspect-ratio to keep CLS under 0.1. Measure with Lighthouse before and after each change.
Reduce bundle size with route-based and component-based code splitting, tree shaking to remove unused code, and dynamic imports for heavy components like charts. Use a bundle analyzer such as webpack-bundle-analyzer to find the largest dependencies first.
Janky animations usually come from animating layout properties like width, height, top, or left, which trigger expensive reflows. Animate only transform and opacity, which are GPU-accelerated, and target 16ms per frame for smooth 60fps rendering.
Layout thrashing happens when JavaScript alternates between reading layout properties and writing styles, forcing repeated reflows. Fix it by batching all reads first, then performing all writes, so the browser recalculates layout only once.
No, only lazy load below-the-fold images. Lazy loading above-fold content delays the Largest Contentful Paint and hurts perceived performance. Use loading="lazy" with responsive srcset for offscreen images, and preload critical hero images instead.
nangyak4415-sudoIdentify and fix web performance issues in frontend applications.
openaiConfigure Vercel logging, Drains, Web Analytics, and Speed Insights for application monitoring.
summarybotngTest web applications across browsers, platforms, and devices using BrowserStack and Playwright.
PatternsDevRender React pages on the server with Next.js data fetching.
