performance-optimizer

Profile and optimize Next.js and Convex frontend rendering, bundles, and data fetches.

Updated Dec 13, 2025
One-click install
npx skills add https://github.com/Posteriot/makalah-app --skill performance-optimizer-posteriot
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance-optimizer
Source: https://github.com/Posteriot/makalah-app/tree/main/.codex/skills/project/performance-optimizer
Command: npx skills add https://github.com/Posteriot/makalah-app --skill performance-optimizer-posteriot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill tackles sluggish makalahapp interfaces caused by heavy bundles, inefficient renders, and redundant data fetches so users experience faster pages and streaming chat replies.

Core Features & Use Cases

  • Profiling and observability: collect context on the slow UI area, read the profiling checklist, and trace rerenders while documenting network behavior.
  • Render optimization: recommend memoization, reduce client components, and enforce smarter code splitting by following the render and bundle optimization references.
  • Data fetch strategy: audit Convex/Next.js queries for batching, caching, and indexing improvements, then validate the impact with lint/build tests.
  • Use Case: When a chat or data-heavy page lags after a new feature deploy, use this workflow to diagnose bundle weight, rendering hot paths, and data inefficiencies before proposing safe fixes.

Quick Start

Ask for a performance audit that profiles the slow UI flow, evaluates bundle and render hot paths, and checks Convex query efficiency using the provided references.

Frequently Asked Questions about performance-optimizer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize slow Next.js streaming chat interfaces?

Next.js streaming chat optimization requires profiling rendering hot paths, reducing heavy bundles via code splitting, and eliminating redundant data fetches to accelerate UI responsiveness and chat replies.

Why does my data-driven Next.js page lag after deploying new features?

Data-driven Next.js pages lag after deploys from heavy bundles, inefficient rerenders, and redundant data fetches. Auditing render hot paths and network behavior identifies the exact bottleneck before proposing fixes.

What's the best way to reduce redundant data fetches in Convex?

Reducing redundant Convex data fetches requires auditing queries for batching, caching, and indexing improvements. Validating these optimizations with lint, build, and test evidence ensures sustained performance gains.

How do I trace and fix unnecessary React rerenders in a Next.js app?

Tracing React rerenders in Next.js requires profiling slow UI flows to document behavior, then applying memoization and reducing client components to enforce smarter code splitting and eliminate redundant renders.

Can I audit bundle size and Convex query efficiency together?

Yes, auditing bundle size and Convex query efficiency together involves profiling rendering, measuring bundle weight, inspecting queries, and validating optimization impacts through lint, build, and test evidence.