skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

kb-performance

Measure and optimize LCP, INP, and CLS in Next.js React apps.

Updated May 19, 2026
Search Tags:#performance#drizzle#web vitals#next.js#vercel#bundle analysis#neon postgres
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kb-performance
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/kb-performance
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

kb-performance helps teams fix real performance problems in Next.js + React + Drizzle applications by turning vague “it’s slow” reports into a measurable, stack-tuned optimization workflow.

Core Features & Use Cases

  • Measure-first discipline: capture LCP/INP/CLS plus bundle size and SQL timings before changing code.
  • 4-step optimization workflow: BASELINE → IDENTIFY → FIX → VALIDATE, with targeted changes and re-measurement.
  • Stack-specific playbooks: eliminate waterfalls, manage React Server Components vs Client boundaries, reduce bundle bloat, and tune Drizzle/Neon with EXPLAIN ANALYZE.
  • Typical use cases: LCP/INP/CLS over budget, slow dashboards, long-list jank, oversized bundles, and memory growth after prolonged usage.

Quick Start

Use kb-performance to optimize a slow dashboard by first recording LCP/INP/CLS and SQL timings for the affected page, then applying the single most likely fix from the playbooks, and finally re-measuring to confirm the improvement.

Frequently Asked Questions about kb-performance

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

FAQPage Schema
How do I fix slow Next.js LCP and INP issues in my App Router project?▼

Fix slow Next.js LCP and INP issues by following a measurement-driven workflow that baselines Core Web Vitals, identifies bottlenecks like render waterfalls or RSC boundary issues, applies targeted fixes, and validates improvements.

What is the best way to reduce bundle bloat and long-list jank in a React application?▼

The best way to reduce bundle bloat and long-list jank is to measure initial bundle size and interaction latency first, then apply stack-tuned diagnostics to eliminate unnecessary client-side JavaScript before re-measuring.

How can I diagnose database latency causing slow dashboards with Drizzle and Neon Postgres?▼

Diagnose Drizzle and Neon Postgres database latency by capturing SQL timings during the baseline phase, then running EXPLAIN ANALYZE to validate query execution plans and apply targeted caching or indexing fixes.

Does this performance optimization workflow require a Vercel deployment environment?▼

The workflow is stack-tuned for Next.js App Router projects deployed on Vercel using Drizzle and Neon Postgres, applying diagnostics specifically designed for that hosting and database configuration.

Why does my Next.js application experience visual instability and high CLS scores?▼

High CLS scores and visual instability often stem from unoptimized React Server Component boundaries or client-side rendering shifts, which require measuring the layout shift baseline before applying targeted fixes.

Related Skills

Explore More Software Engineering Skills→
ligianehualigianehua

benchmark

Detect web performance regressions by comparing current metrics against established baselines.

Community
Advanced
JeffallanJeffallan
10.9k

database-optimizer

Diagnose slow queries and optimize indexes for PostgreSQL and MySQL.

Community
Advanced
alceupassosalceupassos

drizzle

Manage PostgreSQL schemas and optimize queries with Drizzle ORM.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced