dynamic-components

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).

Agent skill from patterns.dev that teaches the React Hooks pattern — using functions to reuse stateful logic among multiple components — packaged as a stripped-down, agent-optimized version of the patterns.dev content (prose + code only, no interactive embeds).

Patterns.dev skill for modern React composition — replace boolean-prop proliferation with explicit composition, build compound components with Context, use explicit variant components over mode props, prefer children over render props, and decouple state interface from implementation so providers can swap without changing consumers. Applied during component design, generation, and review.

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 modern React data-fetching patterns — parallel fetches with `Promise.all`, defer-await, TanStack Query / SWR with caching and deduplication, Suspense + `useSuspenseQuery` for declarative loading, and prefetch-on-hover for instant navigation. Applied during code generation, review, and refactoring of `fetch` + `useEffect` anti-patterns.

Patterns.dev skill for React render-performance optimization — compute derived values during render (not stored state), subscribe to coarse-grained values (`isMobile` not `width`), extract expensive subtrees into memoized components for early-return skipping, lazy `useState` init, and functional `setState` for stable callbacks. Ordered by impact, with React Compiler caveats noted.

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 **JavaScript compression** — prefer Brotli over Gzip at the server/CDN or via Webpack `CompressionPlugin`/`BrotliWebpackPlugin`, always minify first, and respect the granularity trade-off that a single large bundle compresses better (`compress(a+b) <= compress(a)+compress(b)`) while smaller chunks cache better.

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.