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

wallacedobbs428/performance-optimization

Name: performance-optimization
Author: wallacedobbs428

.claude/skills/performance-optimization/SKILL.md

npx skillsauth add wallacedobbs428/thecalltaker performance-optimization

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

Performance Optimization — Web Performance Playbook

Systematically improve web performance through measurement, optimization, and monitoring.

Performance Audit Checklist

Run this before ANY optimization work:

1. Measure First

# Lighthouse CLI audit
npx lighthouse https://yoursite.com --output=json --output-path=./audit.json

# Core Web Vitals
# LCP (Largest Contentful Paint) < 2.5s
# FID (First Input Delay) < 100ms
# CLS (Cumulative Layout Shift) < 0.1
# INP (Interaction to Next Paint) < 200ms

2. Identify Bottlenecks (Priority Order)

Server response time (TTFB > 600ms = problem)
Render-blocking resources (CSS/JS in <head>)
Image optimization (usually the biggest win)
JavaScript bundle size (> 200KB compressed = problem)
Font loading (FOUT/FOIT issues)
Third-party scripts (analytics, chat widgets, ads)

HTML Optimization

Critical Rendering Path

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

<!-- Inline critical CSS (above-the-fold styles) -->
<style>/* Critical CSS here — extract with Critical npm package */</style>

<!-- Defer non-critical CSS -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Defer JavaScript -->
<script defer src="/app.js"></script>

Resource Hints

<!-- DNS prefetch for third-party domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">

<!-- Preconnect for critical third-party origins -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Prefetch next-page resources -->
<link rel="prefetch" href="/pricing.html">

Image Optimization

Format Selection

| Format | Use Case | Savings vs PNG | |--------|----------|---------------| | WebP | Photos, general images | 25-35% smaller | | AVIF | Photos (modern browsers) | 50% smaller | | SVG | Icons, logos, illustrations | Resolution independent | | PNG | Screenshots with text | Baseline |

Responsive Images

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero"
       width="1200" height="600"
       loading="lazy"
       decoding="async">
</picture>

<!-- Responsive srcset -->
<img srcset="/hero-400.webp 400w,
             /hero-800.webp 800w,
             /hero-1200.webp 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     src="/hero-800.webp"
     alt="Hero image"
     loading="lazy">

Lazy Loading

Add loading="lazy" to all images below the fold
NEVER lazy-load the LCP image (hero image)
Use decoding="async" for non-critical images
Set explicit width and height to prevent CLS

CSS Optimization

Critical CSS Extraction

# Extract critical CSS automatically
npx critical index.html --base ./ --inline --minify > index-optimized.html

Reduce CSS Size

Remove unused CSS: npx purgecss --css styles.css --content index.html
Minify: npx csso styles.css --output styles.min.css
Use CSS containment: contain: layout style paint
Prefer transform and opacity for animations (GPU-accelerated)
Avoid @import in CSS (blocks parallel download)

Font Optimization

/* Use font-display: swap to prevent FOIT */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF; /* Latin subset only */
}

JavaScript Optimization

Bundle Analysis

# Analyze bundle size
npx source-map-explorer bundle.js
# or
npx webpack-bundle-analyzer stats.json

Code Splitting

Split by route (each page loads only its JS)
Lazy-load below-fold components
Use dynamic import() for non-critical features

Defer Third-Party Scripts

<!-- Load analytics after page is interactive -->
<script>
  window.addEventListener('load', function() {
    setTimeout(function() {
      var s = document.createElement('script');
      s.src = 'https://analytics.example.com/script.js';
      document.body.appendChild(s);
    }, 3000);
  });
</script>

Caching Strategy

Cache-Control Headers

# Static assets (CSS, JS, images) — cache for 1 year
Cache-Control: public, max-age=31536000, immutable

# HTML pages — revalidate every time
Cache-Control: no-cache

# API responses — short cache
Cache-Control: public, max-age=300, stale-while-revalidate=600

Service Worker (Offline + Cache)

// Cache static assets on install
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/styles.css', '/app.js', '/offline.html'])
    )
  );
});

// Serve from cache, fallback to network
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(r => r || fetch(e.request))
  );
});

Performance Budget

Set these limits and enforce in CI:

| Metric | Budget | Tool | |--------|--------|------| | Total page weight | < 500KB | Lighthouse | | JavaScript | < 200KB (compressed) | bundlesize | | CSS | < 50KB (compressed) | bundlesize | | LCP | < 2.5s | Web Vitals | | CLS | < 0.1 | Web Vitals | | INP | < 200ms | Web Vitals | | TTFB | < 600ms | Web Vitals | | Lighthouse Performance | > 90 | Lighthouse CI |

Quick Wins (Do These First)

Compress images to WebP (biggest impact for least effort)
Add loading="lazy" to below-fold images
Defer non-critical JS with defer attribute
Enable gzip/brotli compression on server
Set proper Cache-Control headers
Preload LCP image and critical fonts
Remove unused CSS/JS
Add explicit dimensions to images (prevents CLS)

wallacedobbs428/performance-optimization

.claude/skills/performance-optimization/SKILL.md

Optimize web application performance. Use when improving page load times, Core Web Vitals, Lighthouse scores, bundle sizes, rendering performance, or server response times. Covers HTML/CSS/JS optimization, image optimization, caching strategies, CDN configuration, lazy loading, and performance monitoring.

development

Updated Apr 17, 2026

$ install --global

skillsauth

npx skillsauth add wallacedobbs428/thecalltaker performance-optimization

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: Apr 17, 2026, 5:13 AM29.7s1 file scanned

SKILL.md

