@nockdev/awf 6.2.0

package/.agent/skills/cross-cutting/web-perf/data/inp_optimization.yaml

@@ -0,0 +1,240 @@
+# =============================================================================
+# INP Optimization Patterns (Feb 2026)
+# =============================================================================
+# Interaction to Next Paint optimization techniques
+
+metadata:
+  skill: web-perf
+  domain: inp-optimization
+  version: "2025.1"
+  updated: "2026-02-05"
+  patterns_count: 8
+
+patterns:
+  - id: inp001
+    name: Break Up Long Tasks
+    category: INP
+    impact: CRITICAL
+    description: Split JavaScript tasks > 50ms into smaller chunks
+    text: long task yield main thread chunk scheduler inp responsiveness
+    example: |
+      // Before: Long blocking task
+      function processAll(items) {
+        items.forEach(item => heavyProcess(item));
+      }
+
+      // After: Chunked with yielding
+      async function processAll(items) {
+        for (const item of items) {
+          heavyProcess(item);
+          
+          // Yield to main thread every 50ms
+          if (performance.now() - lastYield > 50) {
+            await scheduler.yield();
+            lastYield = performance.now();
+          }
+        }
+      }
+
+      // Alternative: requestIdleCallback
+      function processInIdle(items, index = 0) {
+        requestIdleCallback((deadline) => {
+          while (index < items.length && deadline.timeRemaining() > 0) {
+            heavyProcess(items[index++]);
+          }
+          if (index < items.length) {
+            processInIdle(items, index);
+          }
+        });
+      }
+    severity: CRITICAL
+    docs_url: https://web.dev/optimize-long-tasks/
+
+  - id: inp002
+    name: Use Web Workers
+    category: INP
+    impact: HIGH
+    description: Offload heavy computation from main thread
+    text: web worker thread offload main computation background
+    example: |
+      // worker.js
+      self.onmessage = (e) => {
+        const result = heavyComputation(e.data);
+        self.postMessage(result);
+      };
+
+      // main.js
+      const worker = new Worker('worker.js');
+
+      worker.onmessage = (e) => {
+        updateUI(e.result);
+      };
+
+      // Offload heavy work
+      worker.postMessage(largeDataset);
+    severity: HIGH
+    docs_url: https://web.dev/off-main-thread/
+
+  - id: inp003
+    name: Defer Non-Critical JavaScript
+    category: INP
+    impact: HIGH
+    description: Load analytics, widgets after initial interaction
+    text: defer async script third party analytics non critical load
+    example: |
+      <!-- Defer non-critical scripts -->
+      <script defer src="/analytics.js"></script>
+
+      <!-- Load after interaction -->
+      <script>
+        let interacted = false;
+        document.addEventListener('click', () => {
+          if (!interacted) {
+            interacted = true;
+            // Load analytics after first interaction
+            const script = document.createElement('script');
+            script.src = '/analytics.js';
+            document.body.appendChild(script);
+          }
+        }, { once: true });
+      </script>
+    severity: HIGH
+    docs_url: https://web.dev/defer-non-critical-css/
+
+  - id: inp004
+    name: Optimize Event Handlers
+    category: INP
+    impact: HIGH
+    description: Use passive listeners and debounce expensive operations
+    text: event handler passive listener debounce throttle scroll input
+    example: |
+      // Passive event listeners (can't call preventDefault)
+      window.addEventListener('scroll', onScroll, { passive: true });
+      window.addEventListener('touchstart', onTouch, { passive: true });
+
+      // Debounce expensive handlers
+      const debouncedSearch = debounce((query) => {
+        search(query);
+      }, 300);
+
+      input.addEventListener('input', (e) => {
+        debouncedSearch(e.target.value);
+      });
+
+      // Throttle scroll updates
+      const throttledScroll = throttle(() => {
+        updateProgress();
+      }, 16); // 60fps
+    severity: HIGH
+    docs_url: https://web.dev/optimize-inp/
+
+  - id: inp005
+    name: Minimize DOM Size
+    category: INP
+    impact: MEDIUM
+    description: Reduce DOM nodes for faster style calculations and layouts
+    text: dom size nodes tree depth virtual scroll lazy render
+    example: |
+      <!-- Avoid deeply nested DOM -->
+      <!-- BAD: 15 levels of nesting -->
+      <div><div><div>...<span>Text</span>...</div></div></div>
+
+      <!-- Use virtual scrolling for long lists -->
+      import { FixedSizeList } from 'react-window';
+
+      <FixedSizeList
+        height={400}
+        itemCount={10000}
+        itemSize={50}
+      >
+        {Row}
+      </FixedSizeList>
+
+      <!-- Target: < 1500 DOM nodes, < 32 depth -->
+    severity: MEDIUM
+    docs_url: https://web.dev/dom-size/
+
+  - id: inp006
+    name: Code Splitting
+    category: INP
+    impact: HIGH
+    description: Load only needed JavaScript for the current route/feature
+    text: code splitting lazy load dynamic import bundle chunk route
+    example: |
+      // React lazy loading
+      const HeavyComponent = React.lazy(() => 
+        import('./HeavyComponent')
+      );
+
+      // Route-based splitting (Next.js)
+      import dynamic from 'next/dynamic';
+      const Chart = dynamic(() => import('./Chart'), {
+        loading: () => <Skeleton />,
+        ssr: false,
+      });
+
+      // Vite/Rollup manual chunks
+      build: {
+        rollupOptions: {
+          output: {
+            manualChunks: {
+              vendor: ['react', 'react-dom'],
+              charts: ['chart.js', 'd3'],
+            },
+          },
+        },
+      }
+    severity: HIGH
+    docs_url: https://web.dev/reduce-javascript-payloads-with-code-splitting/
+
+  - id: inp007
+    name: Use CSS Containment
+    category: INP
+    impact: MEDIUM
+    description: Limit style/layout recalculation scope with CSS containment
+    text: css containment contain layout paint style scope isolation
+    example: |
+      /* Contain layout recalculations */
+      .card {
+        contain: layout style paint;
+      }
+
+      /* Content-visibility for off-screen content */
+      .section {
+        content-visibility: auto;
+        contain-intrinsic-size: 500px;
+      }
+
+      /* Benefits:
+         - Faster layout calculations
+         - Skips off-screen rendering
+         - Improves scroll performance
+      */
+    severity: MEDIUM
+    docs_url: https://web.dev/content-visibility/
+
+  - id: inp008
+    name: Avoid Layout Thrashing
+    category: INP
+    impact: HIGH
+    description: Batch reads and writes to avoid forced synchronous layouts
+    text: layout thrashing forced reflow read write batch performance
+    example: |
+      // BAD: Forces layout between reads/writes
+      elements.forEach(el => {
+        const height = el.offsetHeight; // Read
+        el.style.height = height + 10 + 'px'; // Write - triggers layout!
+      });
+
+      // GOOD: Batch reads, then batch writes
+      const heights = elements.map(el => el.offsetHeight); // All reads
+      elements.forEach((el, i) => {
+        el.style.height = heights[i] + 10 + 'px'; // All writes
+      });
+
+      // BEST: Use requestAnimationFrame
+      requestAnimationFrame(() => {
+        // Write operations
+      });
+    severity: HIGH
+    docs_url: https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/

