Source

patternsdev/skills

58 skills · 41.1K combined installs

Skills from this source

#

Skill

Source

8W Activity

Installs

ai-ui-patterns Teaches design patterns for building AI-powered React interfaces. Use when creating chatbots, intelligent assistants,…

patternsdev/skills

react-2026 Provides a comprehensive guide to the modern React 2026 stack. Use when starting a new React project or modernizing a…

patternsdev/skills

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

patternsdev/skills

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

patternsdev/skills

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

patternsdev/skills

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

patternsdev/skills

preload Teaches resource preloading to prioritize critical assets. Use when critical resources like fonts, hero images, or ke…

patternsdev/skills

import-on-interaction Teaches interaction-based lazy loading for non-critical resources. Use when you have heavy components or libraries th…

patternsdev/skills

import-on-visibility Teaches visibility-based lazy loading using Intersection Observer. Use when you have below-the-fold components or ima…

patternsdev/skills

prefetch Teaches resource prefetching strategies for faster navigation. Use when you can predict which resources the user will…

patternsdev/skills

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

patternsdev/skills

route-based Teaches route-based code splitting for single-page applications. Use when different routes load distinct feature sets…

patternsdev/skills

static-import Teaches static ES2015 import syntax for module dependencies. Use when you need to import code that is required at loa…

patternsdev/skills

third-party Teaches strategies for mitigating third-party script performance impact. Use when third-party scripts like analytics,…

patternsdev/skills

tree-shaking Teaches tree shaking for dead code elimination in JavaScript bundles. Use when your bundle includes unused exports an…

patternsdev/skills

virtual-lists Teaches virtual list (windowing) techniques for rendering large datasets. Use when rendering lists or tables with hun…

patternsdev/skills

hooks-pattern Teaches React Hooks for reusing stateful logic across components. Use when extracting shared behavior like form handl…

patternsdev/skills

react-composition-2026 Teaches modern React composition patterns for 2025/2026. Use when designing component APIs, building shared UI librar…

patternsdev/skills

react-render-optimization Teaches React rendering performance optimization patterns. Use when reducing unnecessary re-renders, optimizing memoi…

patternsdev/skills

react-data-fetching Teaches modern React data fetching patterns with TanStack Query, SWR, and Suspense. Use when implementing caching, de…

patternsdev/skills

presentational-container-pattern Teaches the presentational/container pattern for separating view and logic. Use when you want to isolate data fetchin…

patternsdev/skills

compound-pattern Teaches the compound component pattern for shared implicit state. Use when building related components like tabs, acc…

patternsdev/skills

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

patternsdev/skills

render-props-pattern Teaches the render props pattern for flexible component composition. Use when you need to share rendering logic betwe…

patternsdev/skills

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

patternsdev/skills

react-server-components Teaches React Server Components for zero-bundle server rendering. Use when components only need server-side data acce…

patternsdev/skills

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

patternsdev/skills

react-selective-hydration Teaches selective hydration combined with streaming SSR in React 18+. Use when you need to prioritize hydrating inter…

patternsdev/skills

server-side-rendering Teaches server-side rendering (SSR) for React applications. Use when you need faster initial page loads, better SEO, …

patternsdev/skills

incremental-static-rendering Teaches Incremental Static Regeneration (ISR) for updating static content post-build. Use when you have static pages …

patternsdev/skills

static-rendering Teaches static rendering (SSG) for build-time HTML generation. Use when your pages don't change per request and can b…

patternsdev/skills

streaming-ssr Teaches streaming server-side rendering for chunked HTML delivery. Use when you need faster Time to First Byte and Fi…

patternsdev/skills

js-performance-patterns Provides framework-agnostic JavaScript runtime performance patterns. Use when optimizing hot paths, loops, DOM operat…

patternsdev/skills

vite-bundle-optimization Teaches Vite-specific bundle optimization patterns. Use when configuring Vite builds, code splitting, managing depend…

patternsdev/skills

view-transitions Teaches the View Transitions API for animating DOM changes. Use when you want smooth animated transitions between pag…

patternsdev/skills

command-pattern Teaches the command pattern for decoupling task execution from invocation. Use when you need undo/redo functionality,…

patternsdev/skills

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

patternsdev/skills

factory-pattern Teaches the factory pattern for flexible object creation. Use when you need to create objects dynamically without usi…

patternsdev/skills

singleton-pattern Teaches the singleton pattern for managing a single shared instance. Use when exactly one instance of a class or obje…

patternsdev/skills

module-pattern Teaches the module pattern for code organization and encapsulation. Use when structuring JavaScript into reusable, ma…

patternsdev/skills

islands-architecture Teaches the islands architecture pattern for partial hydration. Use when building content-heavy sites where most of t…

patternsdev/skills

provider-pattern Teaches the provider pattern for sharing data across component trees. Use when multiple nested components need access…

patternsdev/skills

mixin-pattern Teaches the mixin pattern for sharing functionality without inheritance. Use when you need to add reusable behavior t…

patternsdev/skills

prototype-pattern Teaches the prototype pattern for property sharing via the prototype chain. Use when creating many objects of the sam…

patternsdev/skills

proxy-pattern Teaches the proxy pattern for intercepting object operations. Use when you need validation, logging, formatting, or a…

patternsdev/skills

flyweight-pattern Teaches the flyweight pattern for memory optimization. Use when your application creates large numbers of similar obj…

patternsdev/skills

mediator-pattern Teaches the mediator pattern for centralized component communication. Use when multiple components need to communicat…

patternsdev/skills

components Teaches Vue component fundamentals including markup, logic, and styles. Use when building or structuring Vue single-f…

patternsdev/skills

composables Teaches Vue composables for reusable stateful logic with the Composition API. Use when extracting shared reactive sta…

patternsdev/skills

async-components Teaches async component loading in Vue for performance optimization. Use when you have heavy components that aren't n…

patternsdev/skills