Скилл React Router
React Router agent skill
Официальный скилл React Router: агент определяет режим приложения и работает по документации установленной версии
- 56 630 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл состоит только из инструкций и справочников
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/react-router-agent-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит только из инструкций и справочников
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
React Router работает в нескольких режимах, и советы для одного ломают другой. Скилл сначала заставляет агента определить режим по признакам в проекте: Framework (react-router.config.ts, app/routes.ts, плагин @react-router/dev/vite), Data (createBrowserRouter и RouterProvider), Declarative или нестабильный RSC. Затем агент читает справочник для этого режима и документацию, которая теперь поставляется внутри пакета react-router нужной версии. Скилл покрывает маршруты, загрузчики и экшены, формы и fetcher, навигацию и pending UI, SSR, SPA и пререндеринг, middleware, параметры URL и обновление версий.
Для кого. Для React-разработчиков, у которых маршрутизация и загрузка данных построены на React Router.
Подходит, если
- Агент путает Framework Mode и Declarative Mode и пишет несовместимый код
- Нужно добавить loader, action или middleware в маршрут
- Нужно обновить приложение на новую мажорную версию React Router
Не подходит, если
- Проект на Next.js, TanStack Router или другом роутере
- Нужны внутренние процессы команды React Router: остальные скиллы в .agents служат мейнтейнерам
Пример запроса к агенту
Добавь страницу профиля с loader и action для сохранения формы и покажи pending-состояниеОграничения
Автоматическая установка есть только при создании нового проекта через create-react-router, в существующий проект скилл копируется вручную. RSC-режим в скилле помечен как нестабильный. Скилл состоит из инструкций и не проверяет код.
Как отключить. Удалите папку react-router из каталога скиллов проекта, например .agents/skills/react-router.
Частые вопросы
Как получить скилл в новом проекте?
create-react-router предлагает добавить скилл при создании проекта, с флагом --yes он добавляется по умолчанию, отключается флагом --no-agent-skills.
Откуда агент берет документацию?
Часть официальной документации поставляется внутри пакета react-router, скилл велит читать ее для установленной версии.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыReact Joyride — скилл для агентов
React Joyride
Скилл по третьей версии React Joyride: пошаговые туры по интерфейсу, шаги, события, свои компоненты и разбор типовых поломок
Скиллы Material UI
Material UI agent skills
Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS
Скиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
Скиллы Angular
Angular Skills
Официальные скиллы команды Angular: генерация кода по актуальным практикам, сигналы, формы, SSR и создание новых приложений
Коротко о README
Репозиторий это сам React Router, скилл лежит в .agents/skills/react-router рядом с внутренними скиллами команды. По журналу изменений create-react-router научился добавлять этот скилл в новые проекты, а пакет react-router начал включать часть документации для AI-агентов. SKILL.md описывает признаки каждого режима и отсылает к справочникам framework-mode и других режимов. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
---
name: react-router
description: Build applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades.
license: MIT
---
# React Router
React Router is mode-specific. Before changing an app, identify the mode, load the matching reference, then read the installed docs for the installed package version.
## Identify the Mode
Do not apply Framework/Data patterns to a Declarative app unless you are intentionally migrating modes.
### Framework Mode
Use Framework Mode guidance when you see:
- `@react-router/dev` in dependencies
- `react-router.config.ts`
- `app/routes.ts`
- `app/entry.server.tsx` and/or `app/entry.client.tsx` files
- route modules under `app/routes/`
- route exports like `loader`, `action`, `clientLoader`, `clientAction`, `ErrorBoundary`, `meta`, `links`, or `headers`
- imports from `./+types/...`
- the React Router Vite plugin from `@react-router/dev/vite`
Framework examples usually use the default `app/` directory, but check `react-router.config.ts` for a custom `appDirectory` before assuming exact paths.
Then read `references/framework-mode.md`.
### Data Mode
Use Data Mode guidance when you see:
- `createBrowserRouter`, `createHashRouter`, `createMemoryRouter`, or `createStaticRouter`
- `<RouterProvider router={router}>`
- route objects with properties like `path`, `children`, `loader`, `action`, `Component`, `ErrorBoundary`, or `lazy`
- data APIs without the Framework Vite plugin