PatternsDevOfficial·57 Agent Skills Included

skills

JavaScript, React, and Vue design and performance patterns

Teaches proven design, rendering, and performance patterns for JavaScript, React, and Vue applications. Covers hooks, composables, server components, code splitting, hydration, and bundle optimization with copy-ready code examples. Eliminates guesswork when structuring components, fetching data, or speeding up slow page loads.

235|25

↗

npx skills add PatternsDev/skills --all -g -y

All Skills in This Repository (57)

Pure Emerald Level Indicators

📦 In Repo

PatternsDev

renderless-components

Encapsulate Vue component logic without rendering markup using scoped slots.

provide-inject

Share parent data to descendant components using provide() and inject().

container-presentational

Separate data fetching and business logic from presentation in Vue applications.

composables

Create Vue composables that share reactive state and lifecycle logic across components.

async-components

Lazy-load heavy Vue components with defineAsyncComponent and dynamic imports.

components

Create reusable Vue single-file components with template, script setup, and styles.

state-management

Create reactive Vue stores with Pinia defineStore for shared state.

script-setup

Simplify Vue 3 component scripts using script setup, defineProps, and defineEmits.

render-functions

Build Vue components programmatically using render functions and JSX.

dynamic-components

Switch Vue components dynamically using the is binding and KeepAlive.

data-provider

Encapsulate data fetching and state in Vue 3 scoped slots.

observer-pattern

Implement an Observable API with subscribe, unsubscribe, and notify methods.

Official

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install PatternsDev skills?▼

Run `npx skills add PatternsDev/skills --all -g -y` in your terminal to install all 58 patterns globally. You can also install a single pattern with `npx skills add PatternsDev/skills --skill hooks-pattern`.

What patterns are included in this collection?▼

It includes 58 patterns across three stacks: JavaScript design and performance patterns, React rendering and composition patterns, and Vue component patterns like composables and provide/inject.

Can I install only the patterns I need?▼

Yes. Install by stack with `npx skills add PatternsDev/skills/react` or pick individual skills by folder name, such as `--skill composables` or `--skill singleton-pattern`.

Does it work with Cursor and Claude Code?▼

Yes. All skills follow the standard SKILL.md format and work in Claude Code, Cursor, Codex, and other compatible coding environments.

How do these skills differ from the patterns.dev website?▼

The skills are stripped-down, agent-optimized versions of the patterns.dev guides with just prose and code blocks, no images or interactive embeds.