SkillVaultskills Browse all 500 skills

Performance · Version 1.6.0 · Reviewed 2026-08-02

Frontend Performance Agent

Locate and remove the dominant bottleneck in bundle analysis and rendering strategy with evidence, explicit trade-offs, and a verification plan.

4 method steps 6 documented failure modes 5 diagnostic checks 7 quality gates

Improves Core Web Vitals through bundle analysis, rendering strategy, and asset delivery.

₹99 one-time

Get this skill archive

What this skill helps you do

  • Bundle analysis
  • Rendering strategy
  • Core Web Vitals

How Frontend Performance Agent works

You provide

Schema, query plans, and the real access pattern

It inspects

Plan accuracy and lock behavior for bundle analysis

It decides

A rendering strategy change weighed against write cost

You verify

Re-measured plan with buffer reads and timing compared

What it checks first

Frontend Performance Skill improves Core Web Vitals through bundle analysis, rendering strategy, and asset delivery. Use it when the work involves Bundle analysis, Rendering strategy, Core Web Vitals.

  1. The actual query plan with real row counts, not the estimated plan or the query text alone.
  2. Whether the workload is read-heavy, write-heavy, or mixed, since the correct design differs sharply.
  3. Transaction boundaries and duration, because long transactions block vacuum and hold locks.
  4. Index coverage relative to both the filter and the sort, since satisfying one but not the other still costs a sort.
  5. Connection pool behavior, as pool exhaustion presents as database slowness while the database is idle.

Failure modes it recognizes

  • An index that serves the predicate but not the ordering, forcing a full sort for a small LIMIT.
  • A long-running transaction preventing vacuum and causing gradual bloat and plan degradation.
  • Implicit type casting on a join or filter column silently disabling index use.
  • Connection pool exhaustion from long-held connections, appearing as a database problem.
  • A write-heavy table with excessive indexes where insert cost dominates the workload.
  • Statistics stale after a bulk load, so the planner chooses a plan for a table size that no longer exists.

Answers it will reject

  • Adding an index per slow query until write amplification becomes the new bottleneck.
  • Tuning configuration parameters before examining the plan for the dominant query.
  • Interpreting `EXPLAIN` without `ANALYZE`, which reports estimates and proves nothing.
  • Increasing pool size to fix latency caused by lock contention, which adds waiters rather than capacity.

Decision rules it applies

  • Optimize the query that dominates total time, not the one that feels slowest in isolation.
  • Order composite index columns by equality first, then range or sort last.
  • Keep transactions short and never hold one open across an external call.
  • Create and drop indexes concurrently on live tables, accepting the longer build for the absent lock.

Evidence it asks for

  • `EXPLAIN (ANALYZE, BUFFERS)` to compare estimated with actual rows and attribute I/O.
  • Rank queries by cumulative execution time rather than by single-execution latency.
  • Monitor the oldest open transaction and lock wait counts as standing metrics.

The method inside

  1. Define the measured baseline and user-visible target for bundle analysis.
  2. Attribute the dominant cost or latency mechanism affecting rendering strategy.
  3. Rank Core Web Vitals changes by expected impact, confidence, effort, and regression risk.
  4. Validate under representative load and retain guardrail metrics that detect a shifted bottleneck.

Deliverables

  • Bundle analysis assessment
  • Rendering strategy decision and action plan
  • Core Web Vitals verification checklist

Evidence requirements

  • Profiles, traces, timings, resource metrics, and workload shape
  • Baseline and target percentile
  • Environment, concurrency, and payload details

Quality gates

  • Every material claim traces to supplied evidence or is labeled as a hypothesis.
  • The response follows the declared deliverable contract.
  • No execution, access, measurement, or verification is invented.
  • Secrets and personal data are redacted rather than repeated.
  • The user receives a concrete independent verification step.
  • The relevant failure modes in this domain were considered rather than only the reported symptom.
  • No listed anti-pattern was recommended as a solution.

Example task

Input

Our LCP is 4.2 seconds on mobile while our lab scores look fine. Where do we start?

Expected output

The hero image is loaded by JavaScript after hydration, so LCP waits for the entire bundle to parse and execute. Lab runs hide this because they warm the cache, which is also why field data and lab data disagree. Preload the image and serve it from markup rather than from a client-side effect...

Boundaries and compatibility

Ideal for

  • Bundle analysis: produce a decision or artifact grounded in supplied evidence.
  • Rendering strategy: produce a decision or artifact grounded in supplied evidence.
  • Core Web Vitals: produce a decision or artifact grounded in supplied evidence.

Out of scope

  • Optimizing without a baseline
  • Using averages where tail latency determines experience

Agent compatibility

  • GitHub Copilot custom agents
  • Claude Agent Skills / SKILL.md
  • Any instruction-following chat model

Tool policy: Advisory by default. No tools are assumed. If the host provides tools, use read-only evidence gathering unless the user explicitly approves a scoped write or execution action.