skills.rest
BenSheridanEdwards
BenSheridanEdwardsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

performance-audit

Audit runtime performance patterns in TypeScript and React frontends against an opinionated baseline.

3|5|Updated Apr 26, 2026
Search Tags:#code quality#typescript#performance#react#audit#lighthouse#core web vitals
One-click install
npx skills add https://github.com/BenSheridanEdwards/ArchitectPlaybook --skill performance-audit-bensheridanedwards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-audit
Source: https://github.com/BenSheridanEdwards/ArchitectPlaybook/tree/main/performance-audit
Command: npx skills add https://github.com/BenSheridanEdwards/ArchitectPlaybook --skill performance-audit-bensheridanedwards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend performance regressions in React and TypeScript applications are hard to spot in code review: unmemoized computations, unvirtualized long lists, N+1 fetch patterns, missing LCP priority hints, and absent Web Vitals monitoring silently degrade Core Web Vitals. This Skill statically audits a codebase across four layers (render performance, network and data, assets and Core Web Vitals, main-thread work and measurement) and produces structured findings plus an optional implementation plan. ## Core Features & Use Cases - Four-layer static audit: Checks render performance (memoization, list virtualization, stable keys), network and data patterns (staleTime, parallel fetches, N+1 queries), assets and Core Web Vitals (image primitives, LCP priority, font-display, CLS), and main-thread work (throttled handlers, compositor-friendly animations, RUM integration). - Optional Lighthouse enrichment: With --with-lighthouse-results, reads an existing Lighthouse JSON results file to cross-validate the LCP element and verify performance-score budgets, without ever running Lighthouse itself. - Structured outputs and planning: Writes findings.md, findings.json (schema 2.0.0 for Repository Quality Score roll-up), snapshot.md, and metadata.json to .architect-audits/performance-audit/, then offers to generate an implementation plan ordered by Core Web Vitals impact. - Use Case: Run /performance-audit --with-lighthouse-results on a Next.js app before a release to detect that a 200-item message list is not virtualized and that no landing-route image is marked as the LCP priority candidate, then generate a fix plan. ## Quick Start Run /performance-audit in the root of your TypeScript React project to get a concise Top 5 findings summary and a full report written to .architect-audits/performance-audit/findings.md.

Frequently Asked Questions about performance-audit

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

FAQPage Schema
How do I audit React performance issues in my codebase?▼

Run /performance-audit from the project root of a TypeScript React app. It statically checks memoization, list virtualization, context stability, fetch patterns, image handling, and monitoring setup, then writes findings to .architect-audits/performance-audit/ and offers an implementation plan.

How to use Lighthouse results with a static performance audit?▼

Pass --with-lighthouse-results and place a Lighthouse JSON results file at lighthouse-results.json (or set --lighthouse-results-path). The audit reads LCP, INP, CLS, TBT, and FCP to enrich the snapshot and cross-validate the LCP image; it never runs Lighthouse itself.

Does the performance audit work with Next.js, Remix, and Vite?▼

Yes, it detects Next.js App Router or Pages Router, Remix, Vite-React, Create React App, and plain React from package.json. Framework-conditional checks, such as Suspense streaming for slow data, apply only to Next.js App Router projects.

What is the difference between performance-audit and bundle-build-audit?▼

performance-audit owns runtime costs: rendering, data fetching, asset usage at runtime, and main-thread work. bundle-build-audit owns build-time concerns like bundle size, build time, and code splitting configuration. Overlapping gaps like Lighthouse CI are surfaced by both.

Why does the audit report not-applicable for my project?▼

The audit requires a TypeScript and React project. If package.json, tsconfig.json, or a react dependency is missing, it writes a canonical not-applicable result with every catalog check present and a null status rather than silently skipping coverage.

Can the performance audit modify my source files automatically?▼

No, the skill is fully read-only and never accepts --apply. It writes findings and, only after explicit confirmation, a descriptive implementation-plan.md listing which components to memoize, lists to virtualize, and images to prioritize.

Related Skills

Explore More Software Engineering Skills→
Arete-ConsortiumArete-Consortium
4

senior-software-analyst

Audits codebases to map architecture, assess technical debt, and produce structured analysis reports.

Official
Intermediate
TencentCloudBaseTencentCloudBase
1.1k

codebase-audit

Audit a codebase, file GitHub issues, and fix findings in isolated git worktrees with PRs.

Official
Advanced
oakossoakoss
14

react-patterns

Guide React 19+ patterns covering hooks, Server Components, and optimization.

Official
Intermediate
ivanshtokovivanshtokov
2

performance-profiling

Run Lighthouse audits to measure Core Web Vitals and detect front-end performance regressions.

Community
Intermediate