name:: performance-optimization
description:: Optimize web application performance. Use when improving page load times, Core Web Vitals, Lighthouse scores, bundle sizes, rendering performance, or server response times. Covers HTML/CSS/JS optimization, image optimization, caching strategies, CDN configuration, lazy loading, and performance monitoring.
category:: performance

Performance Optimization — Web Performance Playbook

Systematically improve web performance through measurement, optimization, and monitoring.

Performance Audit Checklist

Run this before ANY optimization work:

1. Measure First

# Lighthouse CLI audit
npx lighthouse https://yoursite.com --output=json --output-path=./audit.json

# Core Web Vitals
# LCP (Largest Contentful Paint) < 2.5s
# FID (First Input Delay) < 100ms
# CLS (Cumulative Layout Shift) < 0.1
# INP (Interaction to Next Paint) < 200ms

2. Identify Bottlenecks (Priority Order)

Server response time (TTFB > 600ms = problem)
Render-blocking resources (CSS/JS in <head>)
Image optimization (usually the biggest win)
JavaScript bundle size (> 200KB compressed = problem)
Font loading (FOUT/FOIT issues)
Third-party scripts (analytics, chat widgets, ads)

HTML Optimization

Critical Rendering Path

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

<!-- Inline critical CSS (above-the-fold styles) -->
<style>/* Critical CSS here — extract with Critical npm package */</style>

<!-- Defer non-critical CSS -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Defer JavaScript -->
<script defer src="/app.js"></script>

Resource Hints

<!-- DNS prefetch for third-party domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">

<!-- Preconnect for critical third-party origins -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Prefetch next-page resources -->
<link rel="prefetch" href="/pricing.html">

Image Optimization

Format Selection

Responsive Images

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero"
       width="1200" height="600"
       loading="lazy"
       decoding="async">
</picture>

<!-- Responsive srcset -->
<img srcset="/hero-400.webp 400w,
             /hero-800.webp 800w,
             /hero-1200.webp 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     src="/hero-800.webp"
     alt="Hero image"
     loading="lazy">

Lazy Loading

Add loading="lazy" to all images below the fold
NEVER lazy-load the LCP image (hero image)
Use decoding="async" for non-critical images
Set explicit width and height to prevent CLS

CSS Optimization

Critical CSS Extraction

# Extract critical CSS automatically
npx critical index.html --base ./ --inline --minify > index-optimized.html

Reduce CSS Size

Remove unused CSS: npx purgecss --css styles.css --content index.html
Minify: npx csso styles.css --output styles.min.css
Use CSS containment: contain: layout style paint
Prefer transform and opacity for animations (GPU-accelerated)
Avoid @import in CSS (blocks parallel download)

Font Optimization

/* Use font-display: swap to prevent FOIT */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF; /* Latin subset only */
}

JavaScript Optimization

Bundle Analysis

# Analyze bundle size
npx source-map-explorer bundle.js
# or
npx webpack-bundle-analyzer stats.json

Code Splitting

Split by route (each page loads only its JS)
Lazy-load below-fold components
Use dynamic import() for non-critical features

Defer Third-Party Scripts

<!-- Load analytics after page is interactive -->
<script>
  window.addEventListener('load', function() {
    setTimeout(function() {
      var s = document.createElement('script');
      s.src = 'https://analytics.example.com/script.js';
      document.body.appendChild(s);
    }, 3000);
  });
</script>

Caching Strategy

Cache-Control Headers

# Static assets (CSS, JS, images) — cache for 1 year
Cache-Control: public, max-age=31536000, immutable

# HTML pages — revalidate every time
Cache-Control: no-cache

# API responses — short cache
Cache-Control: public, max-age=300, stale-while-revalidate=600

Service Worker (Offline + Cache)

// Cache static assets on install
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/styles.css', '/app.js', '/offline.html'])
    )
  );
});

// Serve from cache, fallback to network
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(r => r || fetch(e.request))
  );
});

Performance Budget

Set these limits and enforce in CI:

Quick Wins (Do These First)

Compress images to WebP (biggest impact for least effort)
Add loading="lazy" to below-fold images
Defer non-critical JS with defer attribute
Enable gzip/brotli compression on server
Set proper Cache-Control headers
Preload LCP image and critical fonts
Remove unused CSS/JS
Add explicit dimensions to images (prevents CLS)

Related Skills

wallacedobbs428/writer-memory

documentation

VerifiedTrustedCommunity

Agentic memory system for writers - track characters, relationships, scenes, and themes

SKILL.mdUpdated Apr 17, 2026

wallacedobbs428/writer-memory

wallacedobbs428/workflow-automation

tools

VerifiedTrustedCommunity

Automate repetitive development tasks and workflows. Use when creating build scripts, automating deployments, or setting up development workflows. Handles npm scripts, Makefile, GitHub Actions workflows, and task automation.

SKILL.mdUpdated Apr 17, 2026

wallacedobbs428/workflow-automation

wallacedobbs428/web-design-guidelines

development

VerifiedTrustedCommunity

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Fetches latest Vercel guidelines and checks files against all rules.

SKILL.mdUpdated Apr 17, 2026

wallacedobbs428/web-design-guidelines

wallacedobbs428/web-accessibility

development

VerifiedTrustedCommunity

Implement web accessibility (a11y) standards following WCAG 2.1 guidelines. Use when building accessible UIs, fixing accessibility issues, or ensuring compliance with disability standards. Handles ARIA attributes, keyboard navigation, screen readers, semantic HTML, and accessibility testing.

SKILL.mdUpdated Apr 17, 2026

wallacedobbs428/web-accessibility

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/wallacedobbs428/thecalltaker.git

# Copy into Claude Code skills folder (global)
cp -r thecalltaker/.claude/skills/performance-optimization ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

wallacedobbs428/thecalltaker

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT