Updated 6mo ago
by PatternsDev
skills
Agent skills for https://patterns.dev
255 GitHub stars (255)
+4 in 16 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | +1 |
| Oct 3 | 0 |
| Oct 4 | 0 |
| Oct 5 | +1 |
| Oct 6 | 0 |
| Oct 7 | 0 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | 0 |
| Oct 11 | 0 |
| Oct 12 | 0 |
| Oct 13 | +1 |
| Oct 14 | +1 |
| Oct 15 | 0 |
| Oct 16 | 0 |
- 30 skills (30 skills found in its SKILL.md files)
- 27 forks (27 forks)
- 6mo ago last update (Last updated 6mo ago)
Install
Skills CLI
npx skills add PatternsDev/skills
Asks which skills and agents to install. Just one: npx skills add PatternsDev/skills --skill bundle-splitting — add -g for every project.
Claude Code
git clone https://github.com/PatternsDev/skillscp -r "skills/javascript/bundle-splitting" ~/.claude/skills/
Copies the bundle-splitting skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add PatternsDev/skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md — showing the first 30 of 58 files.
-
bundle-splitting
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.
javascript/bundle-splitting/SKILL.md on GitHub (opens in a new tab) -
command-pattern
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.
javascript/command-pattern/SKILL.md on GitHub (opens in a new tab) -
compression
Teaches JavaScript compression techniques including Gzip and Brotli. Use when optimizing network transfer times or configuring server-side compression for production builds.
javascript/compression/SKILL.md on GitHub (opens in a new tab) -
dynamic-import
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.
javascript/dynamic-import/SKILL.md on GitHub (opens in a new tab) -
factory-pattern
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.
javascript/factory-pattern/SKILL.md on GitHub (opens in a new tab) -
flyweight-pattern
Teaches the flyweight pattern for memory optimization. Use when your application creates large numbers of similar objects and memory consumption is a concern.
javascript/flyweight-pattern/SKILL.md on GitHub (opens in a new tab) -
import-on-interaction
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.
javascript/import-on-interaction/SKILL.md on GitHub (opens in a new tab) -
import-on-visibility
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.
javascript/import-on-visibility/SKILL.md on GitHub (opens in a new tab) -
islands-architecture
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.
javascript/islands-architecture/SKILL.md on GitHub (opens in a new tab) -
js-performance-patterns
Provides framework-agnostic JavaScript runtime performance patterns. Use when optimizing hot paths, loops, DOM operations, caching, or data structure choices in performance-critical code.
javascript/js-performance-patterns/SKILL.md on GitHub (opens in a new tab) -
loading-sequence
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.
javascript/loading-sequence/SKILL.md on GitHub (opens in a new tab) -
mediator-pattern
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.
javascript/mediator-pattern/SKILL.md on GitHub (opens in a new tab) -
mixin-pattern
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.
javascript/mixin-pattern/SKILL.md on GitHub (opens in a new tab) -
module-pattern
Teaches the module pattern for code organization and encapsulation. Use when structuring JavaScript into reusable, maintainable pieces with clear public and private boundaries.
javascript/module-pattern/SKILL.md on GitHub (opens in a new tab) -
observer-pattern
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.
javascript/observer-pattern/SKILL.md on GitHub (opens in a new tab) -
prefetch
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.
javascript/prefetch/SKILL.md on GitHub (opens in a new tab) -
preload
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.
javascript/preload/SKILL.md on GitHub (opens in a new tab) -
prototype-pattern
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.
javascript/prototype-pattern/SKILL.md on GitHub (opens in a new tab) -
provider-pattern
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.
javascript/provider-pattern/SKILL.md on GitHub (opens in a new tab) -
proxy-pattern
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.
javascript/proxy-pattern/SKILL.md on GitHub (opens in a new tab) -
prpl
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.
javascript/prpl/SKILL.md on GitHub (opens in a new tab) -
route-based
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.
javascript/route-based/SKILL.md on GitHub (opens in a new tab) -
singleton-pattern
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.
javascript/singleton-pattern/SKILL.md on GitHub (opens in a new tab) -
static-import
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.
javascript/static-import/SKILL.md on GitHub (opens in a new tab) -
third-party
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.
javascript/third-party/SKILL.md on GitHub (opens in a new tab) -
tree-shaking
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.
javascript/tree-shaking/SKILL.md on GitHub (opens in a new tab) -
view-transitions
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.
javascript/view-transitions/SKILL.md on GitHub (opens in a new tab) -
virtual-lists
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.
javascript/virtual-lists/SKILL.md on GitHub (opens in a new tab) -
vite-bundle-optimization
Teaches Vite-specific bundle optimization patterns. Use when configuring Vite builds, code splitting, managing dependencies, or troubleshooting slow Vite builds.
javascript/vite-bundle-optimization/SKILL.md on GitHub (opens in a new tab) -
ai-ui-patterns
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.
react/ai-ui-patterns/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.