package/.agent/skills/cross-cutting/web-perf/data/lcp_optimization.yaml

@@ -0,0 +1,202 @@
+# =============================================================================
+# LCP Optimization Patterns (Feb 2026)
+# =============================================================================
+# Largest Contentful Paint optimization techniques
+
+metadata:
+  skill: web-perf
+  domain: lcp-optimization
+  version: "2025.1"
+  updated: "2026-02-05"
+  patterns_count: 8
+
+patterns:
+  - id: lcp001
+    name: Preload LCP Image
+    category: LCP
+    impact: HIGH
+    description: Preload the hero/main image with high priority
+    text: preload lcp image hero fetchpriority high load performance
+    example: |
+      <!-- Preload in <head> -->
+      <link 
+        rel="preload" 
+        href="/images/hero.webp" 
+        as="image"
+        fetchpriority="high"
+      >
+
+      <!-- In body -->
+      <img 
+        src="/images/hero.webp"
+        fetchpriority="high"
+        decoding="async"
+        width="1200"
+        height="600"
+        alt="Hero banner"
+      >
+    severity: HIGH
+    docs_url: https://web.dev/optimize-lcp/
+
+  - id: lcp002
+    name: Use Modern Image Formats
+    category: LCP
+    impact: HIGH
+    description: Use WebP/AVIF for smaller file sizes (30-50% vs JPEG)
+    text: webp avif image format modern compression optimization
+    example: |
+      <!-- Picture element with fallbacks -->
+      <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">
+      </picture>
+
+      /* Next.js config */
+      module.exports = {
+        images: {
+          formats: ['image/avif', 'image/webp'],
+        },
+      };
+    severity: HIGH
+    docs_url: https://web.dev/serve-images-webp/
+
+  - id: lcp003
+    name: Avoid Lazy Loading LCP
+    category: LCP
+    impact: CRITICAL
+    description: Never lazy-load the main content element
+    text: lazy load lcp defer avoid above fold hero main
+    example: |
+      <!-- WRONG: Lazy loading LCP element -->
+      <img loading="lazy" src="hero.webp" alt="Hero">
+
+      <!-- CORRECT: No lazy loading for LCP -->
+      <img 
+        src="hero.webp"
+        fetchpriority="high"
+        loading="eager"
+        alt="Hero"
+      >
+
+      <!-- Lazy load ONLY below-the-fold images -->
+      <img loading="lazy" src="gallery-1.webp" alt="Gallery 1">
+    severity: CRITICAL
+    docs_url: https://web.dev/lcp-lazy-loading/
+
+  - id: lcp004
+    name: Inline Critical CSS
+    category: LCP
+    impact: HIGH
+    description: Inline CSS needed for above-the-fold content
+    text: critical css inline render blocking above fold style
+    example: |
+      <head>
+        <!-- Critical CSS inlined -->
+        <style>
+          :root { --primary: #3b82f6; }
+          .hero { 
+            min-height: 100vh;
+            background: var(--primary);
+          }
+        </style>
+        
+        <!-- Non-critical CSS deferred -->
+        <link 
+          rel="preload" 
+          href="/styles.css" 
+          as="style" 
+          onload="this.rel='stylesheet'"
+        >
+      </head>
+    severity: HIGH
+    docs_url: https://web.dev/extract-critical-css/
+
+  - id: lcp005
+    name: Reduce Server Response Time
+    category: LCP
+    impact: HIGH
+    description: Optimize TTFB with CDN, caching, and server-side rendering
+    text: ttfb cdn cache ssr edge server response time
+    example: |
+      # CDN Configuration (Cloudflare)
+      Cache-Control: public, max-age=31536000, immutable
+
+      # Vercel/Next.js Edge Runtime
+      export const config = {
+        runtime: 'edge',
+      };
+
+      # Database optimization
+      - Add indexes for common queries
+      - Use connection pooling
+      - Enable query caching
+    severity: HIGH
+    docs_url: https://web.dev/optimize-ttfb/
+
+  - id: lcp006
+    name: Preconnect to Origins
+    category: LCP
+    impact: MEDIUM
+    description: Establish early connections to required third-party origins
+    text: preconnect dns prefetch third party origin resource hints
+    example: |
+      <head>
+        <!-- Preconnect to critical origins -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="preconnect" href="https://cdn.example.com">
+        
+        <!-- DNS prefetch for less critical -->
+        <link rel="dns-prefetch" href="https://analytics.example.com">
+      </head>
+    severity: MEDIUM
+    docs_url: https://web.dev/uses-rel-preconnect/
+
+  - id: lcp007
+    name: Shorten Request Chains
+    category: LCP
+    impact: HIGH
+    description: Reduce the critical request chain depth
+    text: request chain critical path waterfall network dependency
+    example: |
+      <!-- AVOID: Chained requests -->
+      HTML → CSS → Font → Background Image
+
+      <!-- BETTER: Parallel loading -->
+      <link rel="preload" href="font.woff2" as="font" crossorigin>
+      <link rel="preload" href="hero.webp" as="image">
+
+      /* CSS with inlined base64 small assets */
+      .icon { 
+        background: url('data:image/svg+xml,...');
+      }
+    severity: HIGH
+    docs_url: https://web.dev/critical-request-chains/
+
+  - id: lcp008
+    name: Optimize Web Fonts
+    category: LCP
+    impact: MEDIUM
+    description: Use font-display:swap and preload critical fonts
+    text: font display swap preload woff2 web font foit fout
+    example: |
+      <head>
+        <link 
+          rel="preload" 
+          href="/fonts/inter.woff2" 
+          as="font" 
+          type="font/woff2" 
+          crossorigin
+        >
+      </head>
+
+      <style>
+        @font-face {
+          font-family: 'Inter';
+          font-display: swap;
+          src: url('/fonts/inter.woff2') format('woff2');
+        }
+      </style>
+    severity: MEDIUM
+    docs_url: https://web.dev/optimize-webfont-loading/

package/.agent/skills/cross-cutting/web-perf/data/measurement.yaml

@@ -0,0 +1,170 @@
+# =============================================================================
+# Performance Audit & Measurement Tools (Feb 2026)
+# =============================================================================
+# Tools and measurement strategies
+
+metadata:
+  skill: web-perf
+  domain: measurement
+  version: "2025.1"
+  updated: "2026-02-05"
+  patterns_count: 6
+
+patterns:
+  - id: meas001
+    name: Real User Monitoring (RUM)
+    category: measurement
+    impact: CRITICAL
+    description: Measure actual user experience with web-vitals library
+    text: rum real user monitoring web vitals library field data
+    example: |
+      // Install: npm install web-vitals
+      import { onLCP, onINP, onCLS } from 'web-vitals';
+
+      function sendToAnalytics(metric) {
+        const body = JSON.stringify({
+          name: metric.name,
+          value: metric.value,
+          id: metric.id,
+          rating: metric.rating, // 'good', 'needs-improvement', 'poor'
+        });
+        
+        // Use sendBeacon for reliability
+        navigator.sendBeacon('/analytics', body);
+      }
+
+      onLCP(sendToAnalytics);
+      onINP(sendToAnalytics);
+      onCLS(sendToAnalytics);
+    severity: CRITICAL
+    docs_url: https://github.com/GoogleChrome/web-vitals
+
+  - id: meas002
+    name: Lighthouse
+    category: tool
+    impact: HIGH
+    description: Comprehensive performance audits with actionable recommendations
+    text: lighthouse audit score performance accessibility seo pwa
+    example: |
+      # CLI usage
+      npx lighthouse https://example.com \
+        --output html \
+        --output-path ./report.html
+
+      # CI integration (GitHub Actions)
+      - uses: treosh/lighthouse-ci-action@v10
+        with:
+          urls: |
+            https://example.com
+            https://example.com/page
+          budgetPath: ./budget.json
+
+      # budget.json
+      [{ 
+        "path": "/*",
+        "resourceSizes": [
+          { "resourceType": "script", "budget": 200 }
+        ]
+      }]
+    severity: HIGH
+    docs_url: https://developer.chrome.com/docs/lighthouse/
+
+  - id: meas003
+    name: PageSpeed Insights
+    category: tool
+    impact: HIGH
+    description: Combined lab + field data from Google's testing infrastructure
+    text: pagespeed insights google crux field data lab mobile desktop
+    example: |
+      # API usage
+      const API = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
+      const url = 'https://example.com';
+      const key = 'YOUR_API_KEY';
+
+      const response = await fetch(
+        `${API}?url=${url}&key=${key}&strategy=mobile`
+      );
+      const data = await response.json();
+
+      // Field data (CrUX)
+      console.log(data.loadingExperience.metrics);
+
+      // Lab data (Lighthouse)
+      console.log(data.lighthouseResult.audits);
+    severity: HIGH
+    docs_url: https://pagespeed.web.dev/
+
+  - id: meas004
+    name: Chrome DevTools Performance
+    category: tool
+    impact: HIGH
+    description: Analyze runtime performance and identify bottlenecks
+    text: devtools performance panel timeline flame chart profiler
+    example: |
+      # Performance Panel workflow:
+
+      1. Open DevTools (F12)
+      2. Performance tab → Record
+      3. Interact with page
+      4. Stop recording
+
+      # What to look for:
+      - Long Tasks (>50ms bars)
+      - Layout thrashing (purple bars)
+      - Scripting time vs Rendering
+      - Main thread blocking
+
+      # CPU throttling for testing:
+      - 4x slowdown (mid-range mobile)
+      - 6x slowdown (low-end mobile)
+    severity: HIGH
+    docs_url: https://developer.chrome.com/docs/devtools/performance/
+
+  - id: meas005
+    name: CrUX (Chrome UX Report)
+    category: tool
+    impact: MEDIUM
+    description: BigQuery dataset of real Chrome user experiences
+    text: crux chrome user experience report bigquery field data origin
+    example: |
+      -- BigQuery: Get CWV for a domain
+      SELECT
+        origin,
+        p75_lcp,
+        p75_inp,
+        p75_cls
+      FROM
+        `chrome-ux-report.materialized.metrics_summary`
+      WHERE
+        origin = 'https://example.com'
+        AND yyyymm = 202601
+
+      # Also available via API:
+      # https://developer.chrome.com/docs/crux/api/
+    severity: MEDIUM
+    docs_url: https://developer.chrome.com/docs/crux/
+
+  - id: meas006
+    name: Performance Budget
+    category: strategy
+    impact: HIGH
+    description: Set and enforce limits on page weight and load time
+    text: performance budget size time limit threshold regression
+    example: |
+      // lighthouserc.js
+      module.exports = {
+        ci: {
+          assert: {
+            assertions: {
+              'first-contentful-paint': ['warn', { maxNumericValue: 1800 }],
+              'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
+              'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
+              'total-byte-weight': ['warn', { maxNumericValue: 500000 }],
+            },
+          },
+        },
+      };
+
+      // CI fails if LCP > 2.5s or CLS > 0.1
+    severity: HIGH
+    docs_url: https://web.dev/performance-budgets-101/

package/.agent/skills/devops/_index.yaml

@@ -0,0 +1,9 @@
+# devops/_index.yaml — DevOps Skills Index
+category: devops
+description: "Infrastructure and deployment"
+count: 4
+skills:
+  - { id: docker, has_advanced: true }
+  - { id: kubernetes, has_advanced: true }
+  - { id: aws, has_advanced: true }
+  - { id: ci-cd, has_advanced: true }