Patterns.dev Skills
58 narrow skills on JavaScript, React and Vue patterns from patterns.dev, installed by stack or one at a time
- 258 ★ on the repository
- Last commit
Minimal access
Why this level
- The skills are text and code examples, with no scripts in the set
- The SKILL.md header lists read-only tools: Read, Grep and Glob
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/patterns-dev-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills are text and code examples, with no scripts in the set
- The SKILL.md header lists read-only tools: Read, Grep and Glob
This is third-party code. Review the repository files before installing.
What it does
Patterns.dev Skills is a set of 58 separate skills built from the patterns.dev site. One skill covers one pattern: when to apply it, what instructions the agent receives and what the avoid and prefer examples look like. The set is split into three folders: javascript, react and vue. Topics are grouped by task. Design patterns: `singleton`, `observer`, `proxy`, `hooks`, `compound`, `composables`. Loading and performance: `dynamic-import`, `tree-shaking`, `preload`, `prefetch`, `virtual-lists`. Rendering: server-side rendering, streaming SSR, React server components, islands architecture, View Transitions. Images, sandboxes and iframes are stripped from the site material, so only text and code blocks remain. A skill takes little room in the agent context, and you can install one stack folder or a single topic instead of the whole set.
Who it is for. Frontend teams on React or Vue who want the agent to pick a pattern and a rendering strategy on purpose.
Good fit when
- The agent extracts repeated form or subscription logic into a custom hook, and you need hook rules without extra useEffect calls
- The bundle is heavy: it has to be split by route and components loaded on visibility or on click
- A rendering strategy is being chosen, for example streaming SSR or static output refreshed on a schedule
- A Vue team writes a composable, moves to script setup or decides how to keep shared state
Not a fit when
- A Next.js project that needs App Router and Vercel platform rules: the examples here are written without tying to Next.js
- An Angular or Svelte stack: the set covers only JavaScript, React and Vue
- Interactive demos and diagrams are needed: the skills hold only text and code, the visual version stayed on patterns.dev
Example request
Move data loading out of ProfilePage into a custom hook following the hooks-pattern skill and drop the extra useEffectLimitations
- Only JavaScript, React and Vue are covered, no other frameworks.
- The skills carry no images, sandboxes or animations, the visual walkthroughs stayed on patterns.dev.
- The `--skill` flag takes the skill folder name, such as `hooks-pattern`; the path `react/hooks-pattern` does not fit.
- The last commit was in April 2026, so React and Vue versions in the examples may be outdated.
- Data-fetching examples rely on TanStack Query and SWR, and the set has no rules for the Next.js App Router or the Vercel platform.
How to disable. Delete the skill folder from `.claude/skills/`, `.cursor/skills/` or `.codex/skills/`, wherever it was installed or copied.
FAQ
How do I install a single pattern from the set?
Run `npx skills add PatternsDev/skills --skill hooks-pattern` with the skill you need. The value is the folder name, the path `react/hooks-pattern` will not work.
How do I copy a skill by hand?
Clone the repository and copy a folder, for example `cp -r react/hooks-pattern ~/.cursor/skills/`. The `.cursor/skills/`, `.claude/skills/` and `.codex/skills/` directories all work.
How is the set different from Vercel skills?
By the author's description, Vercel skills are large and aimed at Next.js, while here each skill covers one pattern, with no Next.js tie and a lean towards Vite. A detailed comparison sits in KEY-DIFFS.md in the repository.
How are the skills linked to each other?
The SKILL.md header has a `related_skills` field: for `hooks-pattern` it lists `hoc-pattern` and `render-props-pattern`. The agent follows them to neighboring patterns.
What permissions does a skill get in the agent?
`hooks-pattern` allows only Read, Grep and Glob in its SKILL.md header, and the `context: fork` field runs it in a separate context. For other skills, compare the SKILL.md header before installing.
Discussion
No questions or reviews yet.
Related
SkillsA registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
julianromli/ai-skills
ai-skills
A collection of 31 skills for Claude Code and other agents: interfaces, React, Postgres, code review, SEO and browser automation
A set of skills for Vue 3 development: Composition API practices, router, Pinia, testing, JSX, Options API and debugging
35 skills for Cursor, Claude and Codex: design systems from HTML and mocks, image generation, plan interviews and handoff.
Hand-built skills for Angular, React, Next.js, TypeScript and Django plus six community ones for Java, Elixir and Electron
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Patterns.dev Skills (this card) | no | 258 | |
| vue-skills | no | 3,334 | a Vue team skill set for Vue 3: Composition API, router, Pinia; here the patterns are broader and include React and loading |
| Vercel skills for agents | no | 33,964 | large Vercel skills on React and Next.js performance; here each skill covers one pattern with no Next.js tie |
README in short
The README opens with install commands by stack and by skill name, then shows manual copying. Three tables list the JavaScript, React and Vue skills with a type and description. It ends by explaining the difference from the patterns.dev site and linking the Agent Skills specification.
README badge
Original SKILL.md
--- name: hooks-pattern description: Teaches React Hooks for reusing stateful logic across components. Use when extracting shared behavior like form handling, subscriptions, or side effects into reusable custom hooks. context: fork allowed-tools: Read, Grep, Glob paths: - "**/*.tsx" - "**/*.jsx" license: MIT metadata: author: patterns.dev version: "1.1" related_skills: - "hoc-pattern" - "render-props-pattern" --- # Hooks Pattern ## Table of Contents - [When to Use](#when-to-use) - [Instructions](#instructions) - [Details](#details) - [Source](#source) React 16.8 introduced a new feature called [**Hooks**](https://react.dev/reference/react/hooks). Hooks make it possible to use React state and lifecycle methods, without having to use an ES2015 class component. Although Hooks are not necessarily a design pattern, Hooks play a very important role in your application design. Many traditional design patterns can be replaced by Hooks. ## When to Use - Use this when you need to add state or lifecycle behavior to functional components - This is helpful for extracting and reusing stateful logic across multiple components - Use this instead of class components for cleaner, more composable code ## Instructions - Use `useState` for local state and `useEffect` for side effects in functional components - Create custom hooks (prefixed with `use`) to encapsulate and share reusable logic - Follow the Rules of Hooks: only call hooks at the top level and only in React functions - Avoid unnecessary `useEffect` — compute derived state directly in the component body - Let the React Compiler handle memoization instead of manual `useMemo`/`useCallback` where possible ## Details