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

nicholasgriffintn/web-perf

Name: web-perf
Author: nicholasgriffintn

ai-tooling/skills/web-perf/SKILL.md

npx skillsauth add nicholasgriffintn/machine-setup 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 Skill

Tooling Notes

This skill relies on Chrome DevTools MCP. If the MCP server is missing, stop and ask the user to configure it.

First: Verify MCP Tools Available

Run a quick check before starting. If navigate_page or performance_start_trace is unavailable, stop and ask the user to add the MCP config.

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

Key Guidelines

Be assertive and verify claims with network, DOM, or codebase evidence.
Verify before recommending any removals or refactors.
Quantify impact using estimated savings; skip 0ms impact changes.
Skip non-issues: document low impact without recommending changes.
Be specific: name exact assets and sizes when suggesting optimisation.
Prioritise ruthlessly: excellent metrics should be called out as such.

Workflow

Copy this checklist and use it to track progress through the audit:

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

The problem is unknown page performance; capture a cold-load trace so you can diagnose it.

Navigate to the target URL:
```
navigate_page(url: "<target-url>")
```

Start a performance trace with reload:

performance_start_trace(autoStop: true, reload: true)

Wait for trace completion and capture the results.

Troubleshooting:

If the trace is empty, confirm the page loaded via navigate_page.
If insight names do not match, inspect the trace response to list available insights.

Phase 2: Core Web Vitals Analysis

Use performance_analyze_insight to extract key metrics. If an insight name fails, use the insightSetId from the trace response to discover available insights.

Common insight names:

| Metric | Insight Name | What to Look For | | -------------------- | ------------------------- | ------------------------------------------------------- | | LCP | LCPBreakdown | TTFB, resource load, render delay | | CLS | CLSCulprits | 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 | 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 requests to identify optimisation opportunities:

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

Look for:

Render-blocking resources: JS/CSS in <head> without async/defer/media.
Network chains: late-discovered resources that delay critical assets.
Missing preloads: fonts, hero images, key scripts without preload.
Caching issues: weak Cache-Control, missing ETag/Last-Modified.
Large payloads: oversized or uncompressed JS/CSS.
Unused preconnects: confirm zero requests to the origin before removal.

