@skills · Owner

Agent skills by patternsdev

62 skills indexed from github.com/patternsdev. Reference any of them in AdaL, Claude Code, Cursor or any coding agent — nothing to install.

• ai-ui-patterns · Skill · 235 stars

  Teaches design patterns for building AI-powered React interfaces. Use when creating chatbots, intelligent assistants, streaming UIs, or any AI-driven user

• async-components · Skill · 235 stars

  Teaches async component loading in Vue for performance optimization. Use when you have heavy components that aren't needed on initial render and can be loa

• bundle-splitting · Skill · 235 stars

  Teaches bundle splitting techniques for web performance. Use when your application has a large JavaScript bundle that affects load times or when you need t

• client-side-rendering · Skill · 235 stars

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

• command-pattern · Skill · 235 stars

  Teaches the command pattern for decoupling task execution from invocation. Use when you need undo/redo functionality, queued operations, or want to decoupl

• components · Skill · 235 stars

  Teaches Vue component fundamentals including markup, logic, and styles. Use when building or structuring Vue single-file components as the foundational bui

• composables · Skill · 235 stars

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

• compound-pattern · Skill · 235 stars

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

• compression · Skill · 235 stars

  Teaches JavaScript compression techniques including Gzip and Brotli. Use when optimizing network transfer times or configuring server-side compression for

• container-presentational · Skill · 235 stars

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

• data-provider · Skill · 235 stars

  Teaches the data provider pattern using renderless components and scoped slots. Use when you need to abstract data fetching or state management logic and e

• dynamic-components · Skill · 235 stars

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

• dynamic-import · Skill · 235 stars

  Teaches dynamic import() for on-demand code loading. Use when you need to reduce initial bundle size by lazily loading modules that aren't required at star

• factory-pattern · Skill · 235 stars

  Teaches the factory pattern for flexible object creation. Use when you need to create objects dynamically without using the new keyword or when object crea

• flyweight-pattern · Skill · 235 stars

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

• hoc-pattern · Skill · 235 stars

  Teaches the Higher-Order Component (HOC) pattern for logic reuse. Use when you need to share cross-cutting concerns like authentication, logging, or data f

• hooks-pattern · Skill · 235 stars

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

• import-on-interaction · Skill · 235 stars

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

• import-on-visibility · Skill · 235 stars

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

• incremental-static-rendering · Skill · 235 stars

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

• islands-architecture · Skill · 235 stars

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

• javascript · Collection · 235 stars
• js-performance-patterns · Skill · 235 stars

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

• loading-sequence · Skill · 235 stars

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

• mediator-pattern · Skill · 235 stars

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

• mixin-pattern · Skill · 235 stars

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

• module-pattern · Skill · 235 stars

  Teaches the module pattern for code organization and encapsulation. Use when structuring JavaScript into reusable, maintainable pieces with clear public an

• observer-pattern · Skill · 235 stars

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

• prefetch · Skill · 235 stars

  Teaches resource prefetching strategies for faster navigation. Use when you can predict which resources the user will need next and want to load them durin

• preload · Skill · 235 stars

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

• presentational-container-pattern · Skill · 235 stars

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

• progressive-hydration · Skill · 235 stars

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

• prototype-pattern · Skill · 235 stars

  Teaches the prototype pattern for property sharing via the prototype chain. Use when creating many objects of the same type that should share methods or pr

• provide-inject · Skill · 235 stars

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

• provider-pattern · Skill · 235 stars

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

• proxy-pattern · Skill · 235 stars

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

• prpl · Skill · 235 stars

  Teaches the PRPL pattern for optimizing initial page load. Use when building Progressive Web Apps or when you need to push critical resources, render the i

• react · Collection · 235 stars
• react-2026 · Skill · 235 stars

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

• react-composition-2026 · Skill · 235 stars

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

• react-data-fetching · Skill · 235 stars

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

• react-render-optimization · Skill · 235 stars

  Teaches React rendering performance optimization patterns. Use when reducing unnecessary re-renders, optimizing memoization, improving state design, or dia

• react-selective-hydration · Skill · 235 stars

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

• react-server-components · Skill · 235 stars

  Teaches React Server Components for zero-bundle server rendering. Use when components only need server-side data access and don't require client-side inter

• render-functions · Skill · 235 stars

  Teaches Vue render functions and JSX for programmatic template creation. Use when templates are too limiting and you need the full power of JavaScript to c

• render-props-pattern · Skill · 235 stars

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

• renderless-components · Skill · 235 stars

  Teaches the renderless component pattern for logic-only Vue components. Use when you want to encapsulate behavior without dictating markup, letting consume

• route-based · Skill · 235 stars

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

• script-setup · Skill · 235 stars

  Teaches Vue's script setup syntax for concise Composition API usage. Use when writing Vue 3 single-file components and you want a more ergonomic, less boil

• server-side-rendering · Skill · 235 stars

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

• singleton-pattern · Skill · 235 stars

  Teaches the singleton pattern for managing a single shared instance. Use when exactly one instance of a class or object is needed to coordinate actions acr

• skills · Collection · 235 stars
• state-management · Skill · 235 stars

  Teaches Vue state management with stores, Pinia, and the Composition API. Use when you need to share and synchronize state across multiple components beyon

• static-import · Skill · 235 stars

  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 analys

• static-rendering · Skill · 235 stars

  Teaches static rendering (SSG) for build-time HTML generation. Use when your pages don't change per request and can be pre-rendered at build time for maxim

• streaming-ssr · Skill · 235 stars

  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

• third-party · Skill · 235 stars

  Teaches strategies for mitigating third-party script performance impact. Use when third-party scripts like analytics, ads, or widgets are degrading your pa

• tree-shaking · Skill · 235 stars

  Teaches tree shaking for dead code elimination in JavaScript bundles. Use when your bundle includes unused exports and you want to reduce the final bundle

• view-transitions · Skill · 235 stars

  Teaches the View Transitions API for animating DOM changes. Use when you want smooth animated transitions between pages or UI states without manual animati

• virtual-lists · Skill · 235 stars

  Teaches virtual list (windowing) techniques for rendering large datasets. Use when rendering lists or tables with hundreds or thousands of items that cause

• vite-bundle-optimization · Skill · 235 stars

  Teaches Vite-specific bundle optimization patterns. Use when configuring Vite builds, code splitting, managing dependencies, or troubleshooting slow Vite b

• vue · Collection · 235 stars

Browse the @skills marketplace