Performance Agent Skill
Core Web Vitals, lazy loading, code splitting, and bundle analysis.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Core Web Vitals, lazy loading, code splitting, and bundle analysis.
homepage: https://yepapi.com/skills/performance
metadata:
tags: [performance, web-vitals, optimization, bundle]
---
# Performance
## Rules
- Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1
- Lazy load below-fold images and heavy components: `React.lazy()`, `next/dynamic`
- Code split routes — each page loads only its own code
- Optimize images: WebP/AVIF format, proper sizing, `next/image` with `sizes`
- Bundle analysis: `@next/bundle-analyzer` — identify large dependencies
- Caching: HTTP cache headers, service worker for repeat visits, stale-while-revalidate
- Database: index frequently queried columns, use `EXPLAIN ANALYZE` to find slow queries
- Avoid layout shifts: set explicit dimensions on images, videos, embedsInstall
Why Use the Performance Skill?
Without this skill, your AI guesses at performance patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Performance skill installed. Your AI knows the context and writes code that fits.
"Optimize Core Web Vitals by fixing LCP, CLS, and INP issues on this page"
"Add code splitting, lazy loading, and bundle analysis to reduce initial load time"
"Create a performance monitoring setup that tracks Web Vitals and alerts on regressions"
Works Great With
Performance skill — FAQ
It enforces Core Web Vitals optimization, lazy loading, code splitting, and bundle analysis. Your AI writes performant code and identifies bottlenecks before they reach production.
Run `npx skills add YepAPI/skills --skill performance` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
The skill targets Google's good thresholds: LCP under 2.5s, INP under 200ms, and CLS under 0.1. It provides specific optimization patterns for each metric.