For details:

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.
Poor contrast ratios (WCAG AA: 4.5:1 normal text, 3:1 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.

Detect the stack by searching for config files:

| 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 and dead code:

Webpack: confirm mode: "production", sideEffects, and usedExports.
Vite/Rollup: tree-shaking is default; check treeshake options.
Watch for barrel files and large libraries imported wholesale.

Unused JS/CSS:

Check for CSS-in-JS versus static extraction.
Look for PurgeCSS/UnCSS, or Tailwind content config.
Identify dynamic imports versus eager loading.

Polyfills:

Check @babel/preset-env targets and useBuiltIns.
Look for oversized core-js imports.
Verify browserslist is not overly broad.

Compression and minification:

Check for terser, esbuild, or swc minification.
Verify gzip/brotli compression in server config.
Confirm source maps are external or disabled in production.

Output Format

Present findings in this order:

Core Web Vitals Summary: table with metric, value, rating.
Top Issues: prioritised list with estimated impact (high/medium/low).
Recommendations: specific, actionable fixes with snippets.
Codebase Findings: framework/bundler and optimisation notes (omit if no codebase access).

nicholasgriffintn/web-perf

ai-tooling/skills/web-perf/SKILL.md

Audits web performance using Chrome DevTools MCP. Measures Core Web Vitals, finds render-blocking resources, dependency chains, layout shifts, caching issues, and accessibility gaps. Use for audits, profiling, debugging, or optimising page load performance and Lighthouse scores.

2 stars

tools

Updated May 6, 2026

$ install --global

skillsauth

npx skillsauth add nicholasgriffintn/machine-setup 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: May 6, 2026, 7:16 AM169.0s1 file scanned

SKILL.md

name:: web-perf
description:: Audits web performance using Chrome DevTools MCP. Measures Core Web Vitals, finds render-blocking resources, dependency chains, layout shifts, caching issues, and accessibility gaps. Use for audits, profiling, debugging, or optimising page load performance and Lighthouse scores.

Web Performance Skill

Tooling Notes

This skill relies on Chrome DevTools MCP. If the MCP server is missing, stop and ask the user to configure it.

First: Verify MCP Tools Available

Run a quick check before starting. If navigate_page or performance_start_trace is unavailable, stop and ask the user to add the MCP config.

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

Key Guidelines

Be assertive and verify claims with network, DOM, or codebase evidence.
Verify before recommending any removals or refactors.
Quantify impact using estimated savings; skip 0ms impact changes.
Skip non-issues: document low impact without recommending changes.
Be specific: name exact assets and sizes when suggesting optimisation.
Prioritise ruthlessly: excellent metrics should be called out as such.

Workflow

Copy this checklist and use it to track progress through the audit:

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

The problem is unknown page performance; capture a cold-load trace so you can diagnose it.

Navigate to the target URL:
```
navigate_page(url: "<target-url>")
```

Start a performance trace with reload:

performance_start_trace(autoStop: true, reload: true)

Wait for trace completion and capture the results.

Troubleshooting:

If the trace is empty, confirm the page loaded via navigate_page.
If insight names do not match, inspect the trace response to list available insights.

Phase 2: Core Web Vitals Analysis

Use performance_analyze_insight to extract key metrics. If an insight name fails, use 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.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 requests to identify optimisation opportunities:

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

Look for:

Render-blocking resources: JS/CSS in <head> without async/defer/media.
Network chains: late-discovered resources that delay critical assets.
Missing preloads: fonts, hero images, key scripts without preload.
Caching issues: weak Cache-Control, missing ETag/Last-Modified.
Large payloads: oversized or uncompressed JS/CSS.
Unused preconnects: confirm zero requests to the origin before removal.

For details:

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.
Poor contrast ratios (WCAG AA: 4.5:1 normal text, 3:1 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.

Detect the stack by searching for config files:

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

Tree-shaking and dead code:

Webpack: confirm mode: "production", sideEffects, and usedExports.
Vite/Rollup: tree-shaking is default; check treeshake options.
Watch for barrel files and large libraries imported wholesale.

Unused JS/CSS:

Check for CSS-in-JS versus static extraction.
Look for PurgeCSS/UnCSS, or Tailwind content config.
Identify dynamic imports versus eager loading.

Polyfills:

Check @babel/preset-env targets and useBuiltIns.
Look for oversized core-js imports.
Verify browserslist is not overly broad.

Compression and minification:

Check for terser, esbuild, or swc minification.
Verify gzip/brotli compression in server config.
Confirm source maps are external or disabled in production.

Output Format

Present findings in this order:

Core Web Vitals Summary: table with metric, value, rating.
Top Issues: prioritised list with estimated impact (high/medium/low).
Recommendations: specific, actionable fixes with snippets.
Codebase Findings: framework/bundler and optimisation notes (omit if no codebase access).

Related Skills

nicholasgriffintn/wrangler

tools

VerifiedTrustedCommunity

Cloudflare Workers CLI for deploying, developing, and managing Workers, KV, R2, D1, Vectorize, Hyperdrive, Workers AI, Containers, Queues, Workflows, Pipelines, and Secrets Store. Load before running wrangler commands to ensure correct syntax and best practices.

2SKILL.mdUpdated May 6, 2026

nicholasgriffintn/wrangler

nicholasgriffintn/tdd

development

VerifiedTrustedCommunity

Drives changes through a strict red-green-refactor loop using behaviour tests at the public interface. Use when the user asks for TDD, test-first development, integration tests, regression coverage, or a feature built one vertical slice at a time.

2SKILL.mdUpdated May 6, 2026

nicholasgriffintn/tdd

nicholasgriffintn/security-review

testing

VerifiedTrustedCommunity

A specialist skill for security reviews, threat modeling, and remediation guidance. Use for auth/permissions changes, secrets or PII handling, public endpoints, or dependency upgrades.

2SKILL.mdUpdated May 6, 2026

nicholasgriffintn/security-review

nicholasgriffintn/react-best-practices

development

VerifiedTrustedCommunity

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

2SKILL.mdUpdated May 6, 2026

nicholasgriffintn/react-best-practices

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/nicholasgriffintn/machine-setup.git

# Copy into Claude Code skills folder (global)
cp -r machine-setup/ai-tooling/skills/web-perf ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

nicholasgriffintn/machine-setup

2 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT