@patternsdev

view-transitions covers the View Transitions API for smoothly animating DOM state changes and page navigations. includes browser support checks, CSS naming patterns, React integration, and fallback strategies for unsupported environments.

third-party covers optimization strategies for analytics, ads, embeds, and widgets that degrade page performance. teaches resource hints, lazy-loading, self-hosting, and framework-level techniques to reduce main thread impact while retaining functionality.

singleton-pattern covers when and how to enforce a single shared instance of a class in javascript, with explicit warnings about testing difficulty, global state coupling, and modern alternatives like modules and state management tools.

dynamic-import covers lazy-loading modules in react via suspense and react.lazy to defer non-critical component initialization, reducing initial bundle size for faster page loads.

preload covers html link rel directives to front-load critical resources like fonts and images discovered late, targeting core web vitals improvement. lacks procedural depth and edge case coverage.

vite-bundle-optimization covers production patterns for reducing bundle size and build time in vite plus react projects, with guidance on code splitting, dependency management, and core web vitals optimization.

hoc-pattern outlines when and why to apply higher-order components for logic reuse across react components, but lacks concrete implementation steps and failure mode discussion.

import-on-visibility teaches lazy-loading patterns for below-the-fold components using intersection observer or related libraries, reducing initial page load time when content enters the viewport.

module-pattern covers javascript code organization through encapsulation and reusability, enabling private scoping and reduced bundle sizes via tree-shaking.

ai-ui-patterns covers react component patterns for streaming ai responses, prompt management, and error handling in chatbots and assistants. emphasizes vite and next.js implementations with vercel ai sdk and tailwindcss.

prefetch covers browser resource preloading for predicted navigation patterns. covers declarative html, http headers, service workers, and bundler integration. acknowledges bandwidth constraints and staleness risks.

bundle-splitting covers code splitting strategies to reduce initial load time and improve core web vitals by separating non-critical code into isolated bundles.

factory-pattern explains how to use factory functions to create objects without the new keyword, useful for applications needing multiple similar objects with computed properties.

import-on-interaction defers loading of non-critical third-party widgets and components until user interaction, reducing initial page load burden and improving time-to-interactive metrics.

static-rendering covers pre-rendering html at build time for unchanging content. suitable for blogs and product pages where cdn delivery and minimal server load matter more than per-request personalization.

command-pattern documents the design pattern for decoupling invocation from execution, with guidance on when to apply it versus simpler approaches. lacks procedural depth and concrete implementation steps.

react-server-components teaches zero-bundle server rendering for data-heavy components in next.js 13+. covers when to adopt and basic conceptual distinctions vs ssr, but lacks actionable procedure.

compression covers javascript payload reduction via gzip and brotli. lacks concrete step-by-step procedures, decision logic, and failure mode discussion. positioning is general but context-appropriate.

tree-shaking covers dead code elimination in javascript bundles by leveraging es module syntax and sideeffect declarations to reduce final bundle size and improve load performance.

virtual-lists covers windowing techniques to render only visible rows in large datasets, improving performance for lists and grids with hundreds or thousands of items.

react-2026 catalogs the modern React ecosystem as of 2025-2026, covering frameworks, build tools, and routing patterns for developers evaluating stack choices.

prototype-pattern covers javascript's prototype chain for sharing methods across many instances via es6 classes and object.create(), reducing memory overhead and enabling inheritance.

observer-pattern describes publish-subscribe decoupling where observers react to state changes in an observable, enabling event-driven async communication across application components.

loading-sequence covers core web vitals optimization by sequencing resource loads. scope is clear but execution detail is absent, making it unsuitable for direct application without substantial expansion.

client-side-rendering covers the conceptual foundation of CSR for react applications, explaining when to use it and when to avoid it, but lacks procedural depth and implementation guidance.

Teaches modern React composition patterns for 2025/2026. Use when designing component APIs, building shared UI libraries, or refactoring prop-heavy components.

Provides framework-agnostic JavaScript runtime performance patterns. Use when optimizing hot paths, loops, DOM operations, caching, or data structure choices…

Teaches modern React data fetching patterns with TanStack Query, SWR, and Suspense. Use when implementing caching, deduplication, optimistic updates, or…

Teaches the mixin pattern for sharing functionality without inheritance. Use when you need to add reusable behavior to multiple objects or classes that don't…

Teaches React Hooks for reusing stateful logic across components. Use when extracting shared behavior like form handling, subscriptions, or side effects into…

Teaches the compound component pattern for shared implicit state. Use when building related components like tabs, accordions, or dropdowns that need to…

Teaches the presentational/container pattern for separating view and logic. Use when you want to isolate data fetching and business logic from UI rendering for…

Teaches the islands architecture pattern for partial hydration. Use when building content-heavy sites where most of the page is static and only small regions…

Teaches the flyweight pattern for memory optimization. Use when your application creates large numbers of similar objects and memory consumption is a concern.

Teaches the mediator pattern for centralized component communication. Use when multiple components need to communicate and direct coupling between them creates…

Teaches the provider pattern for sharing data across component trees. Use when multiple nested components need access to the same data and prop drilling…

Teaches streaming server-side rendering for chunked HTML delivery. Use when you need faster Time to First Byte and First Contentful Paint by streaming HTML as…

Teaches server-side rendering (SSR) for React applications. Use when you need faster initial page loads, better SEO, or dynamic per-request HTML generation.

Teaches Incremental Static Regeneration (ISR) for updating static content post-build. Use when you have static pages that need periodic updates without a full…

Teaches selective hydration combined with streaming SSR in React 18+. Use when you need to prioritize hydrating interactive components while streaming the rest…

Teaches progressive hydration for prioritized client-side interactivity. Use when server-rendered pages have non-critical sections whose JavaScript can be…

Teaches route-based code splitting for single-page applications. Use when different routes load distinct feature sets and you want to avoid loading all route…

Teaches static ES2015 import syntax for module dependencies. Use when you need to import code that is required at load time and benefits from static analysis…

prpl — an installable skill for AI agents, published by patternsdev/skills.

Teaches the render props pattern for flexible component composition. Use when you need to share rendering logic between components by passing a function that…

react-render-optimization — an installable skill for AI agents, published by patternsdev/skills.