From 108b13f346222fb8f0f13249a19ec19e827192f9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 26 Jul 2026 01:42:20 +0000 Subject: [PATCH] Sync generated provider output --- .agents/skills/impeccable/reference/audit.md | 3 ++- .agents/skills/impeccable/reference/harden.md | 2 +- .agents/skills/impeccable/reference/optimize.md | 8 ++++---- .agents/skills/impeccable/reference/overdrive.md | 2 +- .claude/skills/impeccable/reference/audit.md | 3 ++- .claude/skills/impeccable/reference/harden.md | 2 +- .claude/skills/impeccable/reference/optimize.md | 8 ++++---- .claude/skills/impeccable/reference/overdrive.md | 2 +- .cursor/skills/impeccable/reference/audit.md | 3 ++- .cursor/skills/impeccable/reference/harden.md | 2 +- .cursor/skills/impeccable/reference/optimize.md | 8 ++++---- .cursor/skills/impeccable/reference/overdrive.md | 2 +- .gemini/skills/impeccable/reference/audit.md | 3 ++- .gemini/skills/impeccable/reference/harden.md | 2 +- .gemini/skills/impeccable/reference/optimize.md | 8 ++++---- .gemini/skills/impeccable/reference/overdrive.md | 2 +- .github/skills/impeccable/reference/audit.md | 3 ++- .github/skills/impeccable/reference/harden.md | 2 +- .github/skills/impeccable/reference/optimize.md | 8 ++++---- .github/skills/impeccable/reference/overdrive.md | 2 +- .grok/skills/impeccable/reference/audit.md | 3 ++- .grok/skills/impeccable/reference/harden.md | 2 +- .grok/skills/impeccable/reference/optimize.md | 8 ++++---- .grok/skills/impeccable/reference/overdrive.md | 2 +- .kiro/skills/impeccable/reference/audit.md | 3 ++- .kiro/skills/impeccable/reference/harden.md | 2 +- .kiro/skills/impeccable/reference/optimize.md | 8 ++++---- .kiro/skills/impeccable/reference/overdrive.md | 2 +- .opencode/skills/impeccable/reference/audit.md | 3 ++- .opencode/skills/impeccable/reference/harden.md | 2 +- .opencode/skills/impeccable/reference/optimize.md | 8 ++++---- .opencode/skills/impeccable/reference/overdrive.md | 2 +- .pi/skills/impeccable/reference/audit.md | 3 ++- .pi/skills/impeccable/reference/harden.md | 2 +- .pi/skills/impeccable/reference/optimize.md | 8 ++++---- .pi/skills/impeccable/reference/overdrive.md | 2 +- .qoder/skills/impeccable/reference/audit.md | 3 ++- .qoder/skills/impeccable/reference/harden.md | 2 +- .qoder/skills/impeccable/reference/optimize.md | 8 ++++---- .qoder/skills/impeccable/reference/overdrive.md | 2 +- .rovodev/skills/impeccable/reference/audit.md | 3 ++- .rovodev/skills/impeccable/reference/harden.md | 2 +- .rovodev/skills/impeccable/reference/optimize.md | 8 ++++---- .rovodev/skills/impeccable/reference/overdrive.md | 2 +- .trae-cn/skills/impeccable/reference/audit.md | 3 ++- .trae-cn/skills/impeccable/reference/harden.md | 2 +- .trae-cn/skills/impeccable/reference/optimize.md | 8 ++++---- .trae-cn/skills/impeccable/reference/overdrive.md | 2 +- .trae/skills/impeccable/reference/audit.md | 3 ++- .trae/skills/impeccable/reference/harden.md | 2 +- .trae/skills/impeccable/reference/optimize.md | 8 ++++---- .trae/skills/impeccable/reference/overdrive.md | 2 +- .vibe/skills/impeccable/reference/audit.md | 3 ++- .vibe/skills/impeccable/reference/harden.md | 2 +- .vibe/skills/impeccable/reference/optimize.md | 8 ++++---- .vibe/skills/impeccable/reference/overdrive.md | 2 +- plugin/skills/impeccable/reference/audit.md | 3 ++- plugin/skills/impeccable/reference/harden.md | 2 +- plugin/skills/impeccable/reference/optimize.md | 8 ++++---- plugin/skills/impeccable/reference/overdrive.md | 2 +- 60 files changed, 120 insertions(+), 105 deletions(-) diff --git a/.agents/skills/impeccable/reference/audit.md b/.agents/skills/impeccable/reference/audit.md index d3483869e..b6a0bb358 100644 --- a/.agents/skills/impeccable/reference/audit.md +++ b/.agents/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.agents/skills/impeccable/reference/harden.md b/.agents/skills/impeccable/reference/harden.md index 57fd4c70e..0bbb16499 100644 --- a/.agents/skills/impeccable/reference/harden.md +++ b/.agents/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.agents/skills/impeccable/reference/optimize.md b/.agents/skills/impeccable/reference/optimize.md index d0abeea40..fc56c2237 100644 --- a/.agents/skills/impeccable/reference/optimize.md +++ b/.agents/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.agents/skills/impeccable/reference/overdrive.md b/.agents/skills/impeccable/reference/overdrive.md index b8b3f1be2..bbee3f48a 100644 --- a/.agents/skills/impeccable/reference/overdrive.md +++ b/.agents/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.claude/skills/impeccable/reference/audit.md b/.claude/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.claude/skills/impeccable/reference/audit.md +++ b/.claude/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.claude/skills/impeccable/reference/harden.md b/.claude/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.claude/skills/impeccable/reference/harden.md +++ b/.claude/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.claude/skills/impeccable/reference/optimize.md b/.claude/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.claude/skills/impeccable/reference/optimize.md +++ b/.claude/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.claude/skills/impeccable/reference/overdrive.md b/.claude/skills/impeccable/reference/overdrive.md index a7117c221..11efe7d27 100644 --- a/.claude/skills/impeccable/reference/overdrive.md +++ b/.claude/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.cursor/skills/impeccable/reference/audit.md b/.cursor/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.cursor/skills/impeccable/reference/audit.md +++ b/.cursor/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.cursor/skills/impeccable/reference/harden.md b/.cursor/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.cursor/skills/impeccable/reference/harden.md +++ b/.cursor/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.cursor/skills/impeccable/reference/optimize.md b/.cursor/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.cursor/skills/impeccable/reference/optimize.md +++ b/.cursor/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.cursor/skills/impeccable/reference/overdrive.md b/.cursor/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.cursor/skills/impeccable/reference/overdrive.md +++ b/.cursor/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.gemini/skills/impeccable/reference/audit.md b/.gemini/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.gemini/skills/impeccable/reference/audit.md +++ b/.gemini/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.gemini/skills/impeccable/reference/harden.md b/.gemini/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.gemini/skills/impeccable/reference/harden.md +++ b/.gemini/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.gemini/skills/impeccable/reference/optimize.md b/.gemini/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.gemini/skills/impeccable/reference/optimize.md +++ b/.gemini/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.gemini/skills/impeccable/reference/overdrive.md b/.gemini/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.gemini/skills/impeccable/reference/overdrive.md +++ b/.gemini/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.github/skills/impeccable/reference/audit.md b/.github/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.github/skills/impeccable/reference/audit.md +++ b/.github/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.github/skills/impeccable/reference/harden.md b/.github/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.github/skills/impeccable/reference/harden.md +++ b/.github/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.github/skills/impeccable/reference/optimize.md b/.github/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.github/skills/impeccable/reference/optimize.md +++ b/.github/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.github/skills/impeccable/reference/overdrive.md b/.github/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.github/skills/impeccable/reference/overdrive.md +++ b/.github/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.grok/skills/impeccable/reference/audit.md b/.grok/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.grok/skills/impeccable/reference/audit.md +++ b/.grok/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.grok/skills/impeccable/reference/harden.md b/.grok/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.grok/skills/impeccable/reference/harden.md +++ b/.grok/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.grok/skills/impeccable/reference/optimize.md b/.grok/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.grok/skills/impeccable/reference/optimize.md +++ b/.grok/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.grok/skills/impeccable/reference/overdrive.md b/.grok/skills/impeccable/reference/overdrive.md index a7117c221..11efe7d27 100644 --- a/.grok/skills/impeccable/reference/overdrive.md +++ b/.grok/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.kiro/skills/impeccable/reference/audit.md b/.kiro/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.kiro/skills/impeccable/reference/audit.md +++ b/.kiro/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.kiro/skills/impeccable/reference/harden.md b/.kiro/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.kiro/skills/impeccable/reference/harden.md +++ b/.kiro/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.kiro/skills/impeccable/reference/optimize.md b/.kiro/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.kiro/skills/impeccable/reference/optimize.md +++ b/.kiro/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.kiro/skills/impeccable/reference/overdrive.md b/.kiro/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.kiro/skills/impeccable/reference/overdrive.md +++ b/.kiro/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.opencode/skills/impeccable/reference/audit.md b/.opencode/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.opencode/skills/impeccable/reference/audit.md +++ b/.opencode/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.opencode/skills/impeccable/reference/harden.md b/.opencode/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.opencode/skills/impeccable/reference/harden.md +++ b/.opencode/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.opencode/skills/impeccable/reference/optimize.md b/.opencode/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.opencode/skills/impeccable/reference/optimize.md +++ b/.opencode/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.opencode/skills/impeccable/reference/overdrive.md b/.opencode/skills/impeccable/reference/overdrive.md index bc7b6d953..82ce611e1 100644 --- a/.opencode/skills/impeccable/reference/overdrive.md +++ b/.opencode/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.pi/skills/impeccable/reference/audit.md b/.pi/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.pi/skills/impeccable/reference/audit.md +++ b/.pi/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.pi/skills/impeccable/reference/harden.md b/.pi/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.pi/skills/impeccable/reference/harden.md +++ b/.pi/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.pi/skills/impeccable/reference/optimize.md b/.pi/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.pi/skills/impeccable/reference/optimize.md +++ b/.pi/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.pi/skills/impeccable/reference/overdrive.md b/.pi/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.pi/skills/impeccable/reference/overdrive.md +++ b/.pi/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.qoder/skills/impeccable/reference/audit.md b/.qoder/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.qoder/skills/impeccable/reference/audit.md +++ b/.qoder/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.qoder/skills/impeccable/reference/harden.md b/.qoder/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.qoder/skills/impeccable/reference/harden.md +++ b/.qoder/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.qoder/skills/impeccable/reference/optimize.md b/.qoder/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.qoder/skills/impeccable/reference/optimize.md +++ b/.qoder/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.qoder/skills/impeccable/reference/overdrive.md b/.qoder/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.qoder/skills/impeccable/reference/overdrive.md +++ b/.qoder/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.rovodev/skills/impeccable/reference/audit.md b/.rovodev/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.rovodev/skills/impeccable/reference/audit.md +++ b/.rovodev/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.rovodev/skills/impeccable/reference/harden.md b/.rovodev/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.rovodev/skills/impeccable/reference/harden.md +++ b/.rovodev/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.rovodev/skills/impeccable/reference/optimize.md b/.rovodev/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.rovodev/skills/impeccable/reference/optimize.md +++ b/.rovodev/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.rovodev/skills/impeccable/reference/overdrive.md b/.rovodev/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.rovodev/skills/impeccable/reference/overdrive.md +++ b/.rovodev/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.trae-cn/skills/impeccable/reference/audit.md b/.trae-cn/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.trae-cn/skills/impeccable/reference/audit.md +++ b/.trae-cn/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.trae-cn/skills/impeccable/reference/harden.md b/.trae-cn/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.trae-cn/skills/impeccable/reference/harden.md +++ b/.trae-cn/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.trae-cn/skills/impeccable/reference/optimize.md b/.trae-cn/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.trae-cn/skills/impeccable/reference/optimize.md +++ b/.trae-cn/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.trae-cn/skills/impeccable/reference/overdrive.md b/.trae-cn/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.trae-cn/skills/impeccable/reference/overdrive.md +++ b/.trae-cn/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.trae/skills/impeccable/reference/audit.md b/.trae/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.trae/skills/impeccable/reference/audit.md +++ b/.trae/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.trae/skills/impeccable/reference/harden.md b/.trae/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.trae/skills/impeccable/reference/harden.md +++ b/.trae/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.trae/skills/impeccable/reference/optimize.md b/.trae/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.trae/skills/impeccable/reference/optimize.md +++ b/.trae/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.trae/skills/impeccable/reference/overdrive.md b/.trae/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.trae/skills/impeccable/reference/overdrive.md +++ b/.trae/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/.vibe/skills/impeccable/reference/audit.md b/.vibe/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/.vibe/skills/impeccable/reference/audit.md +++ b/.vibe/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/.vibe/skills/impeccable/reference/harden.md b/.vibe/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/.vibe/skills/impeccable/reference/harden.md +++ b/.vibe/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/.vibe/skills/impeccable/reference/optimize.md b/.vibe/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/.vibe/skills/impeccable/reference/optimize.md +++ b/.vibe/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/.vibe/skills/impeccable/reference/overdrive.md b/.vibe/skills/impeccable/reference/overdrive.md index 56469842f..e50bfbc85 100644 --- a/.vibe/skills/impeccable/reference/overdrive.md +++ b/.vibe/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. diff --git a/plugin/skills/impeccable/reference/audit.md b/plugin/skills/impeccable/reference/audit.md index e08fa231f..474af4154 100644 --- a/plugin/skills/impeccable/reference/audit.md +++ b/plugin/skills/impeccable/reference/audit.md @@ -26,7 +26,8 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the **Check for**: - **Layout thrashing**: Reading/writing layout properties in loops - **Expensive animations**: Casual layout-property animation, unbounded blur/filter/shadow effects, or effects that visibly drop frames -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Missing optimization**: Images without lazy loading, unoptimized assets +- **will-change overuse**: `will-change` applied broadly or left on at rest (it is a targeted hint for known expensive animations, not a baseline requirement) - **Bundle size**: Unnecessary imports, unused dependencies - **Render performance**: Unnecessary re-renders, missing memoization diff --git a/plugin/skills/impeccable/reference/harden.md b/plugin/skills/impeccable/reference/harden.md index 0235b958b..46ca8a7c3 100644 --- a/plugin/skills/impeccable/reference/harden.md +++ b/plugin/skills/impeccable/reference/harden.md @@ -78,7 +78,7 @@ Systematically improve resilience: **Responsive text sizing**: - Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) +- Set minimum readable sizes (16px body on mobile, the same floor the typography guidance sets; 14px only for genuinely secondary text. iOS Safari force-zooms focused inputs under 16px, which breaks form layouts) - Test text scaling (zoom to 200%) - Ensure containers expand with text diff --git a/plugin/skills/impeccable/reference/optimize.md b/plugin/skills/impeccable/reference/optimize.md index 57bfb11c8..cc6ce4925 100644 --- a/plugin/skills/impeccable/reference/optimize.md +++ b/plugin/skills/impeccable/reference/optimize.md @@ -5,7 +5,7 @@ Performance is a feature. Identify the actual bottleneck for THIS interface, fix Understand current performance and identify problems: 1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage @@ -106,7 +106,7 @@ elements.forEach((el, i) => { - Minimize DOM depth (flatter is faster) - Reduce DOM size (fewer elements) - Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) +- Virtual scrolling for very long lists (react-window, TanStack Virtual) **Reduce Paint & Composite**: - Use `transform` and `opacity` for reliable movement, but allow blur, filters, masks, clip paths, shadows, and color shifts when they create meaningful polish @@ -196,7 +196,7 @@ const observer = new IntersectionObserver((entries) => { - Use CDN - Server-side rendering -### First Input Delay (FID < 100ms) / INP (< 200ms) +### Interaction to Next Paint (INP < 200ms) - Break up long tasks - Defer non-critical JavaScript - Use web workers for heavy computation @@ -226,7 +226,7 @@ const observer = new IntersectionObserver((entries) => { - Performance monitoring (Sentry, DataDog, New Relic) **Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) +- LCP, INP, CLS (Core Web Vitals; INP replaced FID in March 2024) - Time to Interactive (TTI) - First Contentful Paint (FCP) - Total Blocking Time (TBT) diff --git a/plugin/skills/impeccable/reference/overdrive.md b/plugin/skills/impeccable/reference/overdrive.md index a7117c221..11efe7d27 100644 --- a/plugin/skills/impeccable/reference/overdrive.md +++ b/plugin/skills/impeccable/reference/overdrive.md @@ -57,7 +57,7 @@ Organized by what you're trying to achieve, not by technology name. ### Render beyond CSS - **WebGL** (all browsers): shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only): next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **WebGPU** (Chrome/Edge; Safari 26+; Firefox on Windows/macOS; flag only on Firefox Linux/Android): next-gen GPU compute, more powerful than WebGL. Always fall back to WebGL2. - **Canvas 2D / OffscreenCanvas**: custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. - **SVG filter chains**: displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable.