Patterns.dev's skills guide AI agents through frontend engineering work centered on Vue and Vite, including separating data logic from presentation with container components, writing render functions and JSX, managing sharing state through Pinia and the Composition API, and cutting build times through Vite bundle optimization. The catalog also covers browser-level performance and interaction, such as resource prefetching for faster navigation and View Transitions for animated page changes, along with classic design patterns like mixins and flyweights for memory-conscious code.
Skills
58 skills · 258 stars
Ai Ui Patterns Teaches design patterns for building AI-powered React interfaces.
Async Components Teaches async component loading in Vue for performance optimization.
Bundle Splitting Teaches bundle splitting techniques for web performance.
Client Side Rendering Teaches client-side rendering (CSR) for React applications.
Command Pattern Teaches the command pattern for decoupling task execution from invocation.
Components Teaches Vue component fundamentals including markup, logic, and styles.
Composables Teaches Vue composables for reusable stateful logic with the Composition API.
Compound Pattern Teaches the compound component pattern for shared implicit state.
Compression Teaches JavaScript compression techniques including Gzip and Brotli.
Container Presentational Teaches the container/presentational pattern for Vue components.
Data Provider Teaches the data provider pattern using renderless components and scoped slots.
Dynamic Components Teaches dynamic component switching with Vue's <component> element.
Dynamic Import Teaches dynamic import() for on-demand code loading.
Factory Pattern Teaches the factory pattern for flexible object creation.
Flyweight Pattern Teaches the flyweight pattern for memory optimization.
Hoc Pattern Teaches the Higher-Order Component (HOC) pattern for logic reuse.
Hooks Pattern Teaches React Hooks for reusing stateful logic across components.
Import On Interaction Teaches interaction-based lazy loading for non-critical resources.
Import On Visibility Teaches visibility-based lazy loading using Intersection Observer.
Incremental Static Rendering Teaches Incremental Static Regeneration (ISR) for updating static content post-build.
Islands Architecture Teaches the islands architecture pattern for partial hydration.
Js Performance Patterns Provides framework-agnostic JavaScript runtime performance patterns.
Loading Sequence Teaches resource loading sequence optimization for Core Web Vitals.
Mediator Pattern Teaches the mediator pattern for centralized component communication.
Mixin Pattern Teaches the mixin pattern for sharing functionality without inheritance.
Module Pattern Teaches the module pattern for code organization and encapsulation.
Observer Pattern Teaches the observer pattern for event-driven communication.
Prefetch Teaches resource prefetching strategies for faster navigation.
Preload Teaches resource preloading to prioritize critical assets.
Presentational Container Pattern Teaches the presentational/container pattern for separating view and logic.
Progressive Hydration Teaches progressive hydration for prioritized client-side interactivity.
Prototype Pattern Teaches the prototype pattern for property sharing via the prototype chain.
Provide Inject Teaches Vue's provide/inject API for dependency injection across components.
Provider Pattern Teaches the provider pattern for sharing data across component trees.
Proxy Pattern Teaches the proxy pattern for intercepting object operations.
Prpl Teaches the PRPL pattern for optimizing initial page load.
React 2026 Provides a comprehensive guide to the modern React 2026 stack.
React Composition 2026 Teaches modern React composition patterns for 2025/2026.
React Data Fetching Teaches modern React data fetching patterns with TanStack Query, SWR, and Suspense.
React Render Optimization Teaches React rendering performance optimization patterns.
React Selective Hydration Teaches selective hydration combined with streaming SSR in React 18+.
React Server Components Teaches React Server Components for zero-bundle server rendering.
Render Functions Teaches Vue render functions and JSX for programmatic template creation.
Render Props Pattern Teaches the render props pattern for flexible component composition.
Renderless Components Teaches the renderless component pattern for logic-only Vue components.
Route Based Teaches route-based code splitting for single-page applications.
Script Setup Teaches Vue's script setup syntax for concise Composition API usage.
Server Side Rendering Teaches server-side rendering (SSR) for React applications.