Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

lidge-jun/web-perf

Name: web-perf
Author: lidge-jun

web-perf/SKILL.md

npx skillsauth add lidge-jun/cli-jaw-skills web-perf

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Web Performance Audit

Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.

Prerequisites

Verify the chrome-devtools MCP server is configured. Test by calling navigate_page or performance_start_trace. If unavailable, add to 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. Skip changes with 0ms impact.
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.
AI Assistance panel (Chrome 130+): DevTools includes an AI Assistance panel that can explain console errors, performance insights, and network issues. Use it as a complement to manual analysis, not a replacement.

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.0s / < 4s / > 4s (updated March 2026 — previously 2.5s)
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)

Soft Navigations API (SPA Measurement)

For single-page applications, Chrome supports the Soft Navigations API to measure Core Web Vitals across client-side navigations:

Enable via PerformanceObserver with { type: 'soft-navigation', buffered: true }
CrUX reports soft navigation CWV separately from full page loads
Use the web-vitals library (v4+) with reportSoftNavs: true for automatic collection
Soft navigations are detected when a user interaction triggers a URL change and DOM modification

This is critical for SPAs where most user experience happens after the initial load.

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)

lidge-jun/web-perf

web-perf/SKILL.md

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, 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.

4 stars

tools

Updated Jun 9, 2026

$ install --global

skillsauth

npx skillsauth add lidge-jun/cli-jaw-skills web-perf

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Jun 9, 2026, 8:01 AM135.2s1 file scanned

SKILL.md

name:: web-perf
description:: Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, 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.

Web Performance Audit

Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.

Prerequisites

Verify the chrome-devtools MCP server is configured. Test by calling navigate_page or performance_start_trace. If unavailable, add to 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. Skip changes with 0ms impact.
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.
AI Assistance panel (Chrome 130+): DevTools includes an AI Assistance panel that can explain console errors, performance insights, and network issues. Use it as a complement to manual analysis, not a replacement.

Quick Reference

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:

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.0s / < 4s / > 4s (updated March 2026 — previously 2.5s)
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:

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)

Soft Navigations API (SPA Measurement)

For single-page applications, Chrome supports the Soft Navigations API to measure Core Web Vitals across client-side navigations:

Enable via PerformanceObserver with { type: 'soft-navigation', buffered: true }
CrUX reports soft navigation CWV separately from full page loads
Use the web-vitals library (v4+) with reportSoftNavs: true for automatic collection
Soft navigations are detected when a user interaction triggers a URL change and DOM modification

This is critical for SPAs where most user experience happens after the initial load.

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)

Related Skills

lidge-jun/codex-imagegen

tools

VerifiedTrustedCommunity

Use only on the Codex CLI for native image generation or image editing without an API key. Save final PNG files under ~/.cli-jaw/uploads, report web-ready absolute-path markdown, and send to Telegram or Discord only when explicitly requested.

5SKILL.mdUpdated Jul 10, 2026

lidge-jun/codex-imagegen

lidge-jun/repo-map

tools

VerifiedTrustedCommunity

Ranked repository structure map via `cli-jaw map`. Use for codebase overview, structure map, symbol overview, unfamiliar codebase exploration, architecture orientation. Triggers: repo map, structure map, codebase overview, 와꾸, project structure, unfamiliar code.

5SKILL.mdUpdated Jul 7, 2026

lidge-jun/design

tools

VerifiedTrustedCommunity

cli-jaw Design workspace: create, preview, run, and export design pages from the right sidebar. Covers panel UX, direct-write workflow, artifact lifecycle, wireframe generation, design system, and Open Design adapter.

5SKILL.mdUpdated Jul 5, 2026

lidge-jun/dev-devops

development

VerifiedTrustedCommunity

MUST USE for infrastructure and delivery work — container builds, deploy pipelines, Kubernetes, Infrastructure as Code, SRE foundations, edge/serverless, ML infrastructure. Triggers: Dockerfile, K8s manifests, CI/CD pipeline, Terraform/IaC, release/deploy, devops/infra/deploy or release_cd task_tags.

5SKILL.mdUpdated Jun 19, 2026

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/lidge-jun/cli-jaw-skills.git

# Copy into Claude Code skills folder (global)
cp -r cli-jaw-skills/web-perf ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

lidge-jun/cli-jaw-skills

4 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT