SkillFoxx
Telegram

Patterns.dev Skills

58 узких скиллов по паттернам JavaScript, React и Vue с сайта patterns.dev, которые ставятся по стеку или по одному

  • 258 ★ репозитория
  • Последний коммит
Скилл

Минимальный доступ

Почему такой уровень

  • Скиллы состоят из текста и примеров кода, скриптов в наборе нет
  • В заголовке SKILL.md указаны инструменты только для чтения: Read, Grep и Glob
Все причины и проверки

patternsdev/skillsАвтор:PatternsDev

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/patterns-dev-skills

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

  • Скиллы состоят из текста и примеров кода, скриптов в наборе нет
  • В заголовке SKILL.md указаны инструменты только для чтения: Read, Grep и Glob

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Patterns.dev Skills — набор из 58 отдельных скиллов по материалам сайта patterns.dev. Один скилл описывает один паттерн: когда его применять, какие инструкции получает агент и как выглядят примеры в формате «избегать» и «предпочитать». Весь набор разделен на три папки: javascript, react и vue. Темы сгруппированы по задачам. Паттерны проектирования: `singleton`, `observer`, `proxy`, `hooks`, `compound`, `composables`. Загрузка и производительность: `dynamic-import`, `tree-shaking`, `preload`, `prefetch`, `virtual-lists`. Рендеринг: server-side rendering, потоковый SSR, серверные компоненты React, архитектура островов, View Transitions. Из материалов сайта убраны картинки, песочницы и встроенные фреймы, остались текст и блоки кода. Поэтому скилл занимает мало места в контексте агента, а вместо всего набора можно поставить нужную папку стека или одну тему.

Для кого. Фронтенд-командам на React или Vue, которые хотят, чтобы агент выбирал паттерн и способ рендеринга осознанно.

Подходит, если

  • Агент выносит повторяющуюся логику формы или подписки в кастомный хук, и нужны правила хуков без лишних useEffect
  • Бандл тяжелый: его надо разделить по маршрутам и подгружать компоненты по видимости или по клику
  • Выбирается способ рендеринга, например потоковый SSR или статика с обновлением по расписанию
  • Команда на Vue пишет композабл, переходит на script setup или решает, как хранить общее состояние

Не подходит, если

  • Проект на Next.js, где нужны правила под App Router и платформу Vercel: примеры здесь написаны без привязки к Next.js
  • Стек на Angular или Svelte: в наборе только JavaScript, React и Vue
  • Нужны интерактивные демо и схемы: в скиллах только текст и код, визуальная версия осталась на patterns.dev

Пример запроса к агенту

Вынеси загрузку данных из ProfilePage в кастомный хук по скиллу hooks-pattern и убери лишний useEffect

Ограничения

  • Охвачены только JavaScript, React и Vue, остальных фреймворков нет.
  • В скиллах нет картинок, песочниц и анимаций, наглядные разборы остались на patterns.dev.
  • Флаг `--skill` принимает имя папки скилла, например `hooks-pattern`; путь `react/hooks-pattern` не подходит.
  • Последний коммит сделан в апреле 2026, версии React и Vue в примерах могли устареть.
  • Примеры данных опираются на TanStack Query и SWR, правил под App Router Next.js и платформу Vercel в наборе нет.

Как отключить. Удалите папку нужного скилла из `.claude/skills/`, `.cursor/skills/` или `.codex/skills/`, куда он был поставлен или скопирован.

Частые вопросы

Как поставить один паттерн из набора?

Выполните `npx skills add PatternsDev/skills --skill hooks-pattern`, подставив имя нужного скилла. Значением служит имя папки, путь `react/hooks-pattern` не подойдет.

Как скопировать скилл вручную?

Склонируйте репозиторий и скопируйте папку, например `cp -r react/hooks-pattern ~/.cursor/skills/`. Подходят каталоги `.cursor/skills/`, `.claude/skills/` и `.codex/skills/`.

Чем набор отличается от скиллов Vercel?

По описанию автора, у Vercel скиллы крупные и нацелены на Next.js, а здесь по одному паттерну на скилл, без привязки к Next.js и с уклоном в Vite. Подробное сравнение лежит в файле KEY-DIFFS.md репозитория.

Как скиллы связаны друг с другом?

В заголовке SKILL.md есть поле `related_skills`: у `hooks-pattern` там указаны `hoc-pattern` и `render-props-pattern`. По ним агент переходит к соседним паттернам.

Какие права получает скилл в агенте?

У `hooks-pattern` в заголовке SKILL.md разрешены только Read, Grep и Glob, а поле `context: fork` запускает его в отдельном контексте. У остальных скиллов сверьте заголовок SKILL.md перед установкой.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили

СкиллМинимальный доступ3,6 тыс.

Сборник из 31 скилла для Claude Code и других агентов: интерфейсы, React, Postgres, код-ревью, SEO и браузерная автоматизация

СкиллРасширенный доступ219

Набор скиллов для разработки на Vue 3: практики Composition API, роутер, Pinia, тесты, JSX, Options API и разбор ошибок

СкиллМинимальный доступ3,3 тыс.

35 скиллов для Cursor, Claude и Codex: дизайн-системы из HTML и макетов, генерация картинок, допрос по плану и передача контекста.

СкиллРасширенный доступ329

Авторские скиллы под Angular, React, Next.js, TypeScript и Django плюс шесть общинных для Java, Elixir и Electron

СкиллМинимальный доступ668

Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных

СкиллМинимальный доступ114,1 тыс.113

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

ИнструментОфициальныйЗвезды репозиторияГлавное отличие
Patterns.dev Skills (эта карточка)нет258
vue-skillsнет3 334набор скиллов команды Vue для Vue 3: Composition API, роутер, Pinia; здесь паттерны шире, включая React и загрузку
Скиллы Vercel для агентовнет33 964крупные скиллы Vercel про производительность React и Next.js; здесь по одному паттерну на скилл без привязки к Next.js

Коротко о README

README начинается с команд установки по стеку и по имени скилла, затем показывает ручное копирование. Три таблицы перечисляют скиллы JavaScript, React и Vue с типом и описанием. В конце объяснено отличие от сайта patterns.dev и даны ссылки на спецификацию Agent Skills.

Бейдж для README

Исходный 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

Сообщить о проблеме