Patterns.dev Skills

Agent Skills for JavaScript, React, and Vue development. From patterns.dev.

58 individual skills. Install only the patterns you need.

Quick Start

By technology — install skills in a stack:

npx skills add PatternsDev/skills/javascript
npx skills add PatternsDev/skills/react
npx skills add PatternsDev/skills/vue

By skill name — install only the specific patterns you want:

npx skills add PatternsDev/skills --skill hooks-pattern
npx skills add PatternsDev/skills --skill singleton-pattern
npx skills add PatternsDev/skills --skill composables
npx skills add PatternsDev/skills --skill ai-ui-patterns

Individual --skill values use the skill folder name (e.g. hooks-pattern, ai-ui-patterns), not the path (react/hooks-pattern).

Manual Installation

Clone the repo and copy the skill directories you want:

cp -r react/hooks-pattern ~/.cursor/skills/
cp -r javascript/singleton-pattern ~/.cursor/skills/
cp -r vue/composables ~/.cursor/skills/

Works with .cursor/skills/, .claude/skills/, or .codex/skills/.

JavaScript Skills

Skill	Type	Description
singleton-pattern	Design	Share a single global instance throughout our application
observer-pattern	Design	Use observables to notify subscribers when an event occurs
proxy-pattern	Design	Intercept and control interactions to target objects
prototype-pattern	Design	Share properties among many objects of the same type
module-pattern	Design	Split up your code into smaller, reusable pieces
mixin-pattern	Design	Add functionality to objects or classes without inheritance
mediator-pattern	Design	Use a central mediator object to handle communication between components
flyweight-pattern	Design	Reuse existing instances when working with identical objects
factory-pattern	Design	Use a factory function in order to create objects
command-pattern	Design	Decouple methods that execute tasks by sending commands to a commander
provider-pattern	Design	Make data available to multiple child components
loading-sequence	Performance	Optimize your loading sequence to improve how quickly your app is usable
static-import	Performance	Import code that has been exported by another module
dynamic-import	Performance	Import parts of your code on demand
import-on-visibility	Performance	Load non-critical components when they are visible in the viewport
import-on-interaction	Performance	Load non-critical resources when a user interacts with UI requiring it
route-based	Performance	Dynamically load components based on the current route
bundle-splitting	Performance	Split your code into small, reusable pieces
prpl	Performance	Optimize initial load through precaching, lazy loading, and minimizing roundtrips
tree-shaking	Performance	Reduce the bundle size by eliminating dead code
preload	Performance	Inform the browser of critical resources before they are discovered
prefetch	Performance	Fetch and cache resources that may be requested some time soon
third-party	Performance	Reduce the performance impact third-party scripts have on your site
virtual-lists	Performance	Optimize list performance with list virtualization
compression	Performance	Reduce the time needed to transfer scripts over the network
islands-architecture	Rendering	Small, focused chunks of interactivity within server-rendered web pages
view-transitions	Rendering	Animate page transitions using the View Transitions API

React Skills

Skill	Type	Description
hooks-pattern	Design	Use functions to reuse stateful logic among multiple components
hoc-pattern	Design	Pass reusable logic down as props to components
compound-pattern	Design	Create multiple components that work together to perform a single task
render-props-pattern	Design	Pass JSX elements to components through props
presentational-container-pattern	Design	Enforce separation of concerns by separating the view from the application logic
ai-ui-patterns	Design	Design patterns for building AI-powered interfaces like chatbots and assistants
react-2026	Design	Comprehensive guide to building React apps with a modern 2026 stack
client-side-rendering	Rendering	Render your application's UI on the client
server-side-rendering	Rendering	Generate HTML to be rendered on the server in response to a user request
static-rendering	Rendering	Deliver pre-rendered HTML content that was generated when the site was built
incremental-static-rendering	Rendering	Update static content after you have built your site
streaming-ssr	Rendering	Stream HTML to the client as it is generated on the server
progressive-hydration	Rendering	Delay loading JavaScript for less important parts of the page
react-server-components	Rendering	Server Components compliment SSR, rendering without adding to the JS bundle
react-selective-hydration	Rendering	Combine streaming server-side rendering with selective hydration

Vue Skills

Skill	Type	Description
components	Design	Self-contained modules that couple markup, logic, and styles
composables	Design	Functions to encapsulate and reuse stateful logic among multiple components
script-setup	Design	Compile-time syntactic sugar for using the Composition API
state-management	Design	Manage application level state between components
provide-inject	Design	Have nested components access data without using props
dynamic-components	Design	Dynamically switch between components with the special component element
async-components	Performance	Optimize web app performance by asynchronously loading components
render-functions	Design	Create component templates with programmatic JavaScript
renderless-components	Design	Components that don't render their own markup
container-presentational	Design	Enforce separation of concerns by separating the view from the application logic
data-provider	Design	Utilize renderless components for managing and providing data

How skills differ from patterns.dev documentation

The patterns.dev website includes interactive CodeSandbox embeds, animated videos, diagrams, and visual walkthroughs. The skills here are agent-optimized, stripped down to just prose and code blocks. No images, no iframes, no visual assets.

For the full visual learning experience, visit patterns.dev.

If you want a more explicit comparison of positioning and scope, see KEY-DIFFS.md for notes on how these skills differ from Vercel's skills approach.

Resources

• github.com/PatternsDev/skills — source repository
• patterns.dev — the full pattern library with interactive examples
• Agent Skills Specification
• Agent Skills Overview