react-flow-skill
Скилл для Claude Code по React Flow 12: узлы и ребра, раскладка, состояние, тесты Playwright и миграция с reactflow.
- 56 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл состоит из инструкций и справочных материалов и сам ничего не запускает.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/react-flow-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит из инструкций и справочных материалов и сам ничего не запускает.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл ведет Claude Code при работе над интерактивными графовыми интерфейсами на React Flow (`@xyflow/react` версии 12 и новее). Материал собран в 16 справочных тем: основы, свои узлы и ребра, интерактивность, управление состоянием, TypeScript, раскладка через `dagre`, `elkjs` и `d3`, компоненты и хуки, производительность, стили, поиск неполадок. Отдельные темы закрывают тесты на Playwright, шаблоны отмены и повтора действий, копирования и сохранения графа, доступность, серверный рендеринг и гидратацию, а также типовые рецепты вроде контекстного меню и боковой панели с перетаскиванием. В комплект входит контракт поведения агента из 12 правил: импорты, размеры контейнера, стабильность `nodeTypes`, видимость Handle, неизменяемое состояние.
Для кого. Фронтенд-разработчикам, которые строят редакторы схем, воркфлоу и графы на React Flow вместе с Claude Code.
Подходит, если
- Холст пустой или ребра не показываются, и надо быстро найти типовую причину.
- Старый проект переводят с пакетов `reactflow` и `react-flow-renderer` на `@xyflow/react` 12.
- Граф укладывают автоматически через `dagre` или `elkjs` и вкладывают узлы друг в друга.
- Для редактора графа пишут тесты на Playwright с выбором узлов, ребер и соединений.
Не подходит, если
- Проект сидит на версии ниже 12 и обновляться не собирается.
- Графики и диаграммы рисуются другой библиотекой, например D3 или Mermaid.
- Нужны подсказки по общей архитектуре React без привязки к графам.
Пример запроса к агенту
Подключи React Flow, сделай свои узлы с двумя Handle и автоматическую раскладку через `dagre`, а потом покрой граф тестами на Playwright.Ограничения
Скилл проверен на `@xyflow/react` 12.12.0 по состоянию на 28 сентября 2026 года. У более новых версий API помечены заметками, поэтому версию в проекте надо сверять с установленной. Работает с Claude Code, остальные агенты в README не названы. Для проверки репозитория нужны Node.js 22.12 или новее и npm: примеры из Markdown типизируются, а регрессии браузера гоняются в Playwright. Оценки с живыми агентами запускаются отдельно, а CI к сервисам ИИ не обращается. Скилл не заменяет документацию React Flow и читает ее как справочник.
Как отключить. Удалите скилл командой `npx skills remove react-flow-skill` или удалите его папку из каталога скиллов Claude Code вручную.
Частые вопросы
Как установить скилл?
Выполните `npx skills add framara/react-flow-skill`. Для установки во все проекты добавьте флаг `-g`.
Когда Claude Code использует скилл?
Автоматически, когда вы работаете с кодом React Flow: создаете узлы, разбираете пустой холст, подключаете Zustand, раскладку или тесты.
Какие версии пакета поддерживаются?
Скилл написан для `@xyflow/react` 12 и новее. Для миграции со старого `reactflow` есть отдельная тема.
Что входит в контракт агента?
Двенадцать правил о типовых ошибках: импорты, размеры контейнера, стабильный `nodeTypes`, видимые Handle и неизменяемое состояние.
Как проверяют качество материалов?
Проверки документации, типизация 15 примеров и воспроизведение сохраненных результатов агентов в CI. Свежие оценки с агентами запускаются отдельно.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыReact Joyride — скилл для агентов
React Joyride
Скилл по третьей версии React Joyride: пошаговые туры по интерфейсу, шаги, события, свои компоненты и разбор типовых поломок
Маркетплейс плагинов и скиллов Claude Code для 3D, анимации и современного веба: Three.js, GSAP, React Three Fiber, Babylon.js
Авторские скиллы под Angular, React, Next.js, TypeScript и Django плюс шесть общинных для Java, Elixir и Electron
Скилл оживляет любой рисунок кодом: персонажей, воду, дым, значки и целые сцены в React Native и SwiftUI без ощущения слайд-шоу
React Three Fiber Skills
r3f-skills
Одиннадцать независимых скиллов по React Three Fiber 9: сцена, свет, материалы, физика Rapier, шейдеры и постобработка
julianromli/ai-skills
ai-skills
Сборник из 31 скилла для Claude Code и других агентов: интерфейсы, React, Postgres, код-ревью, SEO и браузерная автоматизация
Коротко о README
Справочник разложен на 16 тем, которые агент подгружает по мере надобности. Проверки в GitHub Actions типизируют 15 примеров и повторяют сохраненные прогоны агентов.