// Use when measuring or optimizing Core Web Vitals — provides LCP/INP/CLS targets, measurement tool configurations, and optimization techniques for each vital metric. Also triggers on: re-run, update, revise, supplement.
Use when optimizing application or system performance — dispatches profiling-analyst, frontend-optimizer, backend-optimizer, infra-tuner, and performance-reviewer to identify bottlenecks, implement optimizations, and validate improvements with ROI estimation. Covers full-stack performance from Core Web Vitals through API latency, database queries, caching, and infrastructure tuning. Does NOT cover application security review (use security harness), load testing execution, or capacity planning for new systems. Also triggers on: speed up my app, fix slow page load, reduce API latency, optimize Core Web Vitals, tune Kubernetes scaling, reduce infrastructure costs.
Use when you need to generate a complete test suite for a project — dispatches test-strategist, unit-test-writer, integration-test-writer, e2e-test-writer, and test-reviewer in sequence to produce strategy, implementation, and review artifacts. Covers test pyramid design, unit/integration/E2E implementation, coverage analysis, and flaky-test detection. Does NOT cover runtime performance testing, load/stress testing, or security penetration testing (use dedicated harnesses for those). Also triggers on: add tests to existing project, improve test coverage, write tests for this module, review our test suite.
Use when performing a comprehensive security audit of a codebase, application, or system — dispatches threat-modeler, code-security-analyst, dependency-auditor, and config-reviewer in a pipeline, then synthesizes findings into a prioritized security report with CVSS scoring and remediation roadmap. Covers threat modeling (STRIDE), static code analysis (SAST), software composition analysis (SCA), and configuration hardening review. Does NOT cover penetration testing, runtime DAST scanning, social engineering assessment, or physical security review. Also triggers on: run security review, check for vulnerabilities, audit for compliance, generate security report, assess security posture.
Use when you need thorough code review of a PR or file set — dispatches style-inspector, security-analyst, performance-analyst, and architecture-reviewer in sequence, then synthesizes findings into a prioritized action report. Covers correctness, security vulnerabilities, performance bottlenecks, and architecture alignment. Does NOT cover runtime testing, deployment validation, or auto-merging PRs. Also triggers on: re-run, update, revise, supplement.
Use when you need to create a new multi-agent harness for a domain not yet covered in this repository, or when asked to 'build a harness', 'design an agent team', or 'create agents for [domain]'. Analyzes the domain, selects one of 6 architectural patterns (Pipeline, Fan-out/Fan-in, Expert Pool, Producer-Reviewer, Supervisor, Hierarchical), then generates all agent .md files, SKILL.md files, and HARNESS.md following Copilot CLI file-bus conventions. Does NOT port existing Claude Code harnesses — use PORTING-NOTES.md and guides/porting-from-claude-code.md for that. Also triggers on: re-run harness design, update agent team, revise harness architecture, supplement harness with additional agents.
Use when reviewing or building a backend API for security — provides OWASP API Security Top 10 checklist, authentication patterns, and security header configuration. Extends the backend-dev agent. Also triggers on: re-run, update, revise, supplement.
| name | core-web-vitals |
| description | Use when measuring or optimizing Core Web Vitals — provides LCP/INP/CLS targets, measurement tool configurations, and optimization techniques for each vital metric. Also triggers on: re-run, update, revise, supplement. |
| metadata | {"category":"skill","harness":"29-performance-optimizer","agent_type":"general-purpose"} |
Reference skill for Core Web Vitals optimization used by the frontend-optimizer agent.
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | ≤ 200ms | 200ms - 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1 - 0.25 | > 0.25 |
| TTFB (Time to First Byte) | < 800ms | 800ms - 1800ms | > 1800ms |
| FCP (First Contentful Paint) | < 1.8s | 1.8s - 3.0s | > 3.0s |
Note: FID (First Input Delay) was removed from Core Web Vitals in March 2024 and replaced by INP.
Preload the LCP element resource:
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
Eliminate render-blocking resources:
<script src="analytics.js" defer></script>
<link rel="preload" href="font.woff2" as="font" crossorigin>
Use a CDN with edge caching for the LCP image
Reduce TTFB: server-side caching, CDN, database query optimization
Avoid lazy loading the LCP element (common mistake)
Always set width and height on images:
<img width="800" height="600" src="product.jpg">
Reserve space for ads and embeds:
.ad-slot { min-height: 250px; }
Avoid inserting content above existing content
Use CSS transform for animations instead of layout-triggering properties
font-display: optional (zero CLS from font swap)
scheduler.yield() or setTimeoutReact.startTransition for non-urgent state updatesmodule.exports = {
ci: {
collect: {
url: ['https://example.com/', 'https://example.com/product'],
numberOfRuns: 3
},
assert: {
assertions: {
'categories:performance': ['error', {minScore: 0.9}],
'largest-contentful-paint': ['error', {maxNumericValue: 2500}],
'cumulative-layout-shift': ['error', {maxNumericValue: 0.1}],
'total-blocking-time': ['error', {maxNumericValue: 300}]
}
},
upload: {
target: 'lhci',
serverBaseUrl: 'https://lhci.example.com'
}
}
}