Module Pattern

This teaches you how to organize JavaScript code using ES2015 modules with proper encapsulation. You'll learn when to use named versus default exports, how to keep values private to avoid polluting the global scope, and when to leverage dynamic imports for code splitting. The skill covers practical patterns from patterns.dev, including renaming imports to avoid collisions and using the asterisk syntax to import everything from a module. It's honest about when not to bother with this pattern, like in trivial scripts or when you're already using a bundler that handles encapsulation. The React examples show how module scoping lets you reuse variable names like `style` across components without conflicts, which is the kind of real world benefit that makes modules worth understanding beyond just build tool requirements.

Install to Claude Code

npx -y skills add patternsdev/skills --skill module-pattern --agent claude-code