PatternsDev

58 mods across 1 repository, 244 stars between them.

third-party

25

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 38 tokens

tree-shaking

26

PatternsDev/skills

Skill Claude CodeCodex

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 size during the build step.

244 4mo ago A 38 tokens

view-transitions

27

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 34 tokens

virtual-lists

28

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 40 tokens

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 35 tokens

ai-ui-patterns

30

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 38 tokens

PatternsDev/skills

Skill Claude CodeCodex

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 user actions.

244 4mo ago A 38 tokens

compound-pattern

32

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 37 tokens

hoc-pattern

33

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 41 tokens

hooks-pattern

34

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 35 tokens

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 39 tokens

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 39 tokens

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 39 tokens

react-2026

38

PatternsDev/skills

Skill Claude CodeCodex

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, build tools, routing, state management, or AI integration.

244 4mo ago A 47 tokens

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 39 tokens

react-data-fetching

40

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 43 tokens

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 35 tokens

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 38 tokens

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 38 tokens

PatternsDev/skills

Skill Claude CodeCodex

Teaches 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.

244 4mo ago A 37 tokens

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 36 tokens

static-rendering

46

PatternsDev/skills

Skill Claude CodeCodex

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 maximum cacheability and performance.

244 4mo ago A 42 tokens

streaming-ssr

47

PatternsDev/skills

Skill Claude CodeCodex

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 as it's generated on the server.

244 4mo ago A 42 tokens

async-components

48

PatternsDev/skills

Skill Claude CodeCodex

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 loaded on demand.

244 4mo ago A 33 tokens