speed skill: fast to load, smooth to use

Targets are for a mid-range phone on Slow 4G (Lighthouse mobile: 150 ms RTT, 1.6 Mbps, 4x CPU). Verify every claim with void perf and void smooth against a production build (see the audit skill).

The 10 rules that matter most

Server-render by default. 'use client' only on leaf components that need state, effects or event handlers. Never on page.tsx or layout.tsx.
The LCP element is in the initial HTML and visible at first paint. No loading="lazy", no opacity:0 entrance, no CSS background-image, no waiting for data around it.
One high-priority image per route: fetchPriority="high" + loading="eager" (or preload) on next/image. priority is deprecated in Next 16. Never use it.
Every , , </code>, <code><canvas></code> has <code>width</code>+<code>height</code> or <code>aspect-ratio</code>.</strong> Late UI (banners, toasts, consent) is <code>position: fixed</code> or has reserved <code>min-height</code>.</li> <li><strong>Marketing routes: ≤ 170 KB gzip first-load JS</strong> (Next's own baseline is ~133 KB, so you have ~40 KB). App routes ≤ 300 KB.</li> <li><strong>Prefer CSS over JS for motion.</strong> Animate only <code>transform</code> and <code>opacity</code>. If you need Motion, use <code>LazyMotion</code> + <code>m</code> (+32 KB), never the full <a class="code-link" href="/docs/motion"><code>motion</code></a> component (+46 KB).</li> <li><strong>Fonts: ≤ 2 families, ≤ 4 files, <code>next/font</code>, variable WOFF2, <code>subsets: ['latin']</code>.</strong> No Google Fonts <code><link></code>, no icon fonts.</li> <li><strong>Third-party scripts load with <code>next/script strategy="lazyOnload"</code>.</strong> Chat widgets and video embeds get a static facade that loads the real thing on click.</li> <li><strong>No scroll listeners for effects.</strong> Use <code>IntersectionObserver</code> or CSS scroll-driven animations. Touch/wheel listeners are <code>{ passive: true }</code>. No Lenis or other smooth-scroll libraries.</li> <li><strong>Every loop stops when unseen.</strong> rAF, intervals and infinite CSS animations pause offscreen (<code>IntersectionObserver</code>) and when the tab is hidden (<code>visibilitychange</code>). At most one WebGL context per page.</li> </ol> <h2 id="budgets"><a class="heading-anchor" href="#budgets">Budgets</a></h2> <p>"Gate" = the <code>void perf</code> default (<code>kind: "marketing"</code> or <code>"app"</code> in <code>void.config.ts</code>); exceeding it fails the run. "Target" = what a polished marketing page should reach.</p> <div class="table-wrap" tabindex="0" role="region" aria-label="Table 1"><table> <thead> <tr> <th>Metric (mobile lab, median of runs)</th> <th>Marketing gate</th> <th>Marketing target</th> <th>App gate</th> <th>Rule id</th> </tr> </thead> <tbody><tr> <td>LCP</td> <td>≤ 2.5 s (desktop ≤ 1.5 s)</td> <td>desktop ≤ 1.2 s</td> <td>≤ 2.5 s</td> <td><a class="code-link" href="/rules/perf/lcp-slow"><code>perf/lcp-slow</code></a></td> </tr> <tr> <td>TBT (lab proxy for INP)</td> <td>≤ 200 ms</td> <td>≤ 100 ms</td> <td>≤ 300 ms</td> <td><a class="code-link" href="/rules/perf/tbt-high"><code>perf/tbt-high</code></a></td> </tr> <tr> <td>INP (scripted interactions)</td> <td>≤ 200 ms</td> <td>≤ 100 ms desktop (unthrottled)</td> <td>≤ 200 ms</td> <td><a class="code-link" href="/rules/smooth/inp-slow"><code>smooth/inp-slow</code></a></td> </tr> <tr> <td>CLS</td> <td>≤ 0.1</td> <td>≤ 0.05 after full scroll</td> <td>≤ 0.1</td> <td><a class="code-link" href="/rules/perf/cls-high"><code>perf/cls-high</code></a>, <a class="code-link" href="/rules/smooth/layout-shift-on-scroll"><code>smooth/layout-shift-on-scroll</code></a></td> </tr> <tr> <td>TTFB</td> <td>≤ 800 ms</td> <td>≤ 600 ms</td> <td>≤ 800 ms</td> <td><a class="code-link" href="/rules/perf/ttfb-slow"><code>perf/ttfb-slow</code></a></td> </tr> <tr> <td>JS transfer at load</td> <td>≤ 170 KB</td> <td>≤ 40 KB above the framework</td> <td>≤ 300 KB</td> <td><a class="code-link" href="/rules/perf/js-budget"><code>perf/js-budget</code></a></td> </tr> <tr> <td>CSS transfer</td> <td>≤ 25 KB</td> <td>—</td> <td>≤ 40 KB</td> <td><a class="code-link" href="/rules/perf/css-budget"><code>perf/css-budget</code></a></td> </tr> <tr> <td>Fonts</td> <td>≤ 120 KB, ≤ 2 families, ≤ 4 files</td> <td>≤ 2 files preloaded</td> <td>same</td> <td><a class="code-link" href="/rules/perf/font-budget"><code>perf/font-budget</code></a>, <a class="code-link" href="/rules/perf/too-many-fonts"><code>perf/too-many-fonts</code></a></td> </tr> <tr> <td>Images at load (total)</td> <td>≤ 1,000 KB</td> <td>LCP image ≤ 150 KB</td> <td>—</td> <td><a class="code-link" href="/rules/perf/image-budget"><code>perf/image-budget</code></a></td> </tr> <tr> <td>HTML document</td> <td>≤ 30 KB</td> <td>—</td> <td>≤ 60 KB</td> <td>—</td> </tr> <tr> <td>Dropped frames while scrolling</td> <td>≤ 5%</td> <td>0 ms long-frame blocking</td> <td>≤ 5%</td> <td><a class="code-link" href="/rules/smooth/scroll-jank"><code>smooth/scroll-jank</code></a>, <a class="code-link" href="/rules/smooth/long-frames-during-scroll"><code>smooth/long-frames-during-scroll</code></a></td> </tr> <tr> <td>DOM</td> <td>≤ 1,400 elements, depth ≤ 32</td> <td>—</td> <td>same</td> <td><a class="code-link" href="/rules/perf/dom-size"><code>perf/dom-size</code></a></td> </tr> <tr> <td>Lighthouse performance (<code>--lighthouse</code>)</td> <td>≥ 90</td> <td>—</td> <td>≥ 80</td> <td><a class="code-link" href="/rules/perf/lighthouse-score-low"><code>perf/lighthouse-score-low</code></a></td> </tr> </tbody></table></div> <p>Next's own framework baseline is ~133 KB gzip, so a marketing page has ~40 KB for its own client code. Astro/static pages with no framework runtime: ≤ 50 KB JS (islands only). Override budgets in <code>void.config.ts</code> (see the <a class="code-link" href="/docs/audit"><code>audit</code></a> skill).</p> <h2 id="before-adding-any-client-js-ask-in-order"><a class="heading-anchor" href="#before-adding-any-client-js-ask-in-order">Before adding any client JS, ask in order</a></h2> <ol> <li><strong>Can HTML/CSS do it?</strong> <code><details></code>, <code><dialog></code>, <code>popover</code>, <code>:has()</code>, <code>@starting-style</code>, CSS transitions, scroll-snap. Then write zero JS.</li> <li><strong>Can the server do it?</strong> Markdown, syntax highlighting (Shiki at build time), charts as static SVG, date formatting, icons (lucide in a Server Component costs ~1 KB). Then do it in a Server Component.</li> <li><strong>Is it needed at first paint?</strong> No: <code>next/dynamic</code> (inside a client component) mounted on interaction or visibility.</li> <li><strong>Is it a third party?</strong> <code>lazyOnload</code> or a facade. Never synchronous in <code><head></code>.</li> <li><strong>Does it add > 5 KB gzip?</strong> Check the size (bundlephobia, <code>next experimental-analyze</code>) and find a lighter option or cut it. Known costs: <code>three</code> 140–160 KB, <code>swiper</code> ~40 KB, <code>react-markdown</code> ~50 KB, Prism/<code>react-syntax-highlighter</code> ~250 KB, <code>lenis</code> ~10 KB plus a permanent rAF loop.</li> </ol> <p>Banned in <code>'use client'</code> modules on marketing routes: <code>prismjs</code>, <code>highlight.js</code>, <code>shiki</code>, <code>react-markdown</code>, <code>remark*</code>, <code>rehype*</code>, <code>moment</code>, <code>chart.js</code>, <code>recharts</code>, <code>d3</code>, <code>framer-motion</code>, and the <a class="code-link" href="/docs/motion"><code>motion</code></a> component (<code>import { motion } from "motion/react"</code>; use <code>m</code> from <code>motion/react-m</code> instead).</p> <h2 id="server-first-component-boundaries"><a class="heading-anchor" href="#server-first-component-boundaries">Server-first component boundaries</a></h2> <ul> <li>Push <code>'use client'</code> down to the smallest interactive leaf (button, menu, carousel). Pass Server Components into client wrappers as <code>children</code>.</li> <li>A Server Component imported from a <code>'use client'</code> file gets bundled as client code. Import it from a server parent and pass it down.</li> <li>Pass only the props the client needs. Whole CMS documents or ASTs get serialized twice: once into the HTML, once into the RSC payload.</li> <li>Put slow data behind <code><Suspense></code> with a skeleton of the <strong>same height</strong>. Keep the hero and h1 outside it.</li> <li>Pages that can be static stay static (<code>○</code> in <code>next build</code>). Use <code>'use cache'</code> with <code>cacheComponents: true</code> for cached dynamic data.</li> <li>Details and code: <a class="code-link" href="/docs/speed/next-performance"><code>references/next-performance.md</code></a>. Hook and effect bugs: <a class="code-link" href="/docs/speed/react-pitfalls"><code>references/react-pitfalls.md</code></a>.</li> </ul> <h2 id="lcp-recipe"><a class="heading-anchor" href="#lcp-recipe">LCP recipe</a></h2> <ol> <li>Know the LCP element. On marketing pages it is the hero image or the h1. A <strong>typographic hero is cheaper</strong> (it only needs HTML, CSS and the font).</li> <li>Serve it from static or prerendered HTML behind a CDN. TTFB is about 40% of LCP.</li> <li>Image hero: a static import plus <code>fill sizes="100vw" fetchPriority="high" loading="eager"</code>, AVIF/WebP, ≤ 150 KB on mobile. Every other image stays lazy with an accurate <code>sizes</code>.</li> <li>Don't hide it. An element at <code>opacity:0</code> is not an LCP candidate until it becomes visible. Animate secondary elements, or start the hero from a visible state.</li> <li>No render-blocking third parties before it. With <code>next/font</code> and <code>next/image</code> everything is same-origin, so you need zero <code>preconnect</code>s.</li> </ol> <p>Recipes: <a class="code-link" href="/docs/speed/images-fonts"><code>references/images-fonts.md</code></a>. Ids: <a class="code-link" href="/rules/perf/lcp-image-lazy"><code>perf/lcp-image-lazy</code></a>, <a class="code-link" href="/rules/perf/lcp-image-no-priority"><code>perf/lcp-image-no-priority</code></a>, <a class="code-link" href="/rules/perf/lcp-background-image"><code>perf/lcp-background-image</code></a>, <a class="code-link" href="/rules/perf/image-oversized"><code>perf/image-oversized</code></a>, <a class="code-link" href="/rules/perf/image-legacy-format"><code>perf/image-legacy-format</code></a>, <a class="code-link" href="/rules/perf/render-blocking"><code>perf/render-blocking</code></a>.</p> <h2 id="inp-recipe-every-click-tap-key-next-frame-200-ms"><a class="heading-anchor" href="#inp-recipe-every-click-tap-key-next-frame-200-ms">INP recipe (every click/tap/key → next frame ≤ 200 ms)</a></h2> <ul> <li>Ship less JS (above). Hydration cost scales with the size of the client component tree.</li> <li>Handlers: do the visual acknowledgement synchronously (toggle a class or pending state), then <code>await yieldToMain()</code>, then do the heavy work, analytics or network.</li> <li>Use <code>startTransition</code> for non-urgent state updates (filters, tab content). Use <code>useDeferredValue</code> for expensive renders driven by typing.</li> <li>No long task > 50 ms after any interaction. Split loops with <code>scheduler.yield()</code> (Safari needs the <code>setTimeout</code> fallback).</li> <li>Per-frame values (pointer position, scroll progress) never go through React state. Write them to the DOM, a CSS variable on the element itself, or a MotionValue.</li> <li>Consider <code>reactCompiler: true</code> in <code>next.config.ts</code> for app routes with heavy re-renders.</li> </ul> <figure class="code-block" data-lang="ts"><figcaption><span>ts</span><button type="button" class="copy-button" data-copy>Copy</button></figcaption><pre tabindex="0" aria-label="ts code" class="shiki void" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0"><code><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> const</span><span style="color:var(--shiki-token-function)"> yieldToMain</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-foreground)"> () </span><span style="color:var(--shiki-token-keyword)">=></span></span> <span class="line"><span style="color:var(--shiki-foreground)"> (globalThis </span><span style="color:var(--shiki-token-keyword)">as</span><span style="color:var(--shiki-token-constant)"> any</span><span style="color:var(--shiki-foreground)">).</span><span style="color:var(--shiki-token-constant)">scheduler</span><span style="color:var(--shiki-foreground)">?.yield </span><span style="color:var(--shiki-token-keyword)">?</span><span style="color:var(--shiki-foreground)"> (globalThis </span><span style="color:var(--shiki-token-keyword)">as</span><span style="color:var(--shiki-token-constant)"> any</span><span style="color:var(--shiki-foreground)">).</span><span style="color:var(--shiki-token-constant)">scheduler</span><span style="color:var(--shiki-token-function)">.yield</span><span style="color:var(--shiki-foreground)">() </span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-keyword)"> new</span><span style="color:var(--shiki-token-constant)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-constant)">void</span><span style="color:var(--shiki-foreground)">>((r) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-token-function)"> setTimeout</span><span style="color:var(--shiki-foreground)">(r</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-constant)"> 0</span><span style="color:var(--shiki-foreground)">));</span></span></code></pre></figure> <h2 id="cls-recipe"><a class="heading-anchor" href="#cls-recipe">CLS recipe</a></h2> <ul> <li>Media: <code>width</code>/<code>height</code> attributes or <code>aspect-ratio</code>. <code>next/image</code> with <code>fill</code> needs a sized, positioned parent. Id: <a class="code-link" href="/rules/perf/images-missing-dimensions"><code>perf/images-missing-dimensions</code></a>.</li> <li>Fonts: <code>next/font</code> keeps <code>adjustFontFallback</code> on. Outside Next, add a <code>size-adjust</code> fallback <code>@font-face</code>. <code>font-display: swap</code> or <code>optional</code>, never <code>block</code>.</li> <li>Late content: announcement bars are server-rendered; cookie banners and toasts are <code>fixed</code>; ad and embed slots have <code>min-height</code>; skeletons match the final height within ±8 px.</li> <li>Never animate <code>width</code>, <code>height</code>, <code>top</code>, <code>left</code>, <code>margin</code> or <code>padding</code>. For accordions use <code>grid-template-rows: 0fr → 1fr</code>.</li> <li><code>scrollbar-gutter: stable</code> on <code>html</code> so modals and scroll locks don't shift the page.</li> </ul> <h2 id="images-fonts-third-parties-summary"><a class="heading-anchor" href="#images-fonts-third-parties-summary">Images, fonts, third parties (summary)</a></h2> <ul> <li><code>next.config.ts</code>: <code>images: { formats: ['image/avif', 'image/webp'] }</code>. Next 16 only allows <code>quality</code> 75 unless you add values to <code>images.qualities</code>.</li> <li>Below-the-fold: default lazy + <code>sizes</code> (e.g. <code>sizes="(min-width: 1024px) 33vw, 100vw"</code>). Decorative images: <code>alt=""</code>.</li> <li>Video: <code>poster</code>, <code>preload="none"</code>, no autoplay with sound. YouTube/Vimeo: a thumbnail facade with <code>aspect-ratio: 16/9</code> that swaps in the iframe on click.</li> <li>Scripts: <code>beforeInteractive</code> only for consent or bot detection, <code>afterInteractive</code> only for analytics you truly need at load, <code>lazyOnload</code> for everything else. <code>strategy="worker"</code> does not work in the App Router.</li> <li>Fonts: turn <code>adjustFontFallback</code> <strong>off</strong> for monospace <code>next/font/local</code> (it scales Arial to ~131% and code renders oversized until the swap). Use <code>preload: false</code> on decorative or italic faces. Scope display fonts to the route layout that uses them.</li> </ul> <h2 id="animation-and-smoothness"><a class="heading-anchor" href="#animation-and-smoothness">Animation and smoothness</a></h2> <p>Timing, easing and choreography live in the <a class="code-link" href="/docs/motion"><code>motion</code></a> skill. The performance rules:</p> <ul> <li>Only <code>transform</code> and <code>opacity</code>. <code>filter</code>/<code>clip-path</code> on small elements only. No <code>backdrop-filter</code> over large or scrolling areas (at most one blurred header). No <code>transition: all</code>.</li> <li>Set <code>will-change</code> only while an animation runs, never globally, and on at most 3 elements.</li> <li>Scroll effects: CSS <code>animation-timeline: view()</code> inside <code>@supports (animation-timeline: view())</code>, because Firefox lacks it and the page must look complete without it. Or use <code>IntersectionObserver</code>. At most one scroll-scrubbed set piece per page.</li> <li>Long pages (> 3 viewports): <code>content-visibility: auto; contain-intrinsic-size: auto 800px</code> on repeated below-fold sections. Never on the first viewport.</li> <li>Every animation respects <code>prefers-reduced-motion: reduce</code> and falls back to a finished static frame. Content is never hidden.</li> <li>Details: <a class="code-link" href="/docs/speed/rendering-smoothness"><code>references/rendering-smoothness.md</code></a>. Ids: <a class="code-link" href="/rules/smooth/animate-layout-property"><code>smooth/animate-layout-property</code></a>, <a class="code-link" href="/rules/smooth/transition-all"><code>smooth/transition-all</code></a>, <a class="code-link" href="/rules/smooth/will-change-overuse"><code>smooth/will-change-overuse</code></a>, <a class="code-link" href="/rules/smooth/reduced-motion-ignored"><code>smooth/reduced-motion-ignored</code></a>, <a class="code-link" href="/rules/smooth/scroll-listener-nonpassive"><code>smooth/scroll-listener-nonpassive</code></a> (list all: <code>void rules smooth</code>).</li> </ul> <h2 id="webgl-canvas-allowed-only-if-all-of-these-hold"><a class="heading-anchor" href="#webgl-canvas-allowed-only-if-all-of-these-hold">WebGL / canvas: allowed only if all of these hold</a></h2> <p>Allowed for a hero or ambient backdrop on marketing pages. In app routes only when the canvas <strong>is</strong> the product.</p> <ol> <li><strong>One live context per page</strong> (two at most). Never inside <code>.map()</code> or a list item: browsers cap contexts at ~8–16 and silently kill the oldest. For many instances, draw one static frame or use CSS gradients.</li> <li><strong>Pause, don't skip.</strong> Cancel the rAF when offscreen (<code>IntersectionObserver</code>) or when <code>document.hidden</code>. Never pause because the user is idle.</li> <li><strong>Cap DPR at 1.5</strong> (1 for full-screen backdrops) and fps at 30 for ambient effects. Size backdrops to the viewport (<code>position: fixed</code>), not the page.</li> <li><strong>Reduced motion:</strong> render one static frame and stop.</li> <li><strong>Cleanup:</strong> cancel the rAF, remove listeners, <code>getExtension('WEBGL_lose_context')?.loseContext()</code> on unmount, handle <code>webglcontextlost</code>. Update uniforms when props change; don't rebuild the program.</li> <li><strong>Load after paint:</strong> <code>next/dynamic(..., { ssr: false })</code> from a client component, a reserved box with the shader's average color as placeholder, <code>aria-hidden</code> + <code>pointer-events-none</code> when decorative.</li> <li>Prefer <code>ogl</code> (10–14 KB) or raw WebGL2 over <code>three</code> (140 KB+) for full-screen quads. Mount persistent backdrops once in the root layout so they don't re-init on every navigation.</li> </ol> <p>Paste-ready hook: <a class="code-link" href="/docs/speed/rendering-smoothness"><code>references/rendering-smoothness.md</code></a> §8. Ids: <a class="code-link" href="/rules/smooth/multiple-webgl-contexts"><code>smooth/multiple-webgl-contexts</code></a>, <a class="code-link" href="/rules/smooth/raf-loop-idle"><code>smooth/raf-loop-idle</code></a>, <a class="code-link" href="/rules/lint/webgl-in-map"><code>lint/webgl-in-map</code></a>, <a class="code-link" href="/rules/lint/raf-without-cancel"><code>lint/raf-without-cancel</code></a>.</p> <h2 id="bfcache-and-caching"><a class="heading-anchor" href="#bfcache-and-caching">bfcache and caching</a></h2> <ul> <li>No <code>unload</code> listeners. Use <code>pagehide</code>. Add <code>beforeunload</code> only while there are unsaved changes. Id: <a class="code-link" href="/rules/perf/bfcache-blocked"><code>perf/bfcache-blocked</code></a>.</li> <li>Hashed assets (<code>/_next/static/*</code>): <code>public, max-age=31536000, immutable</code> (Next does this). HTML: <code>no-cache</code> or CDN <code>s-maxage</code> + <code>stale-while-revalidate</code>. <strong>Never <code>immutable</code> on HTML.</strong> Id: <a class="code-link" href="/rules/perf/cache-headers"><code>perf/cache-headers</code></a>.</li> <li>Compression: <code>next start</code> only gzips. Put brotli/zstd at the CDN or proxy (and set <code>compress: false</code> when the proxy compresses). Id: <a class="code-link" href="/rules/perf/no-text-compression"><code>perf/no-text-compression</code></a>.</li> <li><code>output: 'standalone'</code> doesn't copy <code>public/</code> or <code>.next/static</code>. Copy them, or fonts and images 404.</li> <li>Next App Router: rely on <code><Link></code> prefetch. Don't add document-wide Speculation Rules <code>prerender</code>. Multi-page apps (Astro): <code>prefetch</code> at <code>moderate</code>.</li> </ul> <h2 id="never-do"><a class="heading-anchor" href="#never-do">Never do</a></h2> <ul> <li><code>'use client'</code> at the top of a page or layout.</li> <li><code>priority</code> on <code>next/image</code> (Next 16) · <code>loading="lazy"</code> on the hero · a hero as CSS <code>background-image</code>.</li> <li>An h1 or hero at <code>initial={{ opacity: 0 }}</code> waiting for hydration.</li> <li>Google Fonts <code><link></code>/<code>@import</code> · icon fonts · more than 2 families.</li> <li><code>framer-motion</code>, or <code>motion.div</code> without <code>LazyMotion</code> · Lenis, locomotive-scroll, GSAP ScrollTrigger pinning.</li> <li>Animating <code>width</code>/<code>height</code>/<code>top</code>/<code>left</code>/<code>margin</code>/<code>box-shadow</code> · <code>transition: all</code> · permanent <code>will-change</code>.</li> <li><code>setState</code> on <code>scroll</code>/<code>mousemove</code>/rAF · <code>setInterval</code> or subscriptions in the render body · <code>window</code>/<code>document</code>/<code>navigator</code> at module scope or during render.</li> <li>Non-passive <code>wheel</code>/<code>touchstart</code> listeners on <code>window</code>/<code>document</code>.</li> <li>A WebGL context per card · rAF that keeps running offscreen · canvas at DPR 2+.</li> <li>Synchronous third-party scripts in <code><head></code> · autoplaying background video · chat widgets that load at startup.</li> <li><code>unload</code> handlers · <code>Cache-Control: immutable</code> on HTML.</li> <li>Client-side fetches of rate-limited public APIs (e.g. GitHub stars) on every visit. Fetch on the server with <code>revalidate</code>.</li> <li>Measuring against <code>next dev</code>.</li> </ul> <h2 id="verify"><a class="heading-anchor" href="#verify">Verify</a></h2> <ol> <li>After each significant edit: <code>void lint</code> (seconds). It catches <a class="code-link" href="/rules/lint/image-priority-deprecated"><code>lint/image-priority-deprecated</code></a>, <a class="code-link" href="/rules/lint/heavy-import"><code>lint/heavy-import</code></a>, <a class="code-link" href="/rules/lint/page-level-use-client"><code>lint/page-level-use-client</code></a>, <a class="code-link" href="/rules/lint/animate-layout-prop"><code>lint/animate-layout-prop</code></a>, <a class="code-link" href="/rules/lint/scroll-listener-nonpassive"><code>lint/scroll-listener-nonpassive</code></a>, <a class="code-link" href="/rules/lint/no-reduced-motion"><code>lint/no-reduced-motion</code></a>, <a class="code-link" href="/rules/lint/timer-in-render"><code>lint/timer-in-render</code></a>, <a class="code-link" href="/rules/lint/browser-global-in-render"><code>lint/browser-global-in-render</code></a>, <a class="code-link" href="/rules/lint/raf-without-cancel"><code>lint/raf-without-cancel</code></a>, <a class="code-link" href="/rules/lint/webgl-in-map"><code>lint/webgl-in-map</code></a>, <a class="code-link" href="/rules/lint/unload-listener"><code>lint/unload-listener</code></a>, <a class="code-link" href="/rules/lint/google-fonts-link"><code>lint/google-fonts-link</code></a>, <a class="code-link" href="/rules/lint/script-strategy"><code>lint/script-strategy</code></a>.</li> <li>Before declaring done: <code>next build</code>, then <code>void perf --start "next start -p 3000" --port 3000</code> and <code>void smooth --start "next start -p 3000" --port 3000</code> (scroll jank, INP of interactions, non-composited animations, idle rAF loops, WebGL context count).</li> <li>Fix in order: errors → budgets → warnings. Look up any id with <code>void rules <id></code>. The full loop is in the <a class="code-link" href="/docs/audit"><code>audit</code></a> skill.</li> </ol> </div><footer class="mt-16 border-t border-line-subtle pt-8 pb-20"><div class="flex flex-wrap items-center justify-between gap-3 font-mono text-xs text-fg-muted"><span>Updated <time dateTime="2026-09-16">16 Sept 2026</time></span><span class="flex gap-4"><a href="/docs/speed.md" class="hover:text-fg">View as Markdown</a><a href="https://github.com/ParthKapoor-dev/design/blob/main/skills/speed/SKILL.md" rel="noopener noreferrer" class="hover:text-fg">Edit on GitHub</a></span></div><div class="mt-8 grid gap-3 sm:grid-cols-2"><a class="press group flex flex-col gap-1 rounded-lg border border-line-subtle p-4 transition-colors duration-(--duration-fast) hover:border-line-strong" href="/docs/inspire/font-alternatives"><span class="label-mono flex items-center gap-1.5 text-fg-muted"><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="size-3"><path d="M13 8H3.5M7.5 4l-4 4 4 4" stroke-linecap="round" stroke-linejoin="round"></path></svg> Previous</span><span class="text-sm text-fg">inspire: font alternatives</span></a><a class="press group flex flex-col items-end gap-1 rounded-lg border border-line-subtle p-4 text-right transition-colors duration-(--duration-fast) hover:border-line-strong" href="/docs/speed/images-fonts"><span class="label-mono flex items-center gap-1.5 text-fg-muted">Next <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="size-3"><path d="M3 8h9.5M8.5 4l4 4-4 4" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-sm text-fg">speed: images fonts</span></a></div></footer></article><aside aria-label="Page contents" class="hidden xl:block"><div data-lenis-prevent="true" class="sticky top-(--header-h) max-h-[calc(100dvh-var(--header-h))] overflow-y-auto pt-4 pb-10 [scrollbar-width:thin]"><nav aria-label="On this page" class="text-sm"><p class="label-mono mb-3 text-fg-muted">On this page</p><ul class="grid gap-1.5 border-l border-line-subtle"><li><a href="#the-10-rules-that-matter-most" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">The 10 rules that matter most</a></li><li><a href="#budgets" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">Budgets</a></li><li><a href="#before-adding-any-client-js-ask-in-order" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">Before adding any client JS, ask in order</a></li><li><a href="#server-first-component-boundaries" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">Server-first component boundaries</a></li><li><a href="#lcp-recipe" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">LCP recipe</a></li><li><a href="#inp-recipe-every-click-tap-key-next-frame-200-ms" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">INP recipe (every click/tap/key → next frame ≤ 200 ms)</a></li><li><a href="#cls-recipe" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">CLS recipe</a></li><li><a href="#images-fonts-third-parties-summary" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">Images, fonts, third parties (summary)</a></li><li><a href="#animation-and-smoothness" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">Animation and smoothness</a></li><li><a href="#webgl-canvas-allowed-only-if-all-of-these-hold" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">WebGL / canvas: allowed only if all of these hold</a></li><li><a href="#bfcache-and-caching" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">bfcache and caching</a></li><li><a href="#never-do" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">Never do</a></li><li><a href="#verify" class="block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4">Verify</a></li></ul></nav></div></aside></div></div></main><footer class="relative mt-24 overflow-hidden border-t border-line px-(--gutter)"><div aria-hidden="true" class="pointer-events-none absolute -bottom-[40vw] left-1/2 size-[80vw] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,color-mix(in_oklab,var(--flare)_12%,transparent),transparent)]"></div><div class="relative mx-auto grid max-w-7xl gap-12 py-16 md:grid-cols-12 md:gap-8"><div class="md:col-span-5"><a class="inline-flex items-center gap-2.5 text-ink" aria-label="void home" href="/"><svg viewBox="0 0 32 32" class="size-6" aria-hidden="true"><defs><radialGradient id="mk" cx="50%" cy="50%" r="50%"><stop offset="0.52" stop-color="#000"></stop><stop offset="0.6" stop-color="var(--flare-2)"></stop><stop offset="0.8" stop-color="var(--flare)" stop-opacity="0.6"></stop><stop offset="1" stop-color="var(--flare)" stop-opacity="0"></stop></radialGradient></defs><ellipse cx="16" cy="16" rx="15" ry="5" fill="none" stroke="var(--flare)" stroke-opacity="0.8" stroke-width="1.4" transform="rotate(-18 16 16)"></ellipse><circle cx="16" cy="16" r="10" fill="url(#mk)"></circle></svg><span class="text-lg font-medium tracking-tight">void</span></a><p class="mt-4 max-w-[44ch] text-mute">A design system for AI coding agents. This site is built with it and audited by it on every change.</p><p class="mt-6 inline-flex flex-wrap items-center gap-x-4 gap-y-1 rounded-full border border-line-2 bg-black/40 px-4 py-2 font-mono text-xs text-mute"><span class="text-flare-2">void audit</span><span>perf <span class="text-ink tabular-nums">100</span></span><span>a11y <span class="text-ink tabular-nums">100</span></span><span>seo <span class="text-ink tabular-nums">99</span></span><span>geo <span class="text-ink tabular-nums">100</span></span></p></div><nav aria-label="Product" class="md:col-span-2 md:first-of-type:col-start-7"><p class="kicker">Product</p><ul class="mt-4 grid gap-2"><li><a class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink" href="/docs">Docs</a></li><li><a class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink" href="/cli">CLI reference</a></li><li><a class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink" href="/rules">Rules</a></li><li><a class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink" href="/directions">Directions</a></li><li><a class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink" href="/evals">Evals</a></li></ul></nav><nav aria-label="For agents" class="md:col-span-2 md:first-of-type:col-start-7"><p class="kicker">For agents</p><ul class="mt-4 grid gap-2"><li><a href="/llms.txt" class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink">llms.txt</a></li><li><a href="/llms-full.txt" class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink">llms-full.txt</a></li><li><a href="/index.md" class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink">index.md</a></li><li><a href="/sitemap.xml" class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink">sitemap.xml</a></li></ul></nav><nav aria-label="Source" class="md:col-span-2 md:first-of-type:col-start-7"><p class="kicker">Source</p><ul class="mt-4 grid gap-2"><li><a href="https://github.com/ParthKapoor-dev/design" rel="noopener noreferrer" class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink">GitHub</a></li><li><a href="https://github.com/ParthKapoor-dev/design/blob/main/LICENSE" rel="noopener noreferrer" class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink">MIT licence</a></li><li><a href="https://parthkapoor.me" rel="noopener noreferrer" class="inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink">Parth Kapoor</a></li></ul></nav></div><p aria-hidden="true" class="wordmark relative mx-auto max-w-7xl select-none text-center font-semibold leading-[0.72] tracking-[-0.06em] text-[clamp(6rem,24vw,22rem)]">void</p><div class="relative mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 border-t border-line py-6 font-mono text-xs text-mute"><span>© 2026 Parth Kapoor · MIT</span><span>void-design.vercel.app</span></div></footer><div class="grain" aria-hidden="true"></div><script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://void-design.vercel.app/#organization","name":"void","url":"https://void-design.vercel.app/","logo":"https://void-design.vercel.app/icon-512.png","sameAs":["https://github.com/ParthKapoor-dev/design"]},{"@type":"WebSite","@id":"https://void-design.vercel.app/#website","name":"void","url":"https://void-design.vercel.app/","description":"void is an open-source design system for AI coding agents: Claude Code skills, Tailwind v4 tokens and a CLI that audits speed, accessibility, SEO and design.","inLanguage":"en","publisher":{"@id":"https://void-design.vercel.app/#organization"}}]}</script><script src="/_next/static/immutable/chunks/39mze7sr9bsct.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[46810,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\"],\"SmoothScroll\"]\n3:I[45110,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\"],\"Cursor\"]\n4:I[75514,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\"],\"Magnetic\"]\n5:I[88287,[\"/_next/static/immutable/chunks/455sb5e0fgpzb.js\"],\"default\"]\n6:I[74895,[\"/_next/static/immutable/chunks/455sb5e0fgpzb.js\"],\"default\"]\n7:I[821,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\",\"/_next/static/immutable/chunks/1635pnmauuvxi.js\"],\"Nav\"]\n8:I[23408,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\",\"/_next/static/immutable/chunks/1635pnmauuvxi.js\"],\"CanvasRoot\"]\n9:I[57715,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\",\"/_next/static/immutable/chunks/1635pnmauuvxi.js\",\"/_next/static/immutable/chunks/10-jx0r2jtr5s.js\",\"/_next/static/immutable/chunks/2-9e3j82g4al3.js\",\"/_next/static/immutable/chunks/15spxoq7fze2b.js\"],\"PageHero\"]\na:I[4561,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\",\"/_next/static/immutable/chunks/1635pnmauuvxi.js\",\"/_next/static/immutable/chunks/10-jx0r2jtr5s.js\",\"/_next/static/immutable/chunks/2-9e3j82g4al3.js\",\"/_next/static/immutable/chunks/15spxoq7fze2b.js\"],\"\"]\n16:I[52576,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\"],\"default\",1]\n:HL[\"/_next/static/immutable/chunks/0qj2_6xwr7iux.css\",\"style\"]\n:HL[\"/_next/static/immutable/media/797e433ab948586e-s.p.1v5bejj26fx9h.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/7ebf22b5a21034f8-s.p.3strvg7o-g5v2.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/caa3a2e1cccd8315-s.p.0zr6hhvz-h9nw.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n14:X\n0:{\"P\":null,\"c\":[\"\",\"docs\",\"speed\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(pages)\",{\"children\":[\"docs\",{\"children\":[[\"skill\",\"speed\",\"d\",[]],{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4624],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0qj2_6xwr7iux.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"geist_e799d87a-module__u8MhCG__variable geist_mono_8f04fc5a-module__ZGwrmq__variable instrument_serif_d5a02a32-module__PnFala__variable\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"document.documentElement.classList.add(\\\"js\\\")\"}}],[\"$\",\"link\",null,{\"rel\":\"describedby\",\"type\":\"text/markdown\",\"href\":\"/llms.txt\"}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{}],[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"$L7\",null,{}],[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"children\":[\"$\",\"$L8\",null,{}]}],[\"$\",\"main\",null,{\"id\":\"main\",\"className\":\"page-shell relative px-(--gutter)\",\"children\":[\"$\",\"$L9\",null,{\"scene\":\"snow\",\"crumbs\":[{\"name\":\"void\",\"path\":\"/\"},{\"name\":\"404\"}],\"kicker\":\"HTTP 404 · noindex\",\"title\":[\"Nothing measured \",[\"$\",\"span\",null,{\"className\":\"serif hot\",\"children\":\"at this address.\"}]],\"lead\":\"The link may be old, or a rule id was renamed. Everything that exists is one of these.\",\"children\":[\"$\",\"div\",null,{\"className\":\"enter mt-10 max-w-xl overflow-hidden rounded-2xl border border-line-2 bg-black/60 font-mono text-sm backdrop-blur-md\",\"style\":{\"--d\":\"0.45s\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-10 items-center justify-between border-b border-line px-4\",\"children\":[[\"$\",\"span\",null,{\"className\":\"label-mono text-fg-subtle\",\"children\":\"~/void\"}],[\"$\",\"span\",null,{\"className\":\"label-mono text-danger\",\"children\":\"exit 3\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 py-4 leading-7\",\"children\":[[\"$\",\"p\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",[\"$\",\"span\",null,{\"className\":\"text-fg\",\"children\":\"curl -sI this-page\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-fg-muted\",\"children\":[\"HTTP/2 \",[\"$\",\"span\",null,{\"className\":\"text-danger\",\"children\":\"404\"}]]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-fg-subtle\",\"children\":\"# try one of these\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",\"/docs\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/docs\",\"className\":\"group flex min-h-7 flex-wrap items-center gap-x-3 text-fg transition-colors hover:text-brand-text\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",\"cd /docs\"]}],[\"$\",\"span\",null,{\"className\":\"text-fg-subtle group-hover:text-fg-muted\",\"children\":[\"# \",\"install, the starter, the skills\"]}]]}]}],[\"$\",\"li\",\"/rules\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/rules\",\"className\":\"group flex min-h-7 flex-wrap items-center gap-x-3 text-fg transition-colors hover:text-brand-text\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",\"void rules\"]}],[\"$\",\"span\",null,{\"className\":\"text-fg-subtle group-hover:text-fg-muted\",\"children\":[\"# \",\"every rule id the CLI can print\"]}]]}]}],[\"$\",\"li\",\"/cli\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/cli\",\"className\":\"group flex min-h-7 flex-wrap items-center gap-x-3 text-fg transition-colors hover:text-brand-text\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",\"void --help\"]}],[\"$\",\"span\",null,{\"className\":\"text-fg-subtle group-hover:text-fg-muted\",\"children\":[\"# \",\"commands, flags and exit codes\"]}]]}]}],[\"$\",\"li\",\"/\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"group flex min-h-7 flex-wrap items-center gap-x-3 text-fg transition-colors hover:text-brand-text\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",\"cd ~\"]}],[\"$\",\"span\",null,{\"className\":\"text-fg-subtle group-hover:text-fg-muted\",\"children\":[\"# \",\"home\"]}]]}]}]]}]]}]]}]}]}],[\"$\",\"footer\",null,{\"className\":\"relative mt-24 overflow-hidden border-t border-line px-(--gutter)\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"pointer-events-none absolute -bottom-[40vw] left-1/2 size-[80vw] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,color-mix(in_oklab,var(--flare)_12%,transparent),transparent)]\"}],\"$Lb\",\"$Lc\",\"$Ld\"]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$Le\",\"$Lf\"]}]]}]]}],{\"children\":[\"$L10\",{\"children\":[\"$L11\",{\"children\":[\"$L12\",{\"children\":[\"$L13\",{},null,false,null]},null,false,\"$14\"]},null,false,\"$14\"]},null,false,null]},null,false,null],\"$L15\",false]],\"m\":\"$undefined\",\"G\":[\"$16\",[\"$L17\"]],\"S\":true,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"kQQT0nsN5xJVQW80oWLeY\"}\n18:I[821,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\",\"/_next/static/immutable/chunks/1635pnmauuvxi.js\"],\"Mark\"]\n26:I[51858,[\"/_next/static/immutable/chunks/455sb5e0fgpzb.js\"],\"OutletBoundary\"]\n27:\"$Sreact.suspense\"\n29:I[51858,[\"/_next/static/immutable/chunks/455sb5e0fgpzb.js\"],\"ViewportBoundary\"]\n2b:I[51858,[\"/_next/static/immutable/chunks/455sb5e0fgpzb.js\"],\"MetadataBoundary\"]\nb:[\"$\",\"div\",null,{\"className\":\"relative mx-auto grid max-w-7xl gap-12 py-16 md:grid-cols-12 md:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"md:col-span-5\",\"children\":[[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center gap-2.5 text-ink\",\"aria-label\":\"void home\",\"children\":[[\"$\",\"$L18\",null,{\"className\":\"size-6\"}],[\"$\",\"span\",null,{\"className\":\"text-lg font-medium tracking-tight\",\"children\":\"void\"}]]}],[\"$\",\"p\",null,{\"className\":\"mt-4 max-w-[44ch] text-mute\",\"children\":\"A design system for AI coding agents. This site is built with it and audited by it on every change.\"}],[\"$\",\"p\",null,{\"className\":\"mt-6 inline-flex flex-wrap items-center gap-x-4 gap-y-1 rounded-full border border-line-2 bg-black/40 px-4 py-2 font-mono text-xs text-mute\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare-2\",\"children\":\"void audit\"}],[[\"$\",\"span\",\"perf\",{\"children\":[\"perf\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}],[\"$\",\"span\",\"a11y\",{\"children\":[\"a11y\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}],[\"$\",\"span\",\"seo\",{\"children\":[\"seo\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"99\"}]]}],[\"$\",\"span\",\"geo\",{\"children\":[\"geo\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}]]]}]]}],[[\"$\",\"nav\",\"Product\",{\"aria-label\":\"Product\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"Product\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"/docs\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/docs\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Docs\"}]}],[\"$\",\"li\",\"/cli\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/cli\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"CLI reference\"}]}],[\"$\",\"li\",\"/rules\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/rules\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Rules\"}]}],[\"$\",\"li\",\"/directions\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/directions\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Directions\"}]}],[\"$\",\"li\",\"/evals\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/evals\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Evals\"}]}]]}]]}],[\"$\",\"nav\",\"For agents\",{\"aria-label\":\"For agents\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"For agents\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"/llms.txt\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/llms.txt\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"llms.txt\"}]}],[\"$\",\"li\",\"/llms-full.txt\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/llms-full.txt\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"llms-full.txt\"}]}],[\"$\",\"li\",\"/index.md\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/index.md\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"index.md\"}]}],[\"$\",\"li\",\"/sitemap.xml\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/sitemap.xml\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"sitemap.xml\"}]}]]}]]}],[\"$\",\"nav\",\"Source\",{\"aria-label\":\"Source\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"Source\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"https://github.com/ParthKapoor-dev/design\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/ParthKapoor-dev/design\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",\"https://github.com/ParthKapoor-dev/design/blob/main/LICENSE\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/ParthKapoor-dev/design/blob/main/LICENSE\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"MIT licence\"}]}],\"$L19\"]}]]}]]]}]\nc:[\"$\",\"p\",null,{\"aria-hidden\":\"true\",\"className\":\"wordmark relative mx-auto max-w-7xl select-none text-center font-semibold leading-[0.72] tracking-[-0.06em] text-[clamp(6rem,24vw,22rem)]\",\"children\":\"void\"}]\nd:[\"$\",\"div\",null,{\"className\":\"relative mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 border-t border-line py-6 font-mono text-xs text-mute\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"© 2026 \",\"Parth Kapoor\",\" · \",\"MIT\"]}],[\"$\",\"span\",null,{\"children\":\"void-design.vercel.app\"}]]}]\ne:[\"$\",\"div\",null,{\"className\":\"grain\",\"aria-hidden\":\"true\"}]\nf:[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@graph\\\":[{\\\"@type\\\":\\\"Organization\\\",\\\"@id\\\":\\\"https://void-design.vercel.app/#organization\\\",\\\"name\\\":\\\"void\\\",\\\"url\\\":\\\"https://void-design.vercel.app/\\\",\\\"logo\\\":\\\"https://void-design.vercel.app/icon-512.png\\\",\\\"sameAs\\\":[\\\"https://github.com/ParthKapoor-dev/design\\\"]},{\\\"@type\\\":\\\"WebSite\\\",\\\"@id\\\":\\\"https://void-design.vercel.app/#website\\\",\\\"name\\\":\\\"void\\\",\\\"url\\\":\\\"https://void-design.vercel.app/\\\",\\\"description\\\":\\\"void is an open-source design system for AI coding agents: Claude Code skills, Tailwind v4 tokens and a CLI that audits speed, accessibility, SEO and design.\\\",\\\"inLanguage\\\":\\\"en\\\",\\\"publisher\\\":{\\\"@id\\\":\\\"https://void-design.vercel.app/#organization\\\"}}]}\"}}]\n10:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/1635pnmauuvxi.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[[\"$\",\"a\",null,{\"href\":\"#main\",\"className\":\"sr-only z-[60] rounded-full bg-flare px-4 py-2 text-sm font-medium text-black focus:not-sr-only focus:fixed focus:left-4 focus:top-4\",\"children\":\"Skip to content\"}],[\"$\",\"$L7\",null,{}],[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"children\":[\"$\",\"$L8\",null,{}]}],[\"$\",\"main\",null,{\"id\":\"main\",\"className\":\"page-shell relative\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"$L7\",null,{}],[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"children\":[\"$\",\"$L8\",null,{}]}],[\"$\",\"main\",null,{\"id\":\"main\",\"className\":\"page-shell relative px-(--gutter)\",\"children\":[\"$\",\"$L9\",null,{\"scene\":\"snow\",\"crumbs\":[{\"name\":\"void\",\"path\":\"/\"},{\"name\":\"404\"}],\"kicker\":\"HTTP 404 · noindex\",\"title\":[\"Nothing measured \",[\"$\",\"span\",null,{\"className\":\"serif hot\",\"children\":\"at this address.\"}]],\"lead\":\"The link may be old, or a rule id was renamed. Everything that exists is one of these.\",\"children\":[\"$\",\"div\",null,{\"className\":\"enter mt-10 max-w-xl overflow-hidden rounded-2xl border border-line-2 bg-black/60 font-mono text-sm backdrop-blur-md\",\"style\":{\"--d\":\"0.45s\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"flex h-10 items-center justify-between border-b border-line px-4\",\"children\":[[\"$\",\"span\",null,{\"className\":\"label-mono text-fg-subtle\",\"children\":\"~/void\"}],[\"$\",\"span\",null,{\"className\":\"label-mono text-danger\",\"children\":\"exit 3\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 py-4 leading-7\",\"children\":[[\"$\",\"p\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",[\"$\",\"span\",null,{\"className\":\"text-fg\",\"children\":\"curl -sI this-page\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-fg-muted\",\"children\":[\"HTTP/2 \",[\"$\",\"span\",null,{\"className\":\"text-danger\",\"children\":\"404\"}]]}],[\"$\",\"p\",null,{\"className\":\"mt-3 text-fg-subtle\",\"children\":\"# try one of these\"}],[\"$\",\"ul\",null,{\"children\":[[\"$\",\"li\",\"/docs\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/docs\",\"className\":\"group flex min-h-7 flex-wrap items-center gap-x-3 text-fg transition-colors hover:text-brand-text\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",\"cd /docs\"]}],[\"$\",\"span\",null,{\"className\":\"text-fg-subtle group-hover:text-fg-muted\",\"children\":[\"# \",\"install, the starter, the skills\"]}]]}]}],[\"$\",\"li\",\"/rules\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/rules\",\"className\":\"group flex min-h-7 flex-wrap items-center gap-x-3 text-fg transition-colors hover:text-brand-text\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",\"void rules\"]}],[\"$\",\"span\",null,{\"className\":\"text-fg-subtle group-hover:text-fg-muted\",\"children\":[\"# \",\"every rule id the CLI can print\"]}]]}]}],[\"$\",\"li\",\"/cli\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/cli\",\"className\":\"group flex min-h-7 flex-wrap items-center gap-x-3 text-fg transition-colors hover:text-brand-text\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",\"void --help\"]}],[\"$\",\"span\",null,{\"className\":\"text-fg-subtle group-hover:text-fg-muted\",\"children\":[\"# \",\"commands, flags and exit codes\"]}]]}]}],[\"$\",\"li\",\"/\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"group flex min-h-7 flex-wrap items-center gap-x-3 text-fg transition-colors hover:text-brand-text\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare\",\"children\":\"$$\"}],\" \",\"cd ~\"]}],[\"$\",\"span\",null,{\"className\":\"text-fg-subtle group-hover:text-fg-muted\",\"children\":[\"# \",\"home\"]}]]}]}]]}]]}]]}]}]}],[\"$\",\"footer\",null,{\"className\":\"relative mt-24 overflow-hidden border-t border-line px-(--gutter)\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"pointer-events-none absolute -bottom-[40vw] left-1/2 size-[80vw] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,color-mix(in_oklab,var(--flare)_12%,transparent),transparent)]\"}],[\"$\",\"div\",null,{\"className\":\"relative mx-auto grid max-w-7xl gap-12 py-16 md:grid-cols-12 md:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"md:col-span-5\",\"children\":[[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center gap-2.5 text-ink\",\"aria-label\":\"void home\",\"children\":[\"$L1a\",\"$L1b\"]}],\"$L1c\",\"$L1d\"]}],[\"$L1e\",\"$L1f\",\"$L20\"]]}],\"$L21\",\"$L22\"]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],\"$L23\",\"$L24\"]]}]\n11:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n12:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n13:[\"$\",\"$1\",\"c\",{\"children\":[\"$L25\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/10-jx0r2jtr5s.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/2-9e3j82g4al3.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/immutable/chunks/15spxoq7fze2b.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L26\",null,{\"children\":[\"$\",\"$27\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@28\"}]}]]}]\n15:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L29\",null,{\"children\":\"$L2a\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L2b\",null,{\"children\":[\"$\",\"$27\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L2c\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n17:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0qj2_6xwr7iux.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n31:I[5246,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\",\"/_next/static/immutable/chunks/1635pnmauuvxi.js\"],\"CopyDelegate\"]\n14:C\n19:[\"$\",\"li\",\"https://parthkapoor.me\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://parthkapoor.me\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Parth Kapoor\"}]}]\n1a:[\"$\",\"$L18\",null,{\"className\":\"size-6\"}]\n1b:[\"$\",\"span\",null,{\"className\":\"text-lg font-medium tracking-tight\",\"children\":\"void\"}]\n1c:[\"$\",\"p\",null,{\"className\":\"mt-4 max-w-[44ch] text-mute\",\"children\":\"A design system for AI coding agents. This site is built with it and audited by it on every change.\"}]\n1d:[\"$\",\"p\",null,{\"className\":\"mt-6 inline-flex flex-wrap items-center gap-x-4 gap-y-1 rounded-full border border-line-2 bg-black/40 px-4 py-2 font-mono text-xs text-mute\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare-2\",\"children\":\"void audit\"}],[[\"$\",\"span\",\"perf\",{\"children\":[\"perf\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}],[\"$\",\"span\",\"a11y\",{\"children\":[\"a11y\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}],[\"$\",\"span\",\"seo\",{\"children\":[\"seo\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"99\"}]]}],[\"$\",\"span\",\"geo\",{\"children\":[\"geo\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}]]]}]\n1e:[\"$\",\"nav\",\"Product\",{\"aria-label\":\"Product\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"Product\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"/docs\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/docs\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Docs\"}]}],[\"$\",\"li\",\"/cli\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/cli\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"CLI reference\"}]}],[\"$\",\"li\",\"/rules\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/rules\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Rules\"}]}],[\"$\",\"li\",\"/directions\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/directions\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Directions\"}]}],[\"$\",\"li\",\"/evals\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/evals\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Evals\"}]}]]}]]}]\n1f:[\"$\",\"nav\",\"For agents\",{\"aria-label\":\"For agents\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"For agents\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"/llms.txt\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/llms.txt\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"llms.txt\"}]}],[\"$\",\"li\",\"/llms-full.txt\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/llms-full.txt\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"llms-full.txt\"}]}],[\"$\",\"li\",\"/index.md\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/index.md\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"index.md\"}]}],[\"$\",\"li\",\"/sitemap.xml\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/sitemap.xml\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"sitemap.xml\"}]}]]}]]}]\n20:[\"$\",\"nav\",\"Source\",{\"aria-label\":\"Source\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"Source\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"https://github.com/ParthKapoor-dev/design\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/ParthKapoor-dev/design\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"GitHub\"}]}],[\"$\",\"li\",\"https://github.com/ParthKapoor-dev/design/blob/main/LICENSE\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/ParthKapoor-dev/design/blob/main/LICENSE\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"MIT licence\"}]}],[\"$\",\"li\",\"https://parthkapoor.me\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://parthkapoor.me\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Parth Kapoor\"}]}]]}]]}]\n21:[\"$\",\"p\",null,{\"aria-hidden\":\"true\",\"className\":\"wordmark relative mx-auto max-w-7xl select-none text-center font-semibold leading-[0.72] tracking-[-0.06em] text-[clamp(6rem,24vw,22rem)]\",\"children\":\"void\"}]\n22:[\"$\",\"div\",null,{\"className\":\"relative mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 border-t border-line py-6 font-mono text-xs text-mute\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"© 2026 \",\"Parth Kapoor\",\" · \",\"MIT\"]}],[\"$\",\"span\",null,{\"children\":\"void-design.vercel.app\"}]]}]\n23:[\"$\",\"footer\",null,{\"className\":\"relative mt-24 overflow-hidden border-t border-line px-(--gutter)\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"pointer-events-none absolute -bottom-[40vw] left-1/2 size-[80vw] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,color-mix(in_oklab,var(--flare)_12%,transparent),transparent)]\"}],[\"$\",\"div\",null,{\"className\":\"relative mx-auto grid max-w-7xl gap-12 py-16 md:grid-cols-12 md:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"md:col-span-5\",\"children\":[[\"$\",\"$La\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center gap-2.5 text-ink\",\"aria-label\":\"void home\",\"children\":[[\"$\",\"$L18\",null,{\"className\":\"size-6\"}],[\"$\",\"span\",null,{\"className\":\"text-lg font-medium tracking-tight\",\"children\":\"void\"}]]}],[\"$\",\"p\",null,{\"className\":\"mt-4 max-w-[44ch] text-mute\",\"children\":\"A design system for AI coding agents. This site is built with it and audited by it on every change.\"}],[\"$\",\"p\",null,{\"className\":\"mt-6 inline-flex flex-wrap items-center gap-x-4 gap-y-1 rounded-full border border-line-2 bg-black/40 px-4 py-2 font-mono text-xs text-mute\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-flare-2\",\"children\":\"void audit\"}],[[\"$\",\"span\",\"perf\",{\"children\":[\"perf\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}],[\"$\",\"span\",\"a11y\",{\"children\":[\"a11y\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}],[\"$\",\"span\",\"seo\",{\"children\":[\"seo\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"99\"}]]}],[\"$\",\"span\",\"geo\",{\"children\":[\"geo\",\" \",[\"$\",\"span\",null,{\"className\":\"text-ink tabular-nums\",\"children\":\"100\"}]]}]]]}]]}],[[\"$\",\"nav\",\"Product\",{\"aria-label\":\"Product\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"Product\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"/docs\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/docs\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Docs\"}]}],[\"$\",\"li\",\"/cli\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/cli\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"CLI reference\"}]}],[\"$\",\"li\",\"/rules\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/rules\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Rules\"}]}],[\"$\",\"li\",\"/directions\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/directions\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Directions\"}]}],[\"$\",\"li\",\"/evals\",{\"children\":[\"$\",\"$La\",null,{\"href\":\"/evals\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Evals\"}]}]]}]]}],[\"$\",\"nav\",\"For agents\",{\"aria-label\":\"For agents\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"For agents\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"/llms.txt\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/llms.txt\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"llms.txt\"}]}],[\"$\",\"li\",\"/llms-full.txt\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/llms-full.txt\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"llms-full.txt\"}]}],[\"$\",\"li\",\"/index.md\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/index.md\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"index.md\"}]}],[\"$\",\"li\",\"/sitemap.xml\",{\"children\":[\"$\",\"a\",null,{\"href\":\"/sitemap.xml\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"sitemap.xml\"}]}]]}]]}],[\"$\",\"nav\",\"Source\",{\"aria-label\":\"Source\",\"className\":\"md:col-span-2 md:first-of-type:col-start-7\",\"children\":[[\"$\",\"p\",null,{\"className\":\"kicker\",\"children\":\"Source\"}],[\"$\",\"ul\",null,{\"className\":\"mt-4 grid gap-2\",\"children\":[[\"$\",\"li\",\"https://github.com/ParthKapoor-dev/design\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/ParthKapoor-dev/design\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"GitHub\"}]}],\"$L2d\",\"$L2e\"]}]]}]]]}],\"$L2f\",\"$L30\"]}]\n24:[\"$\",\"$L31\",null,{}]\n2d:[\"$\",\"li\",\"https://github.com/ParthKapoor-dev/design/blob/main/LICENSE\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/ParthKapoor-dev/design/blob/main/LICENSE\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"MIT licence\"}]}]\n2e:[\"$\",\"li\",\"https://parthkapoor.me\",{\"children\":[\"$\",\"a\",null,{\"href\":\"https://parthkapoor.me\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex min-h-6 items-center text-sm text-mute transition-colors hover:text-ink\",\"children\":\"Parth Kapoor\"}]}]\n2f:[\"$\",\"p\",null,{\"aria-hidden\":\"true\",\"className\":\"wordmark relative mx-auto max-w-7xl select-none text-center font-semibold leading-[0.72] tracking-[-0.06em] text-[clamp(6rem,24vw,22rem)]\",\"children\":\"void\"}]\n30:[\"$\",\"div\",null,{\"className\":\"relative mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 border-t border-line py-6 font-mono text-xs text-mute\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"© 2026 \",\"Parth Kapoor\",\" · \",\"MIT\"]}],[\"$\",\"span\",null,{\"children\":\"void-design.vercel.app\"}]]}]\n33:I[50835,[\"/_next/static/immutable/chunks/3kyyc8_ntqnp4.js\",\"/_next/static/immutable/chunks/1635pnmauuvxi.js\",\"/_next/static/immutable/chunks/10-jx0r2jtr5s.js\",\"/_next/static/immutable/chunks/2-9e3j82g4al3.js\",\"/_next/static/immutable/chunks/15spxoq7fze2b.js\"],\"DocsNav\"]\n32:T5c3,{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https://void-design.vercel.app/docs/speed#webpage\",\"url\":\"https://void-design.vercel.app/docs/speed\",\"name\":\"speed skill: fast to load, smooth to use\",\"description\":\"Performance and smoothness rules for websites and web apps. Covers Core Web Vitals (LCP, INP, CLS), JS/CSS/font/image budgets, Server Components vs 'use…\",\"isPartOf\":{\"@id\":\"https://void-design.vercel.app/#website\"},\"inLanguage\":\"en\",\"dateModified\":\"2026-09-16\"},{\"@type\":\"TechArticle\",\"@id\":\"https://void-design.vercel.app/docs/speed#article\",\"headline\":\"speed skill: fast to load, smooth to use\",\"description\":\"Performance and smoothness rules for websites and web apps. Covers Core Web Vitals (LCP, INP, CLS), JS/CSS/font/image budgets, Server Components vs 'use…\",\"datePublished\":\"2026-09-16\",\"dateModified\":\"2026-09-16\",\"mainEntityOfPage\":{\"@id\":\"https://void-design.vercel.app/docs/speed#webpage\"},\"author\":{\"@id\":\"https://void-design.vercel.app/#organization\"},\"publisher\":{\"@id\":\"https://void-design.vercel.app/#organization\"},\"image\":[\"https://void-design.vercel.app/docs/speed/opengraph-image\"]},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"void\",\"item\":\"https://void-design.vercel.app/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"docs\",\"item\":\"https://void-design.vercel.app/docs\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"speed\",\"item\":\"https://void-design.vercel.app/docs/speed\"}]}]}25:[\"$\",\"div\",null,{\"className\":\"px-(--gutter)\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$32\"}}],[\"$\",\"$L9\",null,{\"crumbs\":[{\"name\":\"void\",\"path\":\"/\"},{\"name\":\"docs\",\"path\":\"/docs\"},{\"name\":\"speed\",\"path\":\"/docs/speed\"}],\"kicker\":\"Skill · 06 of 09\",\"title\":[\"$\",\"span\",null,{\"className\":\"block text-[clamp(2.4rem,5.6vw,5.8rem)] leading-[0.95]\",\"children\":[\"speed\",[\"$\",\"span\",null,{\"className\":\"serif text-mute\",\"children\":[\" \",\"fast to load, smooth to use\"]}]]}],\"lead\":\"Performance and smoothness rules for websites and web apps. Covers Core Web Vitals (LCP, INP, CLS), JS/CSS/font/image budgets, Server Components vs 'use…\",\"meta\":[[\"$\",\"span\",null,{\"children\":[\"skills/\",\"speed\",\"/SKILL.md\"]}],[\"$\",\"span\",null,{\"children\":[153,\" lines\"]}],[\"$\",\"span\",null,{\"children\":[4,\" references\"]}],[\"$\",\"span\",null,{\"children\":[\"updated \",\"16 Sept 2026\"]}]],\"scene\":\"ether\"}],[\"$\",\"div\",null,{\"className\":\"mx-auto grid max-w-7xl gap-x-12 lg:grid-cols-[13rem_minmax(0,1fr)] xl:grid-cols-[13rem_minmax(0,1fr)_12rem]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"lg:hidden\",\"children\":[\"$\",\"button\",null,{\"type\":\"button\",\"popoverTarget\":\"docs-nav\",\"className\":\"flex h-11 w-full items-center gap-2.5 rounded-xl border border-line bg-bg-subtle px-4 text-sm text-fg transition-colors hover:border-line-strong\",\"children\":[[\"$\",\"svg\",null,{\"aria-hidden\":true,\"viewBox\":\"0 0 16 16\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.5,\"className\":\"size-4 text-fg-muted\",\"children\":[\"$\",\"path\",null,{\"d\":\"M2.5 5.5h11M2.5 10.5h11\",\"strokeLinecap\":\"round\"}]}],\"Browse docs\"]}]}],[\"$\",\"aside\",null,{\"id\":\"docs-nav\",\"aria-label\":\"Documentation sections\",\"popover\":\"auto\",\"data-lenis-prevent\":true,\"className\":\"docs-aside m-0 max-h-[80dvh] w-[min(20rem,calc(100vw-2rem))] overflow-y-auto overscroll-contain rounded-2xl border border-line bg-surface-raised p-5 text-fg shadow-3 [scrollbar-color:var(--line-strong)_transparent] [scrollbar-width:thin]\",\"children\":[\"$\",\"$L33\",null,{\"groups\":[{\"title\":\"Start\",\"items\":[{\"href\":\"/docs\",\"label\":\"Getting started\"},{\"href\":\"/cli\",\"label\":\"CLI reference\"},{\"href\":\"/rules\",\"label\":\"Rules\"},{\"href\":\"/directions\",\"label\":\"Directions\"}]},{\"title\":\"Skills\",\"items\":[{\"href\":\"/docs/website\",\"label\":\"website\"},{\"href\":\"/docs/website/copy-and-content\",\"label\":\"copy and content\",\"parent\":\"/docs/website\"},{\"href\":\"/docs/website/page-types\",\"label\":\"page types\",\"parent\":\"/docs/website\"},{\"href\":\"/docs/website/section-archetypes\",\"label\":\"section archetypes\",\"parent\":\"/docs/website\"},{\"href\":\"/docs/craft\",\"label\":\"craft\"},{\"href\":\"/docs/craft/anti-slop\",\"label\":\"anti slop\",\"parent\":\"/docs/craft\"},{\"href\":\"/docs/craft/color\",\"label\":\"color\",\"parent\":\"/docs/craft\"},{\"href\":\"/docs/craft/depth-and-detail\",\"label\":\"depth and detail\",\"parent\":\"/docs/craft\"},{\"href\":\"/docs/craft/directions\",\"label\":\"directions\",\"parent\":\"/docs/craft\"},{\"href\":\"/docs/craft/layout\",\"label\":\"layout\",\"parent\":\"/docs/craft\"},{\"href\":\"/docs/craft/tailwind-v4\",\"label\":\"tailwind v4\",\"parent\":\"/docs/craft\"},{\"href\":\"/docs/craft/typography\",\"label\":\"typography\",\"parent\":\"/docs/craft\"},{\"href\":\"/docs/motion\",\"label\":\"motion\"},{\"href\":\"/docs/motion/3d-scenes\",\"label\":\"3d scenes\",\"parent\":\"/docs/motion\"},{\"href\":\"/docs/motion/CREDITS\",\"label\":\"CREDITS\",\"parent\":\"/docs/motion\"},{\"href\":\"/docs/motion/backgrounds\",\"label\":\"backgrounds\",\"parent\":\"/docs/motion\"},{\"href\":\"/docs/motion/fallbacks\",\"label\":\"fallbacks\",\"parent\":\"/docs/motion\"},{\"href\":\"/docs/motion/recipes\",\"label\":\"recipes\",\"parent\":\"/docs/motion\"},{\"href\":\"/docs/motion/timing\",\"label\":\"timing\",\"parent\":\"/docs/motion\"},{\"href\":\"/docs/motion/webgl-canvas\",\"label\":\"webgl canvas\",\"parent\":\"/docs/motion\"},{\"href\":\"/docs/components\",\"label\":\"components\"},{\"href\":\"/docs/components/audit-checklist\",\"label\":\"audit checklist\",\"parent\":\"/docs/components\"},{\"href\":\"/docs/components/catalogue\",\"label\":\"catalogue\",\"parent\":\"/docs/components\"},{\"href\":\"/docs/components/recipes\",\"label\":\"recipes\",\"parent\":\"/docs/components\"},{\"href\":\"/docs/components/upstream-bugs\",\"label\":\"upstream bugs\",\"parent\":\"/docs/components\"},{\"href\":\"/docs/inspire\",\"label\":\"inspire\"},{\"href\":\"/docs/inspire/effect-downgrades\",\"label\":\"effect downgrades\",\"parent\":\"/docs/inspire\"},{\"href\":\"/docs/inspire/extraction-guide\",\"label\":\"extraction guide\",\"parent\":\"/docs/inspire\"},{\"href\":\"/docs/inspire/font-alternatives\",\"label\":\"font alternatives\",\"parent\":\"/docs/inspire\"},{\"href\":\"/docs/speed\",\"label\":\"speed\"},{\"href\":\"/docs/speed/images-fonts\",\"label\":\"images fonts\",\"parent\":\"/docs/speed\"},{\"href\":\"/docs/speed/next-performance\",\"label\":\"next performance\",\"parent\":\"/docs/speed\"},{\"href\":\"/docs/speed/react-pitfalls\",\"label\":\"react pitfalls\",\"parent\":\"/docs/speed\"},{\"href\":\"/docs/speed/rendering-smoothness\",\"label\":\"rendering smoothness\",\"parent\":\"/docs/speed\"},{\"href\":\"/docs/seo\",\"label\":\"seo\"},{\"href\":\"/docs/seo/ai-crawlers\",\"label\":\"ai crawlers\",\"parent\":\"/docs/seo\"},{\"href\":\"/docs/seo/content-for-citation\",\"label\":\"content for citation\",\"parent\":\"/docs/seo\"},{\"href\":\"/docs/seo/llms-txt-markdown\",\"label\":\"llms txt markdown\",\"parent\":\"/docs/seo\"},{\"href\":\"/docs/seo/next-metadata\",\"label\":\"next metadata\",\"parent\":\"/docs/seo\"},{\"href\":\"/docs/seo/structured-data\",\"label\":\"structured data\",\"parent\":\"/docs/seo\"},{\"href\":\"/docs/a11y\",\"label\":\"a11y\"},{\"href\":\"/docs/a11y/patterns\",\"label\":\"patterns\",\"parent\":\"/docs/a11y\"},{\"href\":\"/docs/audit\",\"label\":\"audit\"},{\"href\":\"/docs/audit/ci\",\"label\":\"ci\",\"parent\":\"/docs/audit\"},{\"href\":\"/docs/audit/commands\",\"label\":\"commands\",\"parent\":\"/docs/audit\"}]}]}]}],\"$L34\",\"$L35\"]}]]}]\n36:T6707,\u003cp\u003eTargets are for a mid-range phone on Slow 4G (Lighthouse mobile: 150 ms RTT, 1.6 Mbps, 4x CPU).\nVerify every claim with \u003ccode\u003evoid perf\u003c/code\u003e and \u003ccode\u003evoid smooth\u003c/code\u003e against a \u003cstrong\u003eproduction build\u003c/strong\u003e (see the \u003ca class=\"code-link\" href=\"/docs/audit\"\u003e\u003ccode\u003eaudit\u003c/code\u003e\u003c/a\u003e skill).\u003c/p\u003e\n\u003ch2 id=\"the-10-rules-that-matter-most\"\u003e\u003ca class=\"heading-anchor\" href=\"#the-10-rules-that-matter-most\"\u003eThe 10 rules that matter most\u003c/a\u003e\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eServer-render by default.\u003c/strong\u003e \u003ccode\u003e'use client'\u003c/code\u003e only on leaf components that need state, effects or event handlers. Never on \u003ccode\u003epage.tsx\u003c/code\u003e or \u003ccode\u003elayout.tsx\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eThe LCP element is in the initial HTML and visible at first paint.\u003c/strong\u003e No \u003ccode\u003eloading=\"lazy\"\u003c/code\u003e, no \u003ccode\u003eopacity:0\u003c/code\u003e entrance, no CSS \u003ccode\u003ebackground-image\u003c/code\u003e, no \u003ccode\u003e\u003cSuspense\u003e\u003c/code\u003e waiting for data around it.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eOne high-priority image per route:\u003c/strong\u003e \u003ccode\u003efetchPriority=\"high\"\u003c/code\u003e + \u003ccode\u003eloading=\"eager\"\u003c/code\u003e (or \u003ccode\u003epreload\u003c/code\u003e) on \u003ccode\u003enext/image\u003c/code\u003e. \u003ccode\u003epriority\u003c/code\u003e is deprecated in Next 16. Never use it.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eEvery \u003ccode\u003e\u003cimg\u003e\u003c/code\u003e, \u003ccode\u003e\u003cvideo\u003e\u003c/code\u003e, \u003ccode\u003e\u003ciframe\u003e\u003c/code\u003e, \u003ccode\u003e\u003ccanvas\u003e\u003c/code\u003e has \u003ccode\u003ewidth\u003c/code\u003e+\u003ccode\u003eheight\u003c/code\u003e or \u003ccode\u003easpect-ratio\u003c/code\u003e.\u003c/strong\u003e Late UI (banners, toasts, consent) is \u003ccode\u003eposition: fixed\u003c/code\u003e or has reserved \u003ccode\u003emin-height\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMarketing routes: ≤ 170 KB gzip first-load JS\u003c/strong\u003e (Next\u0026#39;s own baseline is ~133 KB, so you have ~40 KB). App routes ≤ 300 KB.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePrefer CSS over JS for motion.\u003c/strong\u003e Animate only \u003ccode\u003etransform\u003c/code\u003e and \u003ccode\u003eopacity\u003c/code\u003e. If you need Motion, use \u003ccode\u003eLazyMotion\u003c/code\u003e + \u003ccode\u003em\u003c/code\u003e (+32 KB), never the full \u003ca class=\"code-link\" href=\"/docs/motion\"\u003e\u003ccode\u003emotion\u003c/code\u003e\u003c/a\u003e component (+46 KB).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFonts: ≤ 2 families, ≤ 4 files, \u003ccode\u003enext/font\u003c/code\u003e, variable WOFF2, \u003ccode\u003esubsets: ['latin']\u003c/code\u003e.\u003c/strong\u003e No Google Fonts \u003ccode\u003e\u003clink\u003e\u003c/code\u003e, no icon fonts.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eThird-party scripts load with \u003ccode\u003enext/script strategy=\"lazyOnload\"\u003c/code\u003e.\u003c/strong\u003e Chat widgets and video embeds get a static facade that loads the real thing on click.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eNo scroll listeners for effects.\u003c/strong\u003e Use \u003ccode\u003eIntersectionObserver\u003c/code\u003e or CSS scroll-driven animations. Touch/wheel listeners are \u003ccode\u003e{ passive: true }\u003c/code\u003e. No Lenis or other smooth-scroll libraries.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eEvery loop stops when unseen.\u003c/strong\u003e rAF, intervals and infinite CSS animations pause offscreen (\u003ccode\u003eIntersectionObserver\u003c/code\u003e) and when the tab is hidden (\u003ccode\u003evisibilitychange\u003c/code\u003e). At most one WebGL context per page.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"budgets\"\u003e\u003ca class=\"heading-anchor\" href=\"#budgets\"\u003eBudgets\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003e\u0026quot;Gate\u0026quot; = the \u003ccode\u003evoid perf\u003c/code\u003e default (\u003ccode\u003ekind: \"marketing\"\u003c/code\u003e or \u003ccode\u003e\"app\"\u003c/code\u003e in \u003ccode\u003evoid.config.ts\u003c/code\u003e); exceeding it fails the run. \u0026quot;Target\u0026quot; = what a polished marketing page should reach.\u003c/p\u003e\n\u003cdiv class=\"table-wrap\" tabindex=\"0\" role=\"region\" aria-label=\"Table 1\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eMetric (mobile lab, median of runs)\u003c/th\u003e\n\u003cth\u003eMarketing gate\u003c/th\u003e\n\u003cth\u003eMarketing target\u003c/th\u003e\n\u003cth\u003eApp gate\u003c/th\u003e\n\u003cth\u003eRule id\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\u003ctr\u003e\n\u003ctd\u003eLCP\u003c/td\u003e\n\u003ctd\u003e≤ 2.5 s (desktop ≤ 1.5 s)\u003c/td\u003e\n\u003ctd\u003edesktop ≤ 1.2 s\u003c/td\u003e\n\u003ctd\u003e≤ 2.5 s\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/lcp-slow\"\u003e\u003ccode\u003eperf/lcp-slow\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eTBT (lab proxy for INP)\u003c/td\u003e\n\u003ctd\u003e≤ 200 ms\u003c/td\u003e\n\u003ctd\u003e≤ 100 ms\u003c/td\u003e\n\u003ctd\u003e≤ 300 ms\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/tbt-high\"\u003e\u003ccode\u003eperf/tbt-high\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eINP (scripted interactions)\u003c/td\u003e\n\u003ctd\u003e≤ 200 ms\u003c/td\u003e\n\u003ctd\u003e≤ 100 ms desktop (unthrottled)\u003c/td\u003e\n\u003ctd\u003e≤ 200 ms\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/smooth/inp-slow\"\u003e\u003ccode\u003esmooth/inp-slow\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eCLS\u003c/td\u003e\n\u003ctd\u003e≤ 0.1\u003c/td\u003e\n\u003ctd\u003e≤ 0.05 after full scroll\u003c/td\u003e\n\u003ctd\u003e≤ 0.1\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/cls-high\"\u003e\u003ccode\u003eperf/cls-high\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/smooth/layout-shift-on-scroll\"\u003e\u003ccode\u003esmooth/layout-shift-on-scroll\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eTTFB\u003c/td\u003e\n\u003ctd\u003e≤ 800 ms\u003c/td\u003e\n\u003ctd\u003e≤ 600 ms\u003c/td\u003e\n\u003ctd\u003e≤ 800 ms\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/ttfb-slow\"\u003e\u003ccode\u003eperf/ttfb-slow\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eJS transfer at load\u003c/td\u003e\n\u003ctd\u003e≤ 170 KB\u003c/td\u003e\n\u003ctd\u003e≤ 40 KB above the framework\u003c/td\u003e\n\u003ctd\u003e≤ 300 KB\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/js-budget\"\u003e\u003ccode\u003eperf/js-budget\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eCSS transfer\u003c/td\u003e\n\u003ctd\u003e≤ 25 KB\u003c/td\u003e\n\u003ctd\u003e—\u003c/td\u003e\n\u003ctd\u003e≤ 40 KB\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/css-budget\"\u003e\u003ccode\u003eperf/css-budget\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eFonts\u003c/td\u003e\n\u003ctd\u003e≤ 120 KB, ≤ 2 families, ≤ 4 files\u003c/td\u003e\n\u003ctd\u003e≤ 2 files preloaded\u003c/td\u003e\n\u003ctd\u003esame\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/font-budget\"\u003e\u003ccode\u003eperf/font-budget\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/perf/too-many-fonts\"\u003e\u003ccode\u003eperf/too-many-fonts\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eImages at load (total)\u003c/td\u003e\n\u003ctd\u003e≤ 1,000 KB\u003c/td\u003e\n\u003ctd\u003eLCP image ≤ 150 KB\u003c/td\u003e\n\u003ctd\u003e—\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/image-budget\"\u003e\u003ccode\u003eperf/image-budget\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eHTML document\u003c/td\u003e\n\u003ctd\u003e≤ 30 KB\u003c/td\u003e\n\u003ctd\u003e—\u003c/td\u003e\n\u003ctd\u003e≤ 60 KB\u003c/td\u003e\n\u003ctd\u003e—\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eDropped frames while scrolling\u003c/td\u003e\n\u003ctd\u003e≤ 5%\u003c/td\u003e\n\u003ctd\u003e0 ms long-frame blocking\u003c/td\u003e\n\u003ctd\u003e≤ 5%\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/smooth/scroll-jank\"\u003e\u003ccode\u003esmooth/scroll-jank\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/smooth/long-frames-during-scroll\"\u003e\u003ccode\u003esmooth/long-frames-during-scroll\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eDOM\u003c/td\u003e\n\u003ctd\u003e≤ 1,400 elements, depth ≤ 32\u003c/td\u003e\n\u003ctd\u003e—\u003c/td\u003e\n\u003ctd\u003esame\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/dom-size\"\u003e\u003ccode\u003eperf/dom-size\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eLighthouse performance (\u003ccode\u003e--lighthouse\u003c/code\u003e)\u003c/td\u003e\n\u003ctd\u003e≥ 90\u003c/td\u003e\n\u003ctd\u003e—\u003c/td\u003e\n\u003ctd\u003e≥ 80\u003c/td\u003e\n\u003ctd\u003e\u003ca class=\"code-link\" href=\"/rules/perf/lighthouse-score-low\"\u003e\u003ccode\u003eperf/lighthouse-score-low\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003eNext\u0026#39;s own framework baseline is ~133 KB gzip, so a marketing page has ~40 KB for its own client code. Astro/static pages with no framework runtime: ≤ 50 KB JS (islands only). Override budgets in \u003ccode\u003evoid.config.ts\u003c/code\u003e (see the \u003ca class=\"code-link\" href=\"/docs/audit\"\u003e\u003ccode\u003eaudit\u003c/code\u003e\u003c/a\u003e skill).\u003c/p\u003e\n\u003ch2 id=\"before-adding-any-client-js-ask-in-order\"\u003e\u003ca class=\"heading-anchor\" href=\"#before-adding-any-client-js-ask-in-order\"\u003eBefore adding any client JS, ask in order\u003c/a\u003e\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eCan HTML/CSS do it?\u003c/strong\u003e \u003ccode\u003e\u003cdetails\u003e\u003c/code\u003e, \u003ccode\u003e\u003cdialog\u003e\u003c/code\u003e, \u003ccode\u003epopover\u003c/code\u003e, \u003ccode\u003e:has()\u003c/code\u003e, \u003ccode\u003e@starting-style\u003c/code\u003e, CSS transitions, scroll-snap. Then write zero JS.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCan the server do it?\u003c/strong\u003e Markdown, syntax highlighting (Shiki at build time), charts as static SVG, date formatting, icons (lucide in a Server Component costs ~1 KB). Then do it in a Server Component.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eIs it needed at first paint?\u003c/strong\u003e No: \u003ccode\u003enext/dynamic\u003c/code\u003e (inside a client component) mounted on interaction or visibility.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eIs it a third party?\u003c/strong\u003e \u003ccode\u003elazyOnload\u003c/code\u003e or a facade. Never synchronous in \u003ccode\u003e\u003chead\u003e\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDoes it add \u0026gt; 5 KB gzip?\u003c/strong\u003e Check the size (bundlephobia, \u003ccode\u003enext experimental-analyze\u003c/code\u003e) and find a lighter option or cut it. Known costs: \u003ccode\u003ethree\u003c/code\u003e 140–160 KB, \u003ccode\u003eswiper\u003c/code\u003e ~40 KB, \u003ccode\u003ereact-markdown\u003c/code\u003e ~50 KB, Prism/\u003ccode\u003ereact-syntax-highlighter\u003c/code\u003e ~250 KB, \u003ccode\u003elenis\u003c/code\u003e ~10 KB plus a permanent rAF loop.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eBanned in \u003ccode\u003e'use client'\u003c/code\u003e modules on marketing routes: \u003ccode\u003eprismjs\u003c/code\u003e, \u003ccode\u003ehighlight.js\u003c/code\u003e, \u003ccode\u003eshiki\u003c/code\u003e, \u003ccode\u003ereact-markdown\u003c/code\u003e, \u003ccode\u003eremark*\u003c/code\u003e, \u003ccode\u003erehype*\u003c/code\u003e, \u003ccode\u003emoment\u003c/code\u003e, \u003ccode\u003echart.js\u003c/code\u003e, \u003ccode\u003erecharts\u003c/code\u003e, \u003ccode\u003ed3\u003c/code\u003e, \u003ccode\u003eframer-motion\u003c/code\u003e, and the \u003ca class=\"code-link\" href=\"/docs/motion\"\u003e\u003ccode\u003emotion\u003c/code\u003e\u003c/a\u003e component (\u003ccode\u003eimport { motion } from \"motion/react\"\u003c/code\u003e; use \u003ccode\u003em\u003c/code\u003e from \u003ccode\u003emotion/react-m\u003c/code\u003e instead).\u003c/p\u003e\n\u003ch2 id=\"server-first-component-boundaries\"\u003e\u003ca class=\"heading-anchor\" href=\"#server-first-component-boundaries\"\u003eServer-first component boundaries\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003ePush \u003ccode\u003e'use client'\u003c/code\u003e down to the smallest interactive leaf (button, menu, carousel). Pass Server Components into client wrappers as \u003ccode\u003echildren\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eA Server Component imported from a \u003ccode\u003e'use client'\u003c/code\u003e file gets bundled as client code. Import it from a server parent and pass it down.\u003c/li\u003e\n\u003cli\u003ePass only the props the client needs. Whole CMS documents or ASTs get serialized twice: once into the HTML, once into the RSC payload.\u003c/li\u003e\n\u003cli\u003ePut slow data behind \u003ccode\u003e\u003cSuspense\u003e\u003c/code\u003e with a skeleton of the \u003cstrong\u003esame height\u003c/strong\u003e. Keep the hero and h1 outside it.\u003c/li\u003e\n\u003cli\u003ePages that can be static stay static (\u003ccode\u003e○\u003c/code\u003e in \u003ccode\u003enext build\u003c/code\u003e). Use \u003ccode\u003e'use cache'\u003c/code\u003e with \u003ccode\u003ecacheComponents: true\u003c/code\u003e for cached dynamic data.\u003c/li\u003e\n\u003cli\u003eDetails and code: \u003ca class=\"code-link\" href=\"/docs/speed/next-performance\"\u003e\u003ccode\u003ereferences/next-performance.md\u003c/code\u003e\u003c/a\u003e. Hook and effect bugs: \u003ca class=\"code-link\" href=\"/docs/speed/react-pitfalls\"\u003e\u003ccode\u003ereferences/react-pitfalls.md\u003c/code\u003e\u003c/a\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"lcp-recipe\"\u003e\u003ca class=\"heading-anchor\" href=\"#lcp-recipe\"\u003eLCP recipe\u003c/a\u003e\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003eKnow the LCP element. On marketing pages it is the hero image or the h1. A \u003cstrong\u003etypographic hero is cheaper\u003c/strong\u003e (it only needs HTML, CSS and the font).\u003c/li\u003e\n\u003cli\u003eServe it from static or prerendered HTML behind a CDN. TTFB is about 40% of LCP.\u003c/li\u003e\n\u003cli\u003eImage hero: a static import plus \u003ccode\u003efill sizes=\"100vw\" fetchPriority=\"high\" loading=\"eager\"\u003c/code\u003e, AVIF/WebP, ≤ 150 KB on mobile. Every other image stays lazy with an accurate \u003ccode\u003esizes\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eDon\u0026#39;t hide it. An element at \u003ccode\u003eopacity:0\u003c/code\u003e is not an LCP candidate until it becomes visible. Animate secondary elements, or start the hero from a visible state.\u003c/li\u003e\n\u003cli\u003eNo render-blocking third parties before it. With \u003ccode\u003enext/font\u003c/code\u003e and \u003ccode\u003enext/image\u003c/code\u003e everything is same-origin, so you need zero \u003ccode\u003epreconnect\u003c/code\u003es.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eRecipes: \u003ca class=\"code-link\" href=\"/docs/speed/images-fonts\"\u003e\u003ccode\u003ereferences/images-fonts.md\u003c/code\u003e\u003c/a\u003e. Ids: \u003ca class=\"code-link\" href=\"/rules/perf/lcp-image-lazy\"\u003e\u003ccode\u003eperf/lcp-image-lazy\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/perf/lcp-image-no-priority\"\u003e\u003ccode\u003eperf/lcp-image-no-priority\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/perf/lcp-background-image\"\u003e\u003ccode\u003eperf/lcp-background-image\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/perf/image-oversized\"\u003e\u003ccode\u003eperf/image-oversized\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/perf/image-legacy-format\"\u003e\u003ccode\u003eperf/image-legacy-format\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/perf/render-blocking\"\u003e\u003ccode\u003eperf/render-blocking\u003c/code\u003e\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"inp-recipe-every-click-tap-key-next-frame-200-ms\"\u003e\u003ca class=\"heading-anchor\" href=\"#inp-recipe-every-click-tap-key-next-frame-200-ms\"\u003eINP recipe (every click/tap/key → next frame ≤ 200 ms)\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eShip less JS (above). Hydration cost scales with the size of the client component tree.\u003c/li\u003e\n\u003cli\u003eHandlers: do the visual acknowledgement synchronously (toggle a class or pending state), then \u003ccode\u003eawait yieldToMain()\u003c/code\u003e, then do the heavy work, analytics or network.\u003c/li\u003e\n\u003cli\u003eUse \u003ccode\u003estartTransition\u003c/code\u003e for non-urgent state updates (filters, tab content). Use \u003ccode\u003euseDeferredValue\u003c/code\u003e for expensive renders driven by typing.\u003c/li\u003e\n\u003cli\u003eNo long task \u0026gt; 50 ms after any interaction. Split loops with \u003ccode\u003escheduler.yield()\u003c/code\u003e (Safari needs the \u003ccode\u003esetTimeout\u003c/code\u003e fallback).\u003c/li\u003e\n\u003cli\u003ePer-frame values (pointer position, scroll progress) never go through React state. Write them to the DOM, a CSS variable on the element itself, or a MotionValue.\u003c/li\u003e\n\u003cli\u003eConsider \u003ccode\u003ereactCompiler: true\u003c/code\u003e in \u003ccode\u003enext.config.ts\u003c/code\u003e for app routes with heavy re-renders.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cfigure class=\"code-block\" data-lang=\"ts\"\u003e\u003cfigcaption\u003e\u003cspan\u003ets\u003c/span\u003e\u003cbutton type=\"button\" class=\"copy-button\" data-copy\u003eCopy\u003c/button\u003e\u003c/figcaption\u003e\u003cpre tabindex=\"0\" aria-label=\"ts code\" class=\"shiki void\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003eexport\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003e const\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-function)\"\u003e yieldToMain\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003e =\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e () \u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003e=\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e (globalThis \u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003eas\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-constant)\"\u003e any\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e).\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-constant)\"\u003escheduler\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e?.yield \u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003e?\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e (globalThis \u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003eas\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-constant)\"\u003e any\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e).\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-constant)\"\u003escheduler\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-function)\"\u003e.yield\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e() \u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003e:\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003e new\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-constant)\"\u003e Promise\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-constant)\"\u003evoid\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e\u003e((r) \u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-keyword)\"\u003e=\u003e\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-function)\"\u003e setTimeout\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e(r\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-punctuation)\"\u003e,\u003c/span\u003e\u003cspan style=\"color:var(--shiki-token-constant)\"\u003e 0\u003c/span\u003e\u003cspan style=\"color:var(--shiki-foreground)\"\u003e));\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/figure\u003e\n\u003ch2 id=\"cls-recipe\"\u003e\u003ca class=\"heading-anchor\" href=\"#cls-recipe\"\u003eCLS recipe\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eMedia: \u003ccode\u003ewidth\u003c/code\u003e/\u003ccode\u003eheight\u003c/code\u003e attributes or \u003ccode\u003easpect-ratio\u003c/code\u003e. \u003ccode\u003enext/image\u003c/code\u003e with \u003ccode\u003efill\u003c/code\u003e needs a sized, positioned parent. Id: \u003ca class=\"code-link\" href=\"/rules/perf/images-missing-dimensions\"\u003e\u003ccode\u003eperf/images-missing-dimensions\u003c/code\u003e\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eFonts: \u003ccode\u003enext/font\u003c/code\u003e keeps \u003ccode\u003eadjustFontFallback\u003c/code\u003e on. Outside Next, add a \u003ccode\u003esize-adjust\u003c/code\u003e fallback \u003ccode\u003e@font-face\u003c/code\u003e. \u003ccode\u003efont-display: swap\u003c/code\u003e or \u003ccode\u003eoptional\u003c/code\u003e, never \u003ccode\u003eblock\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eLate content: announcement bars are server-rendered; cookie banners and toasts are \u003ccode\u003efixed\u003c/code\u003e; ad and embed slots have \u003ccode\u003emin-height\u003c/code\u003e; skeletons match the final height within ±8 px.\u003c/li\u003e\n\u003cli\u003eNever animate \u003ccode\u003ewidth\u003c/code\u003e, \u003ccode\u003eheight\u003c/code\u003e, \u003ccode\u003etop\u003c/code\u003e, \u003ccode\u003eleft\u003c/code\u003e, \u003ccode\u003emargin\u003c/code\u003e or \u003ccode\u003epadding\u003c/code\u003e. For accordions use \u003ccode\u003egrid-template-rows: 0fr → 1fr\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003escrollbar-gutter: stable\u003c/code\u003e on \u003ccode\u003ehtml\u003c/code\u003e so modals and scroll locks don\u0026#39;t shift the page.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"images-fonts-third-parties-summary\"\u003e\u003ca class=\"heading-anchor\" href=\"#images-fonts-third-parties-summary\"\u003eImages, fonts, third parties (summary)\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003enext.config.ts\u003c/code\u003e: \u003ccode\u003eimages: { formats: ['image/avif', 'image/webp'] }\u003c/code\u003e. Next 16 only allows \u003ccode\u003equality\u003c/code\u003e 75 unless you add values to \u003ccode\u003eimages.qualities\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eBelow-the-fold: default lazy + \u003ccode\u003esizes\u003c/code\u003e (e.g. \u003ccode\u003esizes=\"(min-width: 1024px) 33vw, 100vw\"\u003c/code\u003e). Decorative images: \u003ccode\u003ealt=\"\"\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eVideo: \u003ccode\u003eposter\u003c/code\u003e, \u003ccode\u003epreload=\"none\"\u003c/code\u003e, no autoplay with sound. YouTube/Vimeo: a thumbnail facade with \u003ccode\u003easpect-ratio: 16/9\u003c/code\u003e that swaps in the iframe on click.\u003c/li\u003e\n\u003cli\u003eScripts: \u003ccode\u003ebeforeInteractive\u003c/code\u003e only for consent or bot detection, \u003ccode\u003eafterInteractive\u003c/code\u003e only for analytics you truly need at load, \u003ccode\u003elazyOnload\u003c/code\u003e for everything else. \u003ccode\u003estrategy=\"worker\"\u003c/code\u003e does not work in the App Router.\u003c/li\u003e\n\u003cli\u003eFonts: turn \u003ccode\u003eadjustFontFallback\u003c/code\u003e \u003cstrong\u003eoff\u003c/strong\u003e for monospace \u003ccode\u003enext/font/local\u003c/code\u003e (it scales Arial to ~131% and code renders oversized until the swap). Use \u003ccode\u003epreload: false\u003c/code\u003e on decorative or italic faces. Scope display fonts to the route layout that uses them.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"animation-and-smoothness\"\u003e\u003ca class=\"heading-anchor\" href=\"#animation-and-smoothness\"\u003eAnimation and smoothness\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eTiming, easing and choreography live in the \u003ca class=\"code-link\" href=\"/docs/motion\"\u003e\u003ccode\u003emotion\u003c/code\u003e\u003c/a\u003e skill. The performance rules:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eOnly \u003ccode\u003etransform\u003c/code\u003e and \u003ccode\u003eopacity\u003c/code\u003e. \u003ccode\u003efilter\u003c/code\u003e/\u003ccode\u003eclip-path\u003c/code\u003e on small elements only. No \u003ccode\u003ebackdrop-filter\u003c/code\u003e over large or scrolling areas (at most one blurred header). No \u003ccode\u003etransition: all\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eSet \u003ccode\u003ewill-change\u003c/code\u003e only while an animation runs, never globally, and on at most 3 elements.\u003c/li\u003e\n\u003cli\u003eScroll effects: CSS \u003ccode\u003eanimation-timeline: view()\u003c/code\u003e inside \u003ccode\u003e@supports (animation-timeline: view())\u003c/code\u003e, because Firefox lacks it and the page must look complete without it. Or use \u003ccode\u003eIntersectionObserver\u003c/code\u003e. At most one scroll-scrubbed set piece per page.\u003c/li\u003e\n\u003cli\u003eLong pages (\u0026gt; 3 viewports): \u003ccode\u003econtent-visibility: auto; contain-intrinsic-size: auto 800px\u003c/code\u003e on repeated below-fold sections. Never on the first viewport.\u003c/li\u003e\n\u003cli\u003eEvery animation respects \u003ccode\u003eprefers-reduced-motion: reduce\u003c/code\u003e and falls back to a finished static frame. Content is never hidden.\u003c/li\u003e\n\u003cli\u003eDetails: \u003ca class=\"code-link\" href=\"/docs/speed/rendering-smoothness\"\u003e\u003ccode\u003ereferences/rendering-smoothness.md\u003c/code\u003e\u003c/a\u003e. Ids: \u003ca class=\"code-link\" href=\"/rules/smooth/animate-layout-property\"\u003e\u003ccode\u003esmooth/animate-layout-property\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/smooth/transition-all\"\u003e\u003ccode\u003esmooth/transition-all\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/smooth/will-change-overuse\"\u003e\u003ccode\u003esmooth/will-change-overuse\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/smooth/reduced-motion-ignored\"\u003e\u003ccode\u003esmooth/reduced-motion-ignored\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/smooth/scroll-listener-nonpassive\"\u003e\u003ccode\u003esmooth/scroll-listener-nonpassive\u003c/code\u003e\u003c/a\u003e (list all: \u003ccode\u003evoid rules smooth\u003c/code\u003e).\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"webgl-canvas-allowed-only-if-all-of-these-hold\"\u003e\u003ca class=\"heading-anchor\" href=\"#webgl-canvas-allowed-only-if-all-of-these-hold\"\u003eWebGL / canvas: allowed only if all of these hold\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eAllowed for a hero or ambient backdrop on marketing pages. In app routes only when the canvas \u003cstrong\u003eis\u003c/strong\u003e the product.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eOne live context per page\u003c/strong\u003e (two at most). Never inside \u003ccode\u003e.map()\u003c/code\u003e or a list item: browsers cap contexts at ~8–16 and silently kill the oldest. For many instances, draw one static frame or use CSS gradients.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePause, don\u0026#39;t skip.\u003c/strong\u003e Cancel the rAF when offscreen (\u003ccode\u003eIntersectionObserver\u003c/code\u003e) or when \u003ccode\u003edocument.hidden\u003c/code\u003e. Never pause because the user is idle.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCap DPR at 1.5\u003c/strong\u003e (1 for full-screen backdrops) and fps at 30 for ambient effects. Size backdrops to the viewport (\u003ccode\u003eposition: fixed\u003c/code\u003e), not the page.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eReduced motion:\u003c/strong\u003e render one static frame and stop.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCleanup:\u003c/strong\u003e cancel the rAF, remove listeners, \u003ccode\u003egetExtension('WEBGL_lose_context')?.loseContext()\u003c/code\u003e on unmount, handle \u003ccode\u003ewebglcontextlost\u003c/code\u003e. Update uniforms when props change; don\u0026#39;t rebuild the program.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLoad after paint:\u003c/strong\u003e \u003ccode\u003enext/dynamic(..., { ssr: false })\u003c/code\u003e from a client component, a reserved box with the shader\u0026#39;s average color as placeholder, \u003ccode\u003earia-hidden\u003c/code\u003e + \u003ccode\u003epointer-events-none\u003c/code\u003e when decorative.\u003c/li\u003e\n\u003cli\u003ePrefer \u003ccode\u003eogl\u003c/code\u003e (10–14 KB) or raw WebGL2 over \u003ccode\u003ethree\u003c/code\u003e (140 KB+) for full-screen quads. Mount persistent backdrops once in the root layout so they don\u0026#39;t re-init on every navigation.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003ePaste-ready hook: \u003ca class=\"code-link\" href=\"/docs/speed/rendering-smoothness\"\u003e\u003ccode\u003ereferences/rendering-smoothness.md\u003c/code\u003e\u003c/a\u003e §8. Ids: \u003ca class=\"code-link\" href=\"/rules/smooth/multiple-webgl-contexts\"\u003e\u003ccode\u003esmooth/multiple-webgl-contexts\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/smooth/raf-loop-idle\"\u003e\u003ccode\u003esmooth/raf-loop-idle\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/webgl-in-map\"\u003e\u003ccode\u003elint/webgl-in-map\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/raf-without-cancel\"\u003e\u003ccode\u003elint/raf-without-cancel\u003c/code\u003e\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"bfcache-and-caching\"\u003e\u003ca class=\"heading-anchor\" href=\"#bfcache-and-caching\"\u003ebfcache and caching\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eNo \u003ccode\u003eunload\u003c/code\u003e listeners. Use \u003ccode\u003epagehide\u003c/code\u003e. Add \u003ccode\u003ebeforeunload\u003c/code\u003e only while there are unsaved changes. Id: \u003ca class=\"code-link\" href=\"/rules/perf/bfcache-blocked\"\u003e\u003ccode\u003eperf/bfcache-blocked\u003c/code\u003e\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eHashed assets (\u003ccode\u003e/_next/static/*\u003c/code\u003e): \u003ccode\u003epublic, max-age=31536000, immutable\u003c/code\u003e (Next does this). HTML: \u003ccode\u003eno-cache\u003c/code\u003e or CDN \u003ccode\u003es-maxage\u003c/code\u003e + \u003ccode\u003estale-while-revalidate\u003c/code\u003e. \u003cstrong\u003eNever \u003ccode\u003eimmutable\u003c/code\u003e on HTML.\u003c/strong\u003e Id: \u003ca class=\"code-link\" href=\"/rules/perf/cache-headers\"\u003e\u003ccode\u003eperf/cache-headers\u003c/code\u003e\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eCompression: \u003ccode\u003enext start\u003c/code\u003e only gzips. Put brotli/zstd at the CDN or proxy (and set \u003ccode\u003ecompress: false\u003c/code\u003e when the proxy compresses). Id: \u003ca class=\"code-link\" href=\"/rules/perf/no-text-compression\"\u003e\u003ccode\u003eperf/no-text-compression\u003c/code\u003e\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eoutput: 'standalone'\u003c/code\u003e doesn\u0026#39;t copy \u003ccode\u003epublic/\u003c/code\u003e or \u003ccode\u003e.next/static\u003c/code\u003e. Copy them, or fonts and images 404.\u003c/li\u003e\n\u003cli\u003eNext App Router: rely on \u003ccode\u003e\u003cLink\u003e\u003c/code\u003e prefetch. Don\u0026#39;t add document-wide Speculation Rules \u003ccode\u003eprerender\u003c/code\u003e. Multi-page apps (Astro): \u003ccode\u003eprefetch\u003c/code\u003e at \u003ccode\u003emoderate\u003c/code\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"never-do\"\u003e\u003ca class=\"heading-anchor\" href=\"#never-do\"\u003eNever do\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e'use client'\u003c/code\u003e at the top of a page or layout.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003epriority\u003c/code\u003e on \u003ccode\u003enext/image\u003c/code\u003e (Next 16) · \u003ccode\u003eloading=\"lazy\"\u003c/code\u003e on the hero · a hero as CSS \u003ccode\u003ebackground-image\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eAn h1 or hero at \u003ccode\u003einitial={{ opacity: 0 }}\u003c/code\u003e waiting for hydration.\u003c/li\u003e\n\u003cli\u003eGoogle Fonts \u003ccode\u003e\u003clink\u003e\u003c/code\u003e/\u003ccode\u003e@import\u003c/code\u003e · icon fonts · more than 2 families.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eframer-motion\u003c/code\u003e, or \u003ccode\u003emotion.div\u003c/code\u003e without \u003ccode\u003eLazyMotion\u003c/code\u003e · Lenis, locomotive-scroll, GSAP ScrollTrigger pinning.\u003c/li\u003e\n\u003cli\u003eAnimating \u003ccode\u003ewidth\u003c/code\u003e/\u003ccode\u003eheight\u003c/code\u003e/\u003ccode\u003etop\u003c/code\u003e/\u003ccode\u003eleft\u003c/code\u003e/\u003ccode\u003emargin\u003c/code\u003e/\u003ccode\u003ebox-shadow\u003c/code\u003e · \u003ccode\u003etransition: all\u003c/code\u003e · permanent \u003ccode\u003ewill-change\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003esetState\u003c/code\u003e on \u003ccode\u003escroll\u003c/code\u003e/\u003ccode\u003emousemove\u003c/code\u003e/rAF · \u003ccode\u003esetInterval\u003c/code\u003e or subscriptions in the render body · \u003ccode\u003ewindow\u003c/code\u003e/\u003ccode\u003edocument\u003c/code\u003e/\u003ccode\u003enavigator\u003c/code\u003e at module scope or during render.\u003c/li\u003e\n\u003cli\u003eNon-passive \u003ccode\u003ewheel\u003c/code\u003e/\u003ccode\u003etouchstart\u003c/code\u003e listeners on \u003ccode\u003ewindow\u003c/code\u003e/\u003ccode\u003edocument\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eA WebGL context per card · rAF that keeps running offscreen · canvas at DPR 2+.\u003c/li\u003e\n\u003cli\u003eSynchronous third-party scripts in \u003ccode\u003e\u003chead\u003e\u003c/code\u003e · autoplaying background video · chat widgets that load at startup.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eunload\u003c/code\u003e handlers · \u003ccode\u003eCache-Control: immutable\u003c/code\u003e on HTML.\u003c/li\u003e\n\u003cli\u003eClient-side fetches of rate-limited public APIs (e.g. GitHub stars) on every visit. Fetch on the server with \u003ccode\u003erevalidate\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eMeasuring against \u003ccode\u003enext dev\u003c/code\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"verify\"\u003e\u003ca class=\"heading-anchor\" href=\"#verify\"\u003eVerify\u003c/a\u003e\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003eAfter each significant edit: \u003ccode\u003evoid lint\u003c/code\u003e (seconds). It catches \u003ca class=\"code-link\" href=\"/rules/lint/image-priority-deprecated\"\u003e\u003ccode\u003elint/image-priority-deprecated\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/heavy-import\"\u003e\u003ccode\u003elint/heavy-import\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/page-level-use-client\"\u003e\u003ccode\u003elint/page-level-use-client\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/animate-layout-prop\"\u003e\u003ccode\u003elint/animate-layout-prop\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/scroll-listener-nonpassive\"\u003e\u003ccode\u003elint/scroll-listener-nonpassive\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/no-reduced-motion\"\u003e\u003ccode\u003elint/no-reduced-motion\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/timer-in-render\"\u003e\u003ccode\u003elint/timer-in-render\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/browser-global-in-render\"\u003e\u003ccode\u003elint/browser-global-in-render\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/raf-without-cancel\"\u003e\u003ccode\u003elint/raf-without-cancel\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/webgl-in-map\"\u003e\u003ccode\u003elint/webgl-in-map\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/unload-listener\"\u003e\u003ccode\u003elint/unload-listener\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/google-fonts-link\"\u003e\u003ccode\u003elint/google-fonts-link\u003c/code\u003e\u003c/a\u003e, \u003ca class=\"code-link\" href=\"/rules/lint/script-strategy\"\u003e\u003ccode\u003elint/script-strategy\u003c/code\u003e\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eBefore declaring done: \u003ccode\u003enext build\u003c/code\u003e, then \u003ccode\u003evoid perf --start \"next start -p 3000\" --port 3000\u003c/code\u003e and \u003ccode\u003evoid smooth --start \"next start -p 3000\" --port 3000\u003c/code\u003e (scroll jank, INP of interactions, non-composited animations, idle rAF loops, WebGL context count).\u003c/li\u003e\n\u003cli\u003eFix in order: errors → budgets → warnings. Look up any id with \u003ccode\u003evoid rules \u003cid\u003e\u003c/code\u003e. The full loop is in the \u003ca class=\"code-link\" href=\"/docs/audit\"\u003e\u003ccode\u003eaudit\u003c/code\u003e\u003c/a\u003e skill.\u003c/li\u003e\n\u003c/ol\u003e\n34:[\"$\",\"article\",null,{\"className\":\"min-w-0 max-w-[68ch] pt-8 lg:pt-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden rounded-2xl border border-line bg-bg-subtle p-5\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute inset-y-0 left-0 w-px bg-gradient-to-b from-flare-2 via-flare to-transparent\"}],[\"$\",\"p\",null,{\"className\":\"label-mono text-brand-text\",\"children\":\"When Claude Code loads it\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-fg-muted\",\"children\":\"Use when building, reviewing or optimizing any website, landing page, marketing site, docs site or Next.js/React app; when adding a client component, animation library, hero image, font, analytics/chat script, video embed, canvas or shader; when a page feels slow, janky or shifts; or when `void perf`, `void smooth`, Lighthouse or PageSpeed report problems. Targets Next.js 16 App Router, React 19 and Tailwind 4, with portable guidance for Astro and other SSR stacks.\"}]]}],[\"$\",\"div\",null,{\"className\":\"prose mt-10\",\"dangerouslySetInnerHTML\":{\"__html\":\"$36\"}}],\"$L37\"]}]\n35:[\"$\",\"aside\",null,{\"aria-label\":\"Page contents\",\"className\":\"hidden xl:block\",\"children\":[\"$\",\"div\",null,{\"data-lenis-prevent\":true,\"className\":\"sticky top-(--header-h) max-h-[calc(100dvh-var(--header-h))] overflow-y-auto pt-4 pb-10 [scrollbar-width:thin]\",\"children\":[\"$\",\"nav\",null,{\"aria-label\":\"On this page\",\"className\":\"text-sm\",\"children\":[[\"$\",\"p\",null,{\"className\":\"label-mono mb-3 text-fg-muted\",\"children\":\"On this page\"}],[\"$\",\"ul\",null,{\"className\":\"grid gap-1.5 border-l border-line-subtle\",\"children\":[[\"$\",\"li\",\"the-10-rules-that-matter-most\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#the-10-rules-that-matter-most\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"The 10 rules that matter most\"}]}],[\"$\",\"li\",\"budgets\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#budgets\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"Budgets\"}]}],[\"$\",\"li\",\"before-adding-any-client-js-ask-in-order\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#before-adding-any-client-js-ask-in-order\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"Before adding any client JS, ask in order\"}]}],[\"$\",\"li\",\"server-first-component-boundaries\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#server-first-component-boundaries\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"Server-first component boundaries\"}]}],[\"$\",\"li\",\"lcp-recipe\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#lcp-recipe\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"LCP recipe\"}]}],[\"$\",\"li\",\"inp-recipe-every-click-tap-key-next-frame-200-ms\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#inp-recipe-every-click-tap-key-next-frame-200-ms\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"INP recipe (every click/tap/key → next frame ≤ 200 ms)\"}]}],[\"$\",\"li\",\"cls-recipe\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#cls-recipe\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"CLS recipe\"}]}],[\"$\",\"li\",\"images-fonts-third-parties-summary\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#images-fonts-third-parties-summary\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"Images, fonts, third parties (summary)\"}]}],[\"$\",\"li\",\"animation-and-smoothness\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#animation-and-smoothness\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"Animation and smoothness\"}]}],[\"$\",\"li\",\"webgl-canvas-allowed-only-if-all-of-these-hold\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#webgl-canvas-allowed-only-if-all-of-these-hold\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"WebGL / canvas: allowed only if all of these hold\"}]}],[\"$\",\"li\",\"bfcache-and-caching\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#bfcache-and-caching\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"bfcache and caching\"}]}],[\"$\",\"li\",\"never-do\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#never-do\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"Never do\"}]}],[\"$\",\"li\",\"verify\",{\"children\":[\"$\",\"a\",null,{\"href\":\"#verify\",\"className\":\"block py-0.5 pr-2 text-fg-muted transition-colors duration-(--duration-fast) hover:text-fg pl-4\",\"children\":\"Verify\"}]}]]}]]}]}]}]\n37:[\"$\",\"footer\",null,{\"className\":\"mt-16 border-t border-line-subtle pt-8 pb-20\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center justify-between gap-3 font-mono text-xs text-fg-muted\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"Updated \",[\"$\",\"time\",null,{\"dateTime\":\"2026-09-16\",\"children\":\"16 Sept 2026\"}]]}],[\"$\",\"span\",null,{\"className\":\"flex gap-4\",\"children\":[[\"$\",\"a\",null,{\"href\":\"/docs/speed.md\",\"className\":\"hover:text-fg\",\"children\":\"View as Markdown\"}],[\"$\",\"a\",null,{\"href\":\"https://github.com/ParthKapoor-dev/design/blob/main/skills/speed/SKILL.md\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-fg\",\"children\":\"Edit on GitHub\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-8 grid gap-3 sm:grid-cols-2\",\"children\":[[\"$\",\"$La\",null,{\"href\":\"/docs/inspire/font-alternatives\",\"className\":\"press group flex flex-col gap-1 rounded-lg border border-line-subtle p-4 transition-colors duration-(--duration-fast) hover:border-line-strong\",\"children\":[[\"$\",\"span\",null,{\"className\":\"label-mono flex items-center gap-1.5 text-fg-muted\",\"children\":[[\"$\",\"svg\",null,{\"aria-hidden\":true,\"viewBox\":\"0 0 16 16\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.5,\"className\":\"size-3\",\"children\":[\"$\",\"path\",null,{\"d\":\"M13 8H3.5M7.5 4l-4 4 4 4\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}]}],\" Previous\"]}],[\"$\",\"span\",null,{\"className\":\"text-sm text-fg\",\"children\":\"inspire: font alternatives\"}]]}],[\"$\",\"$La\",null,{\"href\":\"/docs/speed/images-fonts\",\"className\":\"press group flex flex-col items-end gap-1 rounded-lg border border-line-subtle p-4 text-right transition-colors duration-(--duration-fast) hover:border-line-strong\",\"children\":[[\"$\",\"span\",null,{\"className\":\"label-mono flex items-center gap-1.5 text-fg-muted\",\"children\":[\"Next \",[\"$\",\"svg\",null,{\"aria-hidden\":true,\"viewBox\":\"0 0 16 16\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":1.5,\"className\":\"size-3\",\"children\":[\"$\",\"path\",null,{\"d\":\"M3 8h9.5M8.5 4l4 4-4 4\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"}]}]]}],[\"$\",\"span\",null,{\"className\":\"text-sm text-fg\",\"children\":\"speed: images fonts\"}]]}]]}]]}]\n2a:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#020203\"}],[\"$\",\"meta\",\"3\",{\"name\":\"color-scheme\",\"content\":\"dark\"}]]\n38:I[49310,[\"/_next/static/immutable/chunks/455sb5e0fgpzb.js\"],\"IconMark\"]\n28:null\n2c:[[\"$\",\"title\",\"0\",{\"children\":\"speed skill: fast to load, smooth to use | void\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Performance and smoothness rules for websites and web apps. Covers Core Web Vitals (LCP, INP, CLS), JS/CSS/font/image budgets, Server Components vs 'use…\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"void\"}],[\"$\",\"link\",\"3\",{\"rel\":\"author\",\"href\":\"https://parthkapoor.me\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Parth Kapoor\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"design system,AI coding agents,Claude Code,WebGL,shaders,web performance,accessibility,SEO,Next.js,Tailwind\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Parth Kapoor\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Parth Kapoor\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"category\",\"content\":\"technology\"}],[\"$\",\"link\",\"12\",{\"rel\":\"canonical\",\"href\":\"https://void-design.vercel.app/docs/speed\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"type\":\"text/markdown\",\"href\":\"https://void-design.vercel.app/docs/speed.md\"}],[\"$\",\"meta\",\"14\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"15\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"16\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"void\"}],[\"$\",\"meta\",\"17\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"black-translucent\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:title\",\"content\":\"speed skill: fast to load, smooth to use\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:description\",\"content\":\"Performance and smoothness rules for websites and web apps. Covers Core Web Vitals (LCP, INP, CLS), JS/CSS/font/image budgets, Server Components vs 'use…\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:url\",\"content\":\"https://void-design.vercel.app/docs/speed\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:site_name\",\"content\":\"void\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:image\",\"content\":\"https://void-design.vercel.app/docs/speed/opengraph-image-1dv662?d56abb6face50325\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"25\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"26\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"27\",{\"property\":\"og:image:alt\",\"content\":\"void skill\"}],[\"$\",\"meta\",\"28\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"29\",{\"property\":\"article:modified_time\",\"content\":\"2026-09-16\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:title\",\"content\":\"speed skill: fast to load, smooth to use\"}],[\"$\",\"meta\",\"32\",{\"name\":\"twitter:description\",\"content\":\"Performance and smoothness rules for websites and web apps. Covers Core Web Vitals (LCP, INP, CLS), JS/CSS/font/image budgets, Server Components vs 'use…\"}],[\"$\",\"meta\",\"33\",{\"name\":\"twitter:image\",\"content\":\"https://void-design.vercel.app/docs/speed/opengraph-image-1dv662?d56abb6face50325\"}],[\"$\",\"meta\",\"34\",{\"name\":\"twitter:image:alt\",\"content\":\"void skill\"}],[\"$\",\"meta\",\"35\",{\"name\":\"twitter:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"36\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"37\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"38\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.07_7ic0_1d0u-.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"39\",{\"rel\":\"icon\",\"href\":\"/icon.svg?icon.0uaj260ufluee.svg\",\"sizes\":\"any\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"40\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.0wjwpgjlk50hj.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L38\",\"41\",{}]]\n"])</script></body></html>