PatternsDev

58 mods across 1 repository, 244 stars between them.

bundle-splitting

01

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 39 tokens

command-pattern

02

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago B 47 tokens

compression

03

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 30 tokens

dynamic-import

04

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 34 tokens

factory-pattern

05

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 35 tokens

flyweight-pattern

06

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 31 tokens

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 41 tokens

PatternsDev/skills

Skill Claude CodeCodex

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 user scrolls to them.

244 4mo ago A 38 tokens

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 36 tokens

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 38 tokens

loading-sequence

11

PatternsDev/skills

Skill Claude CodeCodex

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 discovered and loaded.

244 4mo ago A 42 tokens

mediator-pattern

12

PatternsDev/skills

Skill Claude CodeCodex

Teaches the mediator pattern for centralized component communication. Use when multiple components need to communicate and direct coupling between them creates complexity or tight dependencies.

244 4mo ago A 32 tokens

mixin-pattern

13

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 36 tokens

module-pattern

14

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 34 tokens

observer-pattern

15

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 37 tokens

prefetch

16

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 35 tokens

preload

17

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 34 tokens

prototype-pattern

18

PatternsDev/skills

Skill Claude CodeCodex

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 properties efficiently.

244 4mo ago A 33 tokens

provider-pattern

19

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 34 tokens

proxy-pattern

20

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 37 tokens

prpl

21

PatternsDev/skills

Skill Claude CodeCodex

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 initial route, pre-cache remaining routes, and lazy-load on demand.

244 4mo ago A 46 tokens

route-based

22

PatternsDev/skills

Skill Claude CodeCodex

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

244 4mo ago A 33 tokens

singleton-pattern

23

PatternsDev/skills

Skill Claude CodeCodex

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 across your application.

244 4mo ago A 34 tokens

static-import

24

PatternsDev/skills

Skill Claude CodeCodex

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 analysis and tree shaking.

244 4mo ago A 37 tokens