Skill directory

Agent skills

Focused instruction packs that teach a coding agent one job well. Browse the catalog and use any of them inside a RiverX project.

18,175Skills

1,902Publishers

249Official

47 skills

Sort by

AI UI Patternspatternsdev/skillsTeaches design patterns for building AI-powered React interfaces. Use when creating chatbots, intelligent assistants, streaming UIs, or any AI-driven user experience in React.01 Bundle Splittingpatternsdev/skillsTeaches bundle splitting techniques for web performance. Use when your application has a large JavaScript bundle that affects load times or when you need to reduce FCP/LCP.01 Client Side Renderingpatternsdev/skillsTeaches 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 user actions.01 Command Patternpatternsdev/skillsTeaches the command pattern for decoupling task execution from invocation. Use when you need undo/redo functionality, queued operations, or want to decouple the object that invokes an operation from the one that performs it.01 Compound Patternpatternsdev/skillsTeaches the compound component pattern for shared implicit state. Use when building related components like tabs, accordions, or dropdowns that need to coordinate without explicit prop passing.01 Compressionpatternsdev/skillsTeaches JavaScript compression techniques including Gzip and Brotli. Use when optimizing network transfer times or configuring server-side compression for production builds.01 Dynamic Importpatternsdev/skillsTeaches 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 startup.01 Factory Patternpatternsdev/skillsTeaches the factory pattern for flexible object creation. Use when you need to create objects dynamically without using the new keyword or when object creation logic should be centralized.01 Flyweight Patternpatternsdev/skillsTeaches the flyweight pattern for memory optimization. Use when your application creates large numbers of similar objects and memory consumption is a concern.01 Hoc Patternpatternsdev/skillsTeaches the Higher-Order Component (HOC) pattern for logic reuse. Use when you need to share cross-cutting concerns like authentication, logging, or data fetching across multiple components.01 Hooks Patternpatternsdev/skillsTeaches React Hooks for reusing stateful logic across components. Use when extracting shared behavior like form handling, subscriptions, or side effects into reusable custom hooks.01 Import On Interactionpatternsdev/skillsTeaches interaction-based lazy loading for non-critical resources. Use when you have heavy components or libraries that are only needed after user interaction like clicks, hovers, or form input.01 Import On Visibilitypatternsdev/skillsTeaches 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 user scrolls to them.01 Incremental Static Renderingpatternsdev/skillsTeaches Incremental Static Regeneration (ISR) for updating static content post-build. Use when you have static pages that need periodic updates without a full site rebuild.01 Islands Architecturepatternsdev/skillsTeaches the islands architecture pattern for partial hydration. Use when building content-heavy sites where most of the page is static and only small regions need interactivity.01 JS Performance Patternspatternsdev/skillsProvides framework-agnostic JavaScript runtime performance patterns. Use when optimizing hot paths, loops, DOM operations, caching, or data structure choices in performance-critical code.01 Loading Sequencepatternsdev/skillsTeaches resource loading sequence optimization for Core Web Vitals. Use when you need to improve FCP, LCP, or FID by reordering how critical resources are discovered and loaded.01 Mediator Patternpatternsdev/skillsTeaches the mediator pattern for centralized component communication. Use when multiple components need to communicate and direct coupling between them creates complexity or tight dependencies.01 Mixin Patternpatternsdev/skillsTeaches the mixin pattern for sharing functionality without inheritance. Use when you need to add reusable behavior to multiple objects or classes that don't share a common ancestor.01 Module Patternpatternsdev/skillsTeaches the module pattern for code organization and encapsulation. Use when structuring JavaScript into reusable, maintainable pieces with clear public and private boundaries.01 Observer Patternpatternsdev/skillsTeaches the observer pattern for event-driven communication. Use when you need decoupled publish/subscribe behavior where multiple parts of your system react to state changes or events.01 Prefetchpatternsdev/skillsTeaches resource prefetching strategies for faster navigation. Use when you can predict which resources the user will need next and want to load them during idle time.01 Preloadpatternsdev/skillsTeaches resource preloading to prioritize critical assets. Use when critical resources like fonts, hero images, or key scripts are discovered late in the loading waterfall.01 Presentational Container Patternpatternsdev/skillsTeaches the presentational/container pattern for separating view and logic. Use when you want to isolate data fetching and business logic from UI rendering for better testability and reuse.01 Progressive Hydrationpatternsdev/skillsTeaches progressive hydration for prioritized client-side interactivity. Use when server-rendered pages have non-critical sections whose JavaScript can be deferred to improve Time to Interactive.01 Prototype Patternpatternsdev/skillsTeaches the prototype pattern for property sharing via the prototype chain. Use when creating many objects of the same type that should share methods or properties efficiently.01 Provider Patternpatternsdev/skillsTeaches the provider pattern for sharing data across component trees. Use when multiple nested components need access to the same data and prop drilling becomes unwieldy.01 Proxy Patternpatternsdev/skillsTeaches the proxy pattern for intercepting object operations. Use when you need validation, logging, formatting, or access control on property access, assignment, or function invocation.01 Prplpatternsdev/skillsTeaches the PRPL pattern for optimizing initial page load. Use when building Progressive Web Apps or when you need to push critical resources, render the initial route, pre-cache remaining routes, and lazy-load on demand.01 React 2026patternsdev/skillsProvides a comprehensive guide to the modern React 2026 stack. Use when starting a new React project or modernizing an existing one with current frameworks, build tools, routing, state management, or AI integration.01 React Composition 2026patternsdev/skillsTeaches modern React composition patterns for 2025/2026. Use when designing component APIs, building shared UI libraries, or refactoring prop-heavy components.01 React Data Fetchingpatternsdev/skillsTeaches modern React data fetching patterns with TanStack Query, SWR, and Suspense. Use when implementing caching, deduplication, optimistic updates, or parallel loading in React applications.01 React Render Optimizationpatternsdev/skillsTeaches React rendering performance optimization patterns. Use when reducing unnecessary re-renders, optimizing memoization, improving state design, or diagnosing React performance issues.01 React Selective Hydrationpatternsdev/skillsTeaches selective hydration combined with streaming SSR in React 18+. Use when you need to prioritize hydrating interactive components while streaming the rest of the page.01 React Server Componentspatternsdev/skillsTeaches React Server Components for zero-bundle server rendering. Use when components only need server-side data access and don't require client-side interactivity like state or event handlers.01 Render Props Patternpatternsdev/skillsTeaches the render props pattern for flexible component composition. Use when you need to share rendering logic between components by passing a function that returns JSX as a prop.01 Route Basedpatternsdev/skillsTeaches route-based code splitting for single-page applications. Use when different routes load distinct feature sets and you want to avoid loading all route code upfront.01 Server Side Renderingpatternsdev/skillsTeaches server-side rendering (SSR) for React applications. Use when you need faster initial page loads, better SEO, or dynamic per-request HTML generation.01 Singleton Patternpatternsdev/skillsTeaches the singleton pattern for managing a single shared instance. Use when exactly one instance of a class or object is needed to coordinate actions across your application.01 Static Importpatternsdev/skillsTeaches static ES2015 import syntax for module dependencies. Use when you need to import code that is required at load time and benefits from static analysis and tree shaking.01 Static Renderingpatternsdev/skillsTeaches 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 maximum cacheability and performance.01 Streaming SSRpatternsdev/skillsTeaches streaming server-side rendering for chunked HTML delivery. Use when you need faster Time to First Byte and First Contentful Paint by streaming HTML as it's generated on the server.01 Third Partypatternsdev/skillsTeaches strategies for mitigating third-party script performance impact. Use when third-party scripts like analytics, ads, or widgets are degrading your page load times or Core Web Vitals.01 Tree Shakingpatternsdev/skillsTeaches tree shaking for dead code elimination in JavaScript bundles. Use when your bundle includes unused exports and you want to reduce the final bundle size during the build step.01 View Transitionspatternsdev/skillsTeaches the View Transitions API for animating DOM changes. Use when you want smooth animated transitions between pages or UI states without manual animation code.01 Virtual Listspatternsdev/skillsTeaches virtual list (windowing) techniques for rendering large datasets. Use when rendering lists or tables with hundreds or thousands of items that cause scroll jank or slow initial render.01 Vite Bundle Optimizationpatternsdev/skillsTeaches Vite-specific bundle optimization patterns. Use when configuring Vite builds, code splitting, managing dependencies, or troubleshooting slow Vite builds.01

Skills, installed in one click

Put a skill to work

Open any project, search the Skills panel in the chat, and the agent picks it up from there.

Start building free