Web Performance Agent Skill

Web performance optimization patterns, Core Web Vitals, lazy loading, code splitting, caching strategies, and monitoring

656 tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

365

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill web-performance

The instruction itself

7 sections, as written by the author

Web Performance

Systematic approach to measuring, analyzing, and optimizing web application performance.

Core Web Vitals

| Metric | Target | What It Measures |

|--------|--------|------------------|

| LCP (Largest Contentful Paint) | < 2.5s | Loading performance |

| FID (First Input Delay) | < 100ms | Interactivity |

| CLS (Cumulative Layout Shift) | < 0.1 | Visual stability |

| INP (Interaction to Next Paint) | < 200ms | Responsiveness |

Optimization Strategies

1. JavaScript Optimization

// Dynamic imports — code splitting
const Chart = dynamic(() => import('./Chart'), {
  loading: () => <ChartSkeleton />,
  ssr: false, // If chart needs browser APIs
});

// Bundle analysis
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});

2. Image Optimization

// Next.js Image component
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // Above-the-fold images
  placeholder="blur"
  blurDataURL="data:image/webp;base64,..."
/>

// Responsive images with srcSet
<picture>
  <source media="(min-width: 1024px)" srcSet="/hero-lg.webp" />
  <source media="(min-width: 640px)" srcSet="/hero-md.webp" />
  <img src="/hero-sm.webp" alt="Hero" loading="lazy" />
</picture>

3. Caching Strategy

// Service Worker caching strategies
// Cache-First for static assets
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/static/')) {
    event.respondWith(cacheFirst(event.request));
  }
  // Network-First for API calls
  if (event.request.url.includes('/api/')) {
    event.respondWith(networkFirst(event.request));
  }
});

Common Mistakes

Optimizing before measuring: Always measure first. Use Lighthouse, WebPageTest, and RUM data.
Ignoring mobile performance: Test on real mobile devices, not just desktop DevTools.
Blocking rendering with JavaScript: Defer non-critical JS. Use async/defer on scripts.
Not optimizing images: Use WebP/AVIF, responsive images, and lazy loading.
Missing performance budgets: Set budgets in your CI pipeline and fail builds that exceed them.

Other skills for the same job

different authors, same section of the catalogue

Modal

by christophacham

×3

Run Python code in the cloud with serverless containers, GPUs, and autoscaling. Use when deploying ML models, running batch processing jobs, scheduling compute-intensive tasks, or serving APIs that require GPU acceleration or dynamic scaling.

17k tokens

Github Workflow Automation

by ComeOnOliver

×3

Advanced GitHub Actions workflow automation with AI swarm coordination, intelligent CI/CD pipelines, and comprehensive repository management

Google Cloud Platform CLI - manage GCP resources including Compute Engine, Cloud Run, GKE, Cloud Functions, Storage, BigQuery, and more.

Expert backend architect specializing in scalable API design, microservices architecture, and distributed systems. Masters REST/GraphQL/gRPC APIs, event-driven architectures, service mesh patterns, and modern backend frameworks. Handles service boundary definition, inter-service communication, resilience patterns, and observability. Use PROACTIVELY when creating new backend services or APIs.

Aspire skill covering the Aspire CLI, AppHost orchestration, service discovery, integrations, MCP server, VS Code extension, Dev Containers, GitHub Codespaces, templates, dashboard, and deployment. Use when the user asks to create, run, debug, configure, deploy, or troubleshoot an Aspire distributed application.

21k tokens

Bigquery Pipeline Audit

by github

vendor ×1

Audits Python + BigQuery pipelines for cost safety, idempotency, and production readiness. Returns a structured report with exact patch locations.

Microsoft Store Developer CLI (msstore) for publishing Windows applications to the Microsoft Store. Use when asked to configure Store credentials, list Store apps, check submission status, publish submissions, manage package flights, set up CI/CD for Store publishing, or integrate with Partner Center. Supports Windows App SDK/WinUI, UWP, .NET MAUI, Flutter, Electron, React Native, and PWA applications.

4k tokens

How to use it

Copy the folder

Take cosmicstack-labs/web-performance from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.