Refresh stale metric and library references in the command docs

From issue #395, the items still present after the v4 consolidation:

- optimize.md led its interactivity section with FID, retired as a Core
  Web Vital in March 2024 when INP replaced it. The section heading and
  both metric lists now name INP.
- optimize.md recommended react-virtualized, superseded by react-window
  from the same author; the line now points at react-window and TanStack
  Virtual, matching overdrive.md.
- overdrive.md's WebGPU support matrix predated Firefox 141/147 shipping
  it on Windows/macOS and Safari 26 shipping it across Apple platforms.
- audit.md listed "missing will-change" as a defect while animate.md and
  optimize.md both instruct applying it sparingly and never preemptively;
  the audit line now flags overuse instead of absence.
- harden.md allowed 14px mobile body text while typeset.md sets a 16px
  ordinary floor; harden now matches the floor, reserving 14px for
  secondary text, and names the iOS Safari input-zoom consequence.

The issue's other items (Framer Motion naming, Popmotion, polish
duration cap, humor guidance, HSL phrasing in quieter) were already
resolved by the v4 reference rewrite.

Prepared with AI assistance (Claude Code), directed by @pbakaus.

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-07-25 18:19:25 -07:00
co-authored by Claude Code
parent af78b1e512
commit 24e24265d1
4 changed files with 8 additions and 7 deletions
+4 -4
View File
@@ -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)