patternsdev

patternsdev/skills

patternsdev/skills

Teaches async component loading in Vue for performance optimization. Use when you have heavy components that aren't needed on init...

Teaches bundle splitting techniques for web performance. Use when your application has a large JavaScript bundle that affects load...

Teaches client-side rendering (CSR) for React applications. Use when building highly interactive apps where SEO is not a priority ...

patternsdev/skills

Teaches Vue composables for reusable stateful logic with the Composition API. Use when extracting shared reactive state, side effe...

Teaches the compound component pattern for shared implicit state. Use when building related components like tabs, accordions, or d...

Teaches JavaScript compression techniques including Gzip and Brotli. Use when optimizing network transfer times or configuring ser...

Teaches the container/presentational pattern for Vue components. Use when you want to separate data fetching and business logic fr...

Teaches dynamic component switching with Vue's <component> element. Use when you need to render different components conditionally...

Teaches dynamic import() for on-demand code loading. Use when you need to reduce initial bundle size by lazily loading modules tha...

Teaches the flyweight pattern for memory optimization. Use when your application creates large numbers of similar objects and memo...

Teaches the Higher-Order Component (HOC) pattern for logic reuse. Use when you need to share cross-cutting concerns like authentic...

Teaches interaction-based lazy loading for non-critical resources. Use when you have heavy components or libraries that are only n...

Teaches visibility-based lazy loading using Intersection Observer. Use when you have below-the-fold components or images that don'...

Teaches the islands architecture pattern for partial hydration. Use when building content-heavy sites where most of the page is st...

Teaches resource loading sequence optimization for Core Web Vitals. Use when you need to improve FCP, LCP, or FID by reordering ho...

Teaches the mediator pattern for centralized component communication. Use when multiple components need to communicate and direct ...

Teaches the mixin pattern for sharing functionality without inheritance. Use when you need to add reusable behavior to multiple ob...

Teaches the observer pattern for event-driven communication. Use when you need decoupled publish/subscribe behavior where multiple...

Teaches resource prefetching strategies for faster navigation. Use when you can predict which resources the user will need next an...

Teaches resource preloading to prioritize critical assets. Use when critical resources like fonts, hero images, or key scripts are...

Teaches the presentational/container pattern for separating view and logic. Use when you want to isolate data fetching and busines...

Teaches progressive hydration for prioritized client-side interactivity. Use when server-rendered pages have non-critical sections...

patternsdev/skills

Teaches Vue's provide/inject API for dependency injection across components. Use when deeply nested components need access to ance...

Teaches the proxy pattern for intercepting object operations. Use when you need validation, logging, formatting, or access control...

Teaches the PRPL pattern for optimizing initial page load. Use when building Progressive Web Apps or when you need to push critica...

Provides a comprehensive guide to the modern React 2026 stack. Use when starting a new React project or modernizing an existing on...