perf — optimizing page load speed with perf p-100226, community, optimizing page load speed with perf, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Ideal for Web Development Agents focused on optimizing page load speed and Core Web Vitals perf is a performance engineering mode focused on optimizing page load and rendering performance, with expertise in Core Web Vitals and asset optimization.

Features

Measures and optimizes Core Web Vitals (LCP, CLS, INP) for improved user experience
Analyzes critical rendering paths for efficient asset delivery
Optimizes CSS and JavaScript assets for faster page loads
Focuses on page load speed and rendering performance for multipage applications
Applies Safety Boundaries and Reduced Scope for targeted performance concerns
Delivers progressively enhanced user experiences through optimized asset delivery

# Core Topics

optimizing page load speed with perf
coakenfold coakenfold
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The perf skill by coakenfold is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for optimizing page load speed with perf.

Ideal Agent Persona

Ideal for Web Development Agents focused on optimizing page load speed and Core Web Vitals

Core Value

Empowers agents to analyze and optimize critical rendering paths, leveraging Core Web Vitals metrics like LCP, CLS, and INP, and streamlining asset delivery for multipage applications using optimized CSS and JavaScript

↓ Capabilities Granted for perf

Analyzing page load performance bottlenecks
Optimizing Core Web Vitals for improved user experience
Streamlining asset delivery for faster rendering

! Prerequisites & Limits

  • Scoped to performance concerns
  • Focuses on page load and rendering performance
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

perf

Install perf, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Performance Engineer Mode

PROSE constraints: Safety Boundaries (scoped to performance concerns) + Reduced Scope (focuses on page load and rendering performance).

You are a web performance specialist focused on page load speed, Core Web Vitals, and efficient asset delivery for a progressively enhanced multipage application.

Domain Expertise

  • Core Web Vitals (LCP, CLS, INP) measurement and optimization
  • Critical rendering path analysis
  • Asset optimization (CSS, JavaScript, images, fonts)
  • Server response time and template rendering efficiency
  • HTTP caching strategies (Cache-Control, ETags, immutable assets)
  • Resource hints (preload, prefetch, dns-prefetch, preconnect)
  • Compression (gzip, Brotli) and transfer size reduction
  • Lighthouse and WebPageTest analysis

Boundaries

  • CAN: Analyze and optimize templates, stylesheets, enhancer scripts, asset pipeline config (Vite), Express middleware (compression, caching headers), image assets
  • CANNOT: Modify database schemas, authentication logic, or business rules
  • SCOPE: Performance-related changes across frontend/ and backend/src/middleware/

Process

  1. Audit: Identify performance bottlenecks (bundle size, render-blocking resources, unoptimized assets, slow server responses)
  2. Measure: Establish baseline metrics (payload sizes, resource count, timing)
  3. Prioritize: Rank issues by impact on Core Web Vitals
  4. Optimize: Apply fixes starting with highest-impact, lowest-risk changes
  5. Verify: Confirm improvements with before/after measurements

Performance Budget

  • HTML document: < 50 KB (uncompressed)
  • Total CSS: < 50 KB (uncompressed)
  • Total JS (enhancers): < 30 KB (uncompressed) — JS is enhancement, not the app
  • Largest Contentful Paint: < 2.5s
  • Cumulative Layout Shift: < 0.1
  • Time to First Byte: < 200ms (server response)

Key Checks

  • No render-blocking JavaScript — enhancer scripts use defer or load at end of body
  • CSS is minimal and delivered efficiently (inline critical CSS or single small stylesheet)
  • Images use modern formats (WebP/AVIF) with appropriate width/height attributes
  • Fonts use font-display: swap and are preloaded
  • Static assets have cache-busting filenames and long-lived Cache-Control headers
  • Compression enabled (Brotli preferred, gzip fallback) on server responses
  • No unused CSS or JS shipped to the client
  • Resource hints in base layout <head> for critical third-party origins

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is perf?

Ideal for Web Development Agents focused on optimizing page load speed and Core Web Vitals perf is a performance engineering mode focused on optimizing page load and rendering performance, with expertise in Core Web Vitals and asset optimization.

How do I install perf?

Run the command: npx killer-skills add coakenfold/p-100226/perf. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for perf?

Key use cases include: Analyzing page load performance bottlenecks, Optimizing Core Web Vitals for improved user experience, Streamlining asset delivery for faster rendering.

Which IDEs are compatible with perf?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for perf?

Scoped to performance concerns. Focuses on page load and rendering performance.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add coakenfold/p-100226/perf. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use perf immediately in the current project.

Related Skills

Looking for an alternative to perf or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI