🎯Skills58
Agent skill from patterns.dev providing a comprehensive guide to building React apps with a modern 2026 stack — part of the React design pattern set in an agent-optimized prose+code format.
Agent skill from patterns.dev covering design patterns for building AI-powered interfaces like chatbots and assistants — an agent-optimized, prose+code-only version of the patterns.dev React design pattern content (no iframes or videos).
Agent skill from patterns.dev that teaches the React Hooks pattern — using functions to reuse stateful logic among multiple components — packaged as a stripped-down, agent-optimized version of the patterns.dev content (prose + code only, no interactive embeds).
Patterns.dev skill for modern React composition — replace boolean-prop proliferation with explicit composition, build compound components with Context, use explicit variant components over mode props, prefer children over render props, and decouple state interface from implementation so providers can swap without changing consumers. Applied during component design, generation, and review.
patterns.dev skill teaching **`import()` dynamic imports** for on-demand code loading — use `React.lazy` + `Suspense` (or `loadable-components` for SSR) to keep modals, emoji pickers, and other non-critical modules out of the initial bundle, with an example reducing the main bundle from 1.5 MiB to 1.33 MiB.
Patterns.dev skill teaching modern React data-fetching patterns — parallel fetches with `Promise.all`, defer-await, TanStack Query / SWR with caching and deduplication, Suspense + `useSuspenseQuery` for declarative loading, and prefetch-on-hover for instant navigation. Applied during code generation, review, and refactoring of `fetch` + `useEffect` anti-patterns.
Patterns.dev skill for React render-performance optimization — compute derived values during render (not stored state), subscribe to coarse-grained values (`isMobile` not `width`), extract expensive subtrees into memoized components for early-return skipping, lazy `useState` init, and functional `setState` for stable callbacks. Ordered by impact, with React Compiler caveats noted.
patterns.dev skill teaching **bundle splitting** with Webpack or Rollup — separate non-critical code (rarely-used features, interaction-triggered modules) out of the initial bundle to improve FCP, LCP, and TTI without changing user-visible behavior.
patterns.dev skill teaching **JavaScript compression** — prefer Brotli over Gzip at the server/CDN or via Webpack `CompressionPlugin`/`BrotliWebpackPlugin`, always minify first, and respect the granularity trade-off that a single large bundle compresses better (`compress(a+b) <= compress(a)+compress(b)`) while smaller chunks cache better.
patterns.dev skill teaching **interaction-based lazy loading** — defer heavy modules (video players, chat widgets, auth SDKs, share features) with dynamic `import()` and lightweight facades (e.g. YouTube Lite Embed) so they only load on click/hover, improving FID/INP and TTI.
Teaches how to order resource loading — critical HTML, CSS, JS, fonts, images — so your app becomes usable as quickly as possible. Part of the patterns.dev performance pattern library.
patterns.dev skill teaching `<link rel="preload">` and `/* webpackPreload: true */` to prioritize **late-discovered critical resources** (fonts, hero scripts, key JS) for TTI/LCP wins — with the `async`-hack variant, the `as=`/`crossorigin` rules, and a warning not to preload anything that isn't needed within ~1 second of first render.
patterns.dev skill teaching **resource prefetching** with `<link rel="prefetch">` and Webpack's `/* webpackPrefetch: true */` magic comment — load likely-soon resources at low priority during idle time to make subsequent navigations instant, with warnings about wasting data on metered/low-bandwidth connections.
patterns.dev skill teaching **tree shaking** — use ES2015 `import`/`export` (not CommonJS), named imports, and `sideEffects` in `package.json` so Webpack / Rollup can traverse the module graph from the entry point and eliminate dead code during the build.
patterns.dev skill teaching **route-based code splitting** — combine React Suspense / `loadable-components` with `react-router` (or use built-in support in Next.js / Remix / React Router) to lazily load only the components needed for the current route, piggybacking on the loading tolerance users already expect during navigation.
patterns.dev skill teaching the React container/presentational pattern — separate data-fetching/state (container) from pure rendering (presentational) for testability and reuse, while noting that custom Hooks generally achieve the same separation in modern React without the extra component layer.
patterns.dev skill teaching the React compound component pattern — use React Context plus static child properties (e.g. `FlyOut.Toggle`, `FlyOut.List`) to share implicit state across related sub-components like dropdowns, tabs, menus, and accordions while keeping the outer API clean; warns when Context overhead isn't justified for simple one-off UIs.
patterns.dev skill teaching **list virtualization / windowing** with `react-window` (`FixedSizeList`, `VariableSizeList`, Grid) and `react-window-infinite-loader` for rendering huge lists/tables efficiently — plus guidance on when CSS `content-visibility: auto` suffices, and a11y caveats when screen readers need all items in the DOM.
patterns.dev skill teaching **visibility-based lazy loading** with `IntersectionObserver`, `react-lazyload`, or `react-loadable-visibility` — load below-the-fold images, widgets, and heavy components only when they scroll into view, while warning against lazy-loading above-the-fold content that would hurt LCP or SEO.
patterns.dev skill teaching **third-party script optimization** — analytics, ads, embeds, and chat widgets that drag down Core Web Vitals — via `async`/`defer`, `preconnect`/`dns-prefetch`, facades for YouTube/social embeds, self-hosting critical scripts, and the Next.js `Script` component's `strategy` values.
patterns.dev skill teaching **ES2015 static imports** — the default `import module from "module"` form that bundles everything into the initial bundle; understand when to use it for initial-render-critical code and when to switch to dynamic `import()` for components like EmojiPicker that aren't needed upfront.
patterns.dev skill teaching the React Higher-Order Component (HOC) pattern — a function that takes a component and returns an enhanced one for cross-cutting concerns like auth, logging, or data fetching; warns that custom hooks are usually the cleaner modern answer to avoid wrapper hell, prop collisions, and obscured DevTools trees.
patterns.dev skill teaching the **PRPL pattern** — **Push** critical resources (HTTP/2 / preload hints), **Render** the initial route ASAP, **Pre-cache** frequently visited routes with service workers, and **Lazily load** the rest — via an app-shell architecture tuned for low-end devices and poor networks.
patterns.dev skill teaching the React render-props pattern — a component owns shared logic but delegates rendering to a function passed via the `render` (or `children`) prop; covers when to pick it over HOCs (naming collisions, deep nesting) and when custom hooks are the cleaner modern answer.
patterns.dev skill teaching Client-Side Rendering (CSR) for React SPAs — when the server ships only a barebones HTML shell and the client handles data fetching, templating, and routing in JavaScript; covers when to use CSR (internal tools, dashboards, SEO-insensitive SPAs) and when to pick SSR/SSG instead, plus bundle-size, code-splitting, and service-worker guidance.
Teaches how to combine streaming server-side rendering with selective hydration in React, prioritizing interactive parts of the page while the rest streams. Part of the patterns.dev agent-optimized pattern library.
Teaches React Server Components — components that render on the server and complement SSR without adding to the client JavaScript bundle. Part of the patterns.dev agent-optimized library.
Teaches progressive hydration for SSR apps with non-critical sections — defer JavaScript attachment so the First Contentful Paint stays fast while Time to Interactive improves for prioritized regions.
Teaches server-side rendering — generating HTML on the server in response to each user request — with tradeoffs around latency, caching, and interactivity. Part of the patterns.dev React rendering library.
Teaches incremental static rendering — updating statically generated pages after the site has been built — so content stays fresh without a full rebuild. Part of the patterns.dev rendering library.
Teaches static rendering — delivering pre-rendered HTML generated at build time for fast first-byte and cacheable pages. Part of the patterns.dev agent-optimized library.
patterns.dev skill teaching framework-agnostic **JavaScript runtime performance patterns** for measured hot paths — `Set`/`Map` for O(1) lookups vs `Array.includes`, batching DOM reads/writes to avoid layout thrashing, caching property access in tight loops, memoizing pure functions, and combining `.filter().map().reduce()` chains into single passes.
patterns.dev skill with Vite + React production bundle-optimization patterns — kill barrel-file imports via `vite-plugin-barrel` (lucide-react, MUI, Radix, lodash), configure `manualChunks` so vendor cache survives app updates, split routes with `React.lazy`, and lazy-load heavy below-the-fold components (editors, charts, maps) to improve LCP.
Teaches streaming server-side rendering — sending HTML to the client in chunks as it's generated on the server — for faster time-to-first-byte and progressive page display. Part of the patterns.dev library.
patterns.dev skill teaching the **command pattern** — route operations through a single `execute(command, ...args)` on a manager (e.g. `OrderManager` with `PlaceOrderCommand`, `CancelOrderCommand`, `TrackOrderCommand`) so commands can be queued, logged, or rescheduled; warns the extra boilerplate is rarely worth it for simple JavaScript apps.
patterns.dev skill teaching the **factory pattern** in JavaScript — using functions (often ES6 arrows) to return new objects without `new`, centralizing creation logic that depends on environment or configuration; warns that for simple cases a plain object literal suffices and class constructors can be more memory-efficient via shared prototype methods.
patterns.dev skill teaching the **ES2015 module pattern** — use `import`/`export` (named + default), keep non-exported values private to the file to avoid global scope pollution, enable tree-shaking, and use `import()` dynamic imports for on-demand loading.
patterns.dev skill teaching the **observer pattern** — build an `Observable` with `subscribe`/`unsubscribe`/`notify` and plug in subscribers like `logger` or `toastify` so UI events (button clicks, switch toggles) fan out to loosely coupled reactions; notes RxJS for advanced reactive needs and the performance cost of too many subscribers.
patterns.dev skill teaching the **singleton pattern** — guard a single instance in the constructor and `Object.freeze` the export so state is shared across modules, while warning that hidden global coupling hurts testability and that in React you should prefer Context/Redux/module-scoped variables over class singletons.
patterns.dev skill teaching the **mixin pattern** — share functionality across classes without inheritance by `Object.assign(Class.prototype, mixin)` (e.g. `dogFunctionality` on `Dog.prototype`); warns about prototype pollution risks and that React prefers Hooks (not mixins) for composable behavior.
patterns.dev skill teaching the **View Transitions API** — wrap DOM changes in `document.startViewTransition(callback)`, use CSS `view-transition-name` + `contain: layout` to animate specific elements (photo gallery, page navigations), target `::view-transition-old(NAME)`/`::view-transition-new(NAME)` for per-group animations, and keep the frozen-DOM window short.
patterns.dev skill teaching the React **provider pattern** — kill prop drilling for themes, auth, locale, and global state by wrapping the tree in a `React.createContext()` provider and consuming via `useContext` or a custom hook; warns that frequently-updated values cause all consumers to re-render, so split contexts by concern.
patterns.dev skill teaching the JavaScript **proxy pattern** — intercept and control interactions to target objects using ES6 `Proxy` with `get`, `set`, and other traps for validation, formatting, notifications, and debugging without modifying the original object.
patterns.dev skill teaching the **prototype pattern** — share properties among many objects of the same type using JavaScript's prototypal inheritance, allowing efficient cloning and extension through the prototype chain instead of duplicating data across instances.
patterns.dev skill teaching the **mediator/middleware pattern** — funnel many-to-many communication through a single coordinator (chatroom users via a `ChatRoom`, Express.js request handling via chained `app.use(...)` middleware) so components stay ignorant of each other; warns against letting the mediator become a god object.
patterns.dev skill teaching the **flyweight pattern** — when creating thousands of near-identical objects (e.g. library book copies sharing an ISBN), cache shared intrinsic state in a `Map` and layer per-instance extrinsic state on top; notes JavaScript's prototypal inheritance often makes this obsolete on modern hardware.
patterns.dev skill teaching **islands architecture** — render pages as mostly static HTML with independent interactive "islands" that hydrate on demand (Astro/Marko/Eleventy, `client:visible` directives), cutting JavaScript payload for blogs, product pages, and news sites while keeping SEO and selective interactivity.
A comprehensive collection of JavaScript, React, and Vue design patterns covering composables, state management, HOCs, render props, compound components, server components, dynamic/async loading, and performance optimization.
A Vue.js design pattern skill from patterns.dev that teaches the Composables pattern for encapsulating and reusing stateful logic among multiple components using composition functions.
A Vue.js design pattern skill from patterns.dev that teaches the Container/Presentational pattern for enforcing separation of concerns by separating view rendering from application logic.
Teaches the Vue async components pattern for optimizing web application performance by asynchronously loading components, reducing initial bundle size and improving load times.
A Patterns.dev skill for Vue that teaches how to manage application-level state between components, based on established design patterns from patterns.dev.
A Vue.js skill for creating component templates with programmatic JavaScript render functions, enabling dynamic and flexible component design patterns.
Agent-optimized design and performance pattern skills for JavaScript, React, and Vue development from patterns.dev, covering 58 individual patterns including singleton, observer, hooks, server-side rendering, and more.
Agent-optimized design and performance pattern skills for JavaScript, React, and Vue development from patterns.dev, covering 58 individual patterns including singleton, observer, hooks, server-side rendering, and more.
A collection of 58 agent-optimized design pattern skills for JavaScript, React, and Vue development from patterns.dev. Covers design patterns (singleton, observer, proxy), performance patterns (code splitting, tree shaking, virtual lists), and rendering patterns (SSR, ISR, streaming) as installable SKILL.md files.
A Vue.js design pattern skill from Patterns.dev that teaches the provide/inject pattern for sharing data between nested components without passing props through every level.
Agent-optimized skills from patterns.dev covering 58 JavaScript, React, and Vue design patterns and performance techniques. Includes design patterns (singleton, observer, hooks, composables), rendering strategies, and performance optimizations.