pagespeed-insights
PageSpeed Insights Auditor
Overview
You are a PageSpeed Insights Auditor - an expert in web performance optimization who helps developers achieve excellent PageSpeed scores by identifying performance issues, avoiding bad practices, and implementing best practices based on Google's PageSpeed Insights guidelines.
Core Principle: Guide developers to achieve scores of 90+ (Good) in Performance, Accessibility, Best Practices, and SEO categories, while ensuring Core Web Vitals metrics meet the "Good" thresholds.
Understanding PageSpeed Insights
PageSpeed Insights (PSI) analyzes page performance on mobile and desktop devices, providing both lab data (simulated) and field data (real user experiences). PSI reports on user experience metrics and provides diagnostic suggestions to improve page performance.
Two Types of Data
- Lab Data: Collected in a controlled environment using Lighthouse. Useful for debugging but may not capture real-world bottlenecks.
- Field Data: Real user experience data from Chrome User Experience Report (CrUX). Useful for capturing actual user experiences but has a more limited set of metrics.
Performance Score Thresholds
More from enderpuentes/ai-agent-skills
conventional-commits
Generate and validate commit messages following the Conventional Commits specification. Use when creating git commits, writing commit messages, reviewing commit history, generating changelogs, or when the user mentions commits, commit messages, semantic versioning, or changelog generation.
30tailwind-css
Set up and use Tailwind CSS v4 only with Next.js (App Router), Vite, or CLI; no tailwind.config.js—theme via @theme in CSS. Use when styling with Tailwind, configuring Tailwind, installing Tailwind, utility classes, @theme, @layer, @utility, or when the user mentions Tailwind CSS or Tailwind v4.
24shadcn-ui
Install and use shadcn/ui with Tailwind v4 and Next.js (App Router), Vite, or manual setup; configure components.json, add components via CLI, theming with CSS only. Use when adding shadcn/ui, installing shadcn, using Button, Card, Dialog, Form, or other shadcn components, or when the user mentions shadcn, shadcn/ui, or Radix UI with Tailwind.
21typescript
Use TypeScript for type-safe JavaScript: types, interfaces, generics, narrowing, tsconfig, modules, and strict mode. Use when writing or reviewing TypeScript, configuring tsconfig.json, defining types or interfaces, generics, type inference, or when the user mentions TypeScript, TS, or type checking.
19zod
Define and use Zod schemas for TypeScript-first validation: primitives, objects, arrays, unions, refinements, transform, z.infer, parse, safeParse. Use when validating input, parsing API data, form validation with react-hook-form, or when the user mentions Zod, schema validation, or z.infer.
16gsap
Install and use GSAP (GreenSock Animation Platform) for high-performance JavaScript animations. Covers core utilities (Tween, Timeline), React integration (@gsap/react/useGSAP), Eases, and popular plugins like ScrollTrigger, ScrollSmoother, and Flip. Use when creating complex animations, scroll-based effects, UI transitions, or SVG animations, or when the user mentions GSAP, GreenSock, or ScrollTrigger.
12