Source profileQuality 85/100

fcakyon/claude-codex-settings/plugins/web-performance-skills/skills/web-performance-optimization/SKILL.md

web-performance-optimization

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.

Source repository stars: 961
Declared platforms: 0
Static risk flags: 0
Last source update: 2026-08-04
Source checked: 2026-08-04

Decision Compatibility Install Workflow Permissions Evidence Source

Decision brief

What it does—and where it fits

Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.

Best for

Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.

Not for

Tasks that require unconfirmed production actions or broad system permissions.
Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

Platform	Status	Evidence	What to check
Codex	Not declared	No explicit evidence	Portability before use
Claude Code	Not declared	No explicit evidence	Portability before use
Cursor	Not declared	No explicit evidence	Portability before use
Gemini CLI	Not declared	No explicit evidence	Portability before use

Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource

npx skills add https://github.com/fcakyon/claude-codex-settings --skill "plugins/web-performance-skills/skills/web-performance-optimization"

Safe inspection promptEditorial

Inspect the Agent Skill "web-performance-optimization" from https://github.com/fcakyon/claude-codex-settings/blob/ccd2e764cc57ba1e8de4833615a04d540ba1295a/plugins/web-performance-skills/skills/web-performance-optimization/SKILL.md at commit ccd2e764cc57ba1e8de4833615a04d540ba1295a. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

01
Workflow
Copy this checklist to track progress:
Navigate to the target URL:Start a performance trace with reload to capture cold-load metrics:Wait for trace completion, then retrieve results.
02
Phase 1: Performance Trace
1. Navigate to the target URL:
Navigate to the target URL:Start a performance trace with reload to capture cold-load metrics:Wait for trace completion, then retrieve results.
03
Phase 2: Core Web Vitals Analysis
Use performanceanalyzeinsight to extract key metrics.
TTFB: 1.8sFCP: 3sLCP: 4s
04
Phase 3: Network Analysis
List all network requests to identify optimization opportunities:
Render-blocking resources: JS/CSS in without async/defer/media attributesNetwork chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)Missing preloads: Critical resources (fonts, hero images, key scripts) not preloaded
05
Phase 4: Accessibility Snapshot
Take an accessibility tree snapshot:
Missing or duplicate ARIA IDsElements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)Focus traps or missing focus indicators

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial

Signal	Value	Evidence type	Meaning
Quality score	85/100	Computed	Documentation, specificity, maintenance, and trust rules
Repository stars	961	Source	Repository attention, not individual Skill quality
Compatibility	0 platforms	Source	Declared in the catalog source record
Usage guide	automated source guide	Editorial	Generated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository: fcakyon/claude-codex-settings
Skill path: plugins/web-performance-skills/skills/web-performance-optimization/SKILL.md
Commit: ccd2e764cc57ba1e8de4833615a04d540ba1295a
License: Apache-2.0
Collected: 2026-08-04
Default branch: main

View the original SKILL.md

Web Performance Audit

Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.

Retrieval Sources

Source	How to retrieve	Use for
web.dev	`https://web.dev/articles/vitals`	Core Web Vitals thresholds, definitions
Chrome DevTools docs	`https://developer.chrome.com/docs/devtools/performance`	Tooling APIs, trace analysis
Lighthouse scoring	`https://developer.chrome.com/docs/lighthouse/performance/performance-scoring`	Score weights, metric thresholds

FIRST: Verify MCP Tools Available

Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured.

Ask the user to add this to their MCP config:

"chrome-devtools": {
  "type": "local",
  "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}

Key Guidelines

Be assertive: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.
Verify before recommending: Confirm something is unused before suggesting removal.
Quantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
Skip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
Be specific: Say "compress hero.png (450KB) to WebP" not "optimize images".
Prioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent—say so.

Quick Reference

Task	Tool Call
Load page	`navigate_page(url: "...")`
Start trace	`performance_start_trace(autoStop: true, reload: true)`
Analyze insight	`performance_analyze_insight(insightSetId: "...", insightName: "...")`
List requests	`list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])`
Request details	`get_network_request(reqid: <id>)`
A11y snapshot	`take_snapshot(verbose: true)`

Workflow

Copy this checklist to track progress:

Audit Progress:
- [ ] Phase 1: Performance trace (navigate + record)
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
- [ ] Phase 3: Network analysis
- [ ] Phase 4: Accessibility snapshot
- [ ] Phase 5: Codebase analysis (skip if third-party site)

Phase 1: Performance Trace

Navigate to the target URL:
```
navigate_page(url: "<target-url>")
```
Start a performance trace with reload to capture cold-load metrics:
```
performance_start_trace(autoStop: true, reload: true)
```
Wait for trace completion, then retrieve results.

Troubleshooting:

If trace returns empty or fails, verify the page loaded correctly with navigate_page first
If insight names don't match, inspect the trace response to list available insights

Phase 2: Core Web Vitals Analysis

Use performance_analyze_insight to extract key metrics.

Note: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the insightSetId from the trace response to discover available insights.

Common insight names:

Metric	Insight Name	What to Look For
LCP	`LCPBreakdown`	Time to largest contentful paint; breakdown of TTFB, resource load, render delay
CLS	`CLSCulprits`	Elements causing layout shifts (images without dimensions, injected content, font swaps)
Render Blocking	`RenderBlocking`	CSS/JS blocking first paint
Document Latency	`DocumentLatency`	Server response time issues
Network Dependencies	`NetworkRequestsDepGraph`	Request chains delaying critical resources

Example:

performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")

Key thresholds (good/needs-improvement/poor):

TTFB: < 800ms / < 1.8s / > 1.8s
FCP: < 1.8s / < 3s / > 3s
LCP: < 2.5s / < 4s / > 4s
INP: < 200ms / < 500ms / > 500ms
TBT: < 200ms / < 600ms / > 600ms
CLS: < 0.1 / < 0.25 / > 0.25
Speed Index: < 3.4s / < 5.8s / > 5.8s

Phase 3: Network Analysis

List all network requests to identify optimization opportunities:

list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])

