Catalog

Every installable skill

58 skills across JavaScript, React, and Vue. Copy an install command or browse the full skill reference.

JavaScript. Design, performance, and rendering skills for modern JS stacks.
React. Hooks, rendering, data fetching, and Vite-ready performance patterns for React.
Vue. Composition API, performance, and SSR guidance for Vue 3.

New in 2026: /js-performance-patterns, /vite-bundle-optimization, /react-data-fetching, and expanded Vite + SPA coverage across React skills.

Install

$ npx skills add PatternsDev/skills --skill <skill-name>

JavaScript

29 skills

/singleton-pattern

Share a single global instance throughout the application
/observer-pattern

Use observables to notify subscribers when an event occurs
/proxy-pattern

Intercept and control interactions with target objects
/prototype-pattern

Share properties among many objects of the same type
/module-pattern

Split up your code into smaller, reusable pieces
/mixin-pattern

Add functionality to objects or classes without inheritance
/mediator-pattern

Use a central mediator object to handle communication between components
/flyweight-pattern

Reuse existing instances when working with identical objects
/factory-pattern

Use a factory function in order to create objects
/command-pattern

Decouple task execution by encapsulating actions as command objects
/provider-pattern

Make data available to multiple child components

/loading-sequence

Optimize your loading sequence to improve how quickly your app is usable
/static-import

Import modules statically for predictable bundling and tree-shaking
/dynamic-import

Import parts of your code on demand
/import-on-visibility

Load non-critical components when they are visible in the viewport
/import-on-interaction

Load non-critical resources when a user interacts with UI requiring it
/route-based

Dynamically load components based on the current route
/bundle-splitting

Split your code into small, reusable pieces
/prpl

Optimize initial load through precaching, lazy loading, and minimizing roundtrips
/tree-shaking

Reduce the bundle size by eliminating dead code
/preload

Inform the browser of critical resources before they are discovered
/prefetch

Fetch and cache resources the user is likely to need next
/third-party

Reduce the performance impact third-party scripts have on your site
/virtual-lists

Optimize list performance with list virtualization
/compression

Reduce the time needed to transfer scripts over the network
/js-performance-patterns Skill only

Runtime performance patterns for JavaScript hot paths including loops, lookups, DOM operations, and caching
/vite-bundle-optimization Skill only

Vite-specific patterns for builds, code splitting, PWA, CSS strategy, and React Compiler setup

/islands-architecture

Render small, focused chunks of interactivity within server-rendered pages
/view-transitions

Animate page transitions using the View Transitions API

18 skills

/hooks-pattern

Use functions to reuse stateful logic among multiple components throughout the app
/hoc-pattern

Pass reusable logic down as props to components throughout your application
/compound-pattern

Create multiple components that work together to perform a single task
/render-props-pattern

Pass JSX elements to components through props
/presentational-container-pattern

Enforce separation of concerns by separating the view from the application logic
/ai-ui-patterns

Design patterns for building AI-powered interfaces like chatbots and intelligent assistants
/react-2026

Modern React stack patterns for 2026 covering Vitest, custom Vite SSR, and React Compiler setup
/react-composition-2026 Skill only

Apply modern React composition patterns covering compound components, slots, polymorphism, and React 19 APIs

/react-render-optimization Skill only

Render optimization patterns for Vite and SPA apps covering component boundaries, deferred rendering, layout thrashing, and resource hints
/react-data-fetching Skill only

Data fetching patterns for React apps covering TanStack Query, Suspense, React.cache, and deferred promises

/client-side-rendering

Render your application's UI on the client
/server-side-rendering

Generate HTML to be rendered on the server in response to a user request
/static-rendering

Deliver pre-rendered HTML content that was generated when the site was built
/incremental-static-rendering

Update static content after you have built your site
/streaming-ssr

Stream HTML to the client as it is generated on the server
/progressive-hydration

Delay loading JavaScript for less important parts of the page
/react-server-components

Server Components complement SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle
/react-selective-hydration

Combine streaming server-side rendering with selective hydration for faster interactivity

11 skills

/components

Build self-contained modules that couple markup, logic, and styles
/composables

Functions to encapsulate and reuse stateful logic among multiple components
/script-setup

Write Composition API components with less boilerplate using script setup
/state-management

Manage application level state between components
/provide-inject

Have nested components access data without using props
/dynamic-components

Dynamically switch between components with the special <component> element
/async-components

Optimize web app performance by asynchronously loading components
/render-functions

Create component templates with programmatic JavaScript
/renderless-components

Create components that delegate markup to the parent while owning the logic
/container-presentational

Enforce separation of concerns by separating the view from the application logic
/data-provider

Utilize renderless components for managing and providing data

Download

Same skills, delivered as a ZIP to your inbox.