compression

Agent skill from patterns.dev providing a comprehensive guide to building React apps with a modern 2026 stack — part of the React design pattern set in an agent-optimized prose+code format.

Agent skill from patterns.dev covering design patterns for building AI-powered interfaces like chatbots and assistants — an agent-optimized, prose+code-only version of the patterns.dev React design pattern content (no iframes or videos).

patterns.dev skill teaching **`import()` dynamic imports** for on-demand code loading — use `React.lazy` + `Suspense` (or `loadable-components` for SSR) to keep modals, emoji pickers, and other non-critical modules out of the initial bundle, with an example reducing the main bundle from 1.5 MiB to 1.33 MiB.

patterns.dev skill teaching **bundle splitting** with Webpack or Rollup — separate non-critical code (rarely-used features, interaction-triggered modules) out of the initial bundle to improve FCP, LCP, and TTI without changing user-visible behavior.

patterns.dev skill teaching `<link rel="preload">` and `/* webpackPreload: true */` to prioritize **late-discovered critical resources** (fonts, hero scripts, key JS) for TTI/LCP wins — with the `async`-hack variant, the `as=`/`crossorigin` rules, and a warning not to preload anything that isn't needed within ~1 second of first render.

Teaches how to order resource loading — critical HTML, CSS, JS, fonts, images — so your app becomes usable as quickly as possible. Part of the patterns.dev performance pattern library.

patterns.dev skill teaching **resource prefetching** with `<link rel="prefetch">` and Webpack's `/* webpackPrefetch: true */` magic comment — load likely-soon resources at low priority during idle time to make subsequent navigations instant, with warnings about wasting data on metered/low-bandwidth connections.

patterns.dev skill teaching **interaction-based lazy loading** — defer heavy modules (video players, chat widgets, auth SDKs, share features) with dynamic `import()` and lightweight facades (e.g. YouTube Lite Embed) so they only load on click/hover, improving FID/INP and TTI.

patterns.dev skill teaching **route-based code splitting** — combine React Suspense / `loadable-components` with `react-router` (or use built-in support in Next.js / Remix / React Router) to lazily load only the components needed for the current route, piggybacking on the loading tolerance users already expect during navigation.

patterns.dev skill teaching **third-party script optimization** — analytics, ads, embeds, and chat widgets that drag down Core Web Vitals — via `async`/`defer`, `preconnect`/`dns-prefetch`, facades for YouTube/social embeds, self-hosting critical scripts, and the Next.js `Script` component's `strategy` values.