Look for:

Render-blocking resources: JS/CSS in <head> without async/defer/media attributes
Network chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
Missing preloads: Critical resources (fonts, hero images, key scripts) not preloaded
Caching issues: Missing or weak Cache-Control, ETag, or Last-Modified headers
Large payloads: Uncompressed or oversized JS/CSS bundles
Unused preconnects: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.

For detailed request info:

get_network_request(reqid: <id>)

Phase 4: Accessibility Snapshot

Take an accessibility tree snapshot:

take_snapshot(verbose: true)

Flag high-level gaps:

Missing or duplicate ARIA IDs
Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)
Focus traps or missing focus indicators
Interactive elements without accessible names

Phase 5: Codebase Analysis

Skip if auditing a third-party site without codebase access.

Analyze the codebase to understand where improvements can be made.

Detect Framework & Bundler

Search for configuration files to identify the stack:

Tool	Config Files
Webpack	`webpack.config.js`, `webpack.*.js`
Vite	`vite.config.js`, `vite.config.ts`
Rollup	`rollup.config.js`, `rollup.config.mjs`
esbuild	`esbuild.config.js`, build scripts with `esbuild`
Parcel	`.parcelrc`, `package.json` (parcel field)
Next.js	`next.config.js`, `next.config.mjs`
Nuxt	`nuxt.config.js`, `nuxt.config.ts`
SvelteKit	`svelte.config.js`
Astro	`astro.config.mjs`

Also check package.json for framework dependencies and build scripts.

Tree-Shaking & Dead Code

Webpack: Check for mode: 'production', sideEffects in package.json, usedExports optimization
Vite/Rollup: Tree-shaking enabled by default; check for treeshake options
Look for: Barrel files (index.js re-exports), large utility libraries imported wholesale (lodash, moment)

Unused JS/CSS

Check for CSS-in-JS vs. static CSS extraction
Look for PurgeCSS/UnCSS configuration (Tailwind's content config)
Identify dynamic imports vs. eager loading

Polyfills

Check for @babel/preset-env targets and useBuiltIns setting
Look for core-js imports (often oversized)
Check browserslist config for overly broad targeting

Compression & Minification

Check for terser, esbuild, or swc minification
Look for gzip/brotli compression in build output or server config
Check for source maps in production builds (should be external or disabled)

Output Format

Present findings as:

Core Web Vitals Summary - Table with metric, value, and rating (good/needs-improvement/poor)
Top Issues - Prioritized list of problems with estimated impact (high/medium/low)
Recommendations - Specific, actionable fixes with code snippets or config changes
Codebase Findings - Framework/bundler detected, optimization opportunities (omit if no codebase access)

Alternatives

Compare before choosing

Computed 976

mgiovani/cc-arsenal

team-review

Multi-agent review team: architecture, security, performance, testing, style, docs/UX, plus an adversary that cross-examines the other 6, for security-sensitive, architectural, or large PRs (15+ files) where a single-agent pass risks missing cross-cutting issues. Use for auth/payments/PII changes, schema/pattern changes, compliance sign-off, or when asked to 'get the review team on this' / 'multi-agent review' / 'thorough review before merge'. For a standard PR or a quick pre-merge check, use /r

Computed 9279,261

bytedance/deer-flow

code-documentation

Use this skill when the user requests to generate, create, or improve documentation for code, APIs, libraries, repositories, or software projects. Supports README generation, API reference documentation, inline code comments, architecture documentation, changelog generation, and developer guides. Trigger on requests like "document this code", "create a README", "generate API docs", "write developer guide", or when analyzing codebases for documentation purposes.

Computed 8823,781

alirezarezvani/claude-skills

research-ops-skills

Use when planning, funding, scoping, or synthesizing enterprise research across workstreams — clinical study design, R&D program finance, market sizing/surveys, or product/user research. Triggers on "design this clinical study", "what sample size", "R&D budget", "burn rate", "capitalize or expense", "TAM SAM SOM", "market sizing", "survey design", "segment the market", "plan user interviews", "usability test", "synthesize research insights". Forks context to route to one of four Research-Operati

Computed 8623,781

alirezarezvani/claude-skills

senior-backend

Designs and implements backend systems including REST APIs, microservices, database architectures, authentication flows, and security hardening. Use when the user asks to "design REST APIs", "optimize database queries", "implement authentication", "build microservices", "review backend code", "set up GraphQL", "handle database migrations", or "load test APIs". Covers Node.js/Express/Fastify development, PostgreSQL optimization, API security, and backend architecture patterns.