1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | React Router |
| 作者/维护者 | remix-run（React Router 核心团队） |
| 来源链接 | https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router |
| 许可证 | MIT（GitHub API） |
| GitHub Stars | 56,516（GitHub API，指整个 react-router 仓库） |
| Forks | 10,897（GitHub API） |
| 最新版本 | 随 react-router 主仓库滚动更新，最近一次提交在近日 |
| 安装方式 | npx skills add https://github.com/remix-run/react-router --skill react-router |
2. 功能介绍与亮点
React Router 官方 Agent Skill 教会编码 Agent 正确使用 React Router 这一主流前端路由库，覆盖 Framework、Data、Declarative 三种主要用法模式以及处于不稳定阶段的 RSC（React Server Components）模式。
核心能力：
- 模式识别：通过检测项目中的依赖、配置文件（如
react-router.config.ts）、路由导出（loader/action/clientLoader等）自动判断当前项目使用的是哪种模式，避免把 Framework 模式的用法错误地套用到 Declarative 项目上 - 按需加载参考文档：技能正文只做路由，具体规则分散在
references/framework-mode.md、data-mode.md、declarative-mode.md、rsc.md四份参考文件中，Agent 按识别出的模式精准加载，减少不相关上下文 - 版本对齐：引导 Agent 优先读取项目本地
node_modules/react-router/docs/下随安装包发布的文档，而不是依赖可能过时的训练数据，保证建议与用户实际安装的版本一致 - 模式迁移指引：内置一张迁移表，涵盖 Declarative→Data、Data/Declarative→Framework 等常见迁移路径应该读哪些具体文档
主要亮点：该技能由 React Router 官方团队直接维护并内嵌在主仓库中，此前曾以独立仓库 remix-run/agent-skills 分发，团队后将其归并进主仓库、随包发布文档，并计划在 React Router CLI 初始化新项目时默认加入该技能。
3. 适用场景
所属分类：前端与设计
适用于使用 React Router（含 Remix 的路由能力）构建 Web 应用的开发者，尤其是：
- 需要 AI 编码助手正确处理路由配置、
loader/action数据加载、表单与 fetcher、SSR/SPA/预渲染等场景 - 项目在 Framework、Data、Declarative 三种模式间迁移，需要 Agent 给出与目标模式匹配的正确写法
- 使用较新的 RSC（React Server Components）能力、需要 Agent 遵循尚不稳定的相关约定
4. 跨 Agent 兼容性
- Claude Code：原生支持——技能采用标准 SKILL.md（YAML front matter + 指令正文）格式，符合 Agent Skills 规范，可直接安装进 skills 目录
- Codex：未验证——未在已抓取材料中看到针对 Codex 的专门适配说明
- OpenClaw：未验证——安装命令
npx skills add是通用的 Agent Skills 生态工具，非 Claude 专属，理论上可用，但未见明确验证材料 - Hermes Agent：未验证——同上，未见专门说明
5. 推荐理由
React Router 是 JavaScript 生态中使用最广泛的路由库之一，其官方团队亲自维护、内嵌进主仓库、并计划成为 CLI 初始化默认项的 Agent Skill，能显著减少 Agent 因训练数据过时而给出错误路由写法（如混用不同模式的 API）的问题，对任何用 React Router 构建应用的初中级开发者都是开箱即用的准确性保障。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 9 | react-router 仓库 56,516 GitHub Stars，是 JavaScript 生态中使用最广泛的路由库之一，由官方一线开源项目团队直接维护 |
| 可用性 | 9 | 一条命令即可安装，SKILL.md 结构清晰并配 4 份分模式参考文档，主仓库近日仍有提交、维护活跃，无付费依赖 |
| 安全性 | 10 | 检查清单逐项：①不执行 shell 命令、无广泛权限索取 ②运行时不联网外发数据 ③不要求任何 API key 或凭据 ④正文与参考文档中未发现可疑指令或隐蔽外发 ⑤作者为 React Router 官方团队，信誉充分 ⑥License 为 MIT，明确 ⑦仓库近日仍在活跃维护，无弃置风险。属纯文档/指引类技能，无代码执行、无外联 |
综合评分（三项均值）：9.33
7. 跟同类 Skills 相比的优势
| 技能 | 定位 | 与 React Router 技能的差异 |
|---|---|---|
TanStack Table 官方技能（packages/react-table/skills/getting-started，同属 TanStack/table 仓库） |
教 Agent 使用 TanStack Table v9 构建无样式数据表格，含多框架适配版本 | 覆盖的是表格组件而非路由；且 TanStack/table 仓库默认分支为 beta，v9 尚处于测试阶段，而 React Router 技能对应的是已稳定发布多年的路由库 |
Nuxt UI 官方技能（nuxt/ui 仓库 skills/nuxt-ui） |
教 Agent 用 Nuxt UI 组件库（Vue 生态）搭建界面 | 面向 Vue/Nuxt 技术栈而非 React；且该技能的核心组件信息查询依赖额外配置 Nuxt UI 官方 MCP Server，React Router 技能则不依赖任何外部服务 |
Vite DevTools Kit 技能（vitejs/devtools 仓库） |
教 Agent 为 Vite DevTools 中枢开发调试面板集成 | 受众是构建 Vite 插件调试工具的少数开发者，而非普通应用开发者，适用面明显更窄 |
React Router 技能的差异化优势在于：所服务的库本身是稳定的成熟项目而非测试版，安装与使用零外部依赖，且官方已明确规划将其设为新项目的默认组成部分。
8. 用户评价
该技能目前在第三方平台尚无具名用户评价。在 react-router 仓库自身的讨论区与 Issue 中可见到真实开发者的参与：一位社区成员在相关讨论中询问了技能升级时如何呈现弃用说明；另一位开发者在 Issue 中询问“AI Agent 应如何使用内嵌文档”，得到维护者关于该技能来源 PR 的直接答复。
9. 其他补充
该技能此前曾以独立仓库 remix-run/agent-skills 分发，团队后将其归并进 react-router 主仓库并大幅精简内容，改为引导 Agent 直接读取随包发布的本地文档，目的是让技能内容始终与用户安装的版本保持一致。
10. 安装使用方式
方式一：使用通用的 Agent Skills 安装工具
npx skills add https://github.com/remix-run/react-router --skill react-router该命令会把技能安装进当前项目，供已支持 Agent Skills 规范的编码助手引用。
注意事项：安装后建议确认项目本地是否已生成 node_modules/react-router/docs/ 目录——技能会引导 Agent 优先读取该目录下与已安装版本匹配的文档；若使用的 react-router 版本较旧、本地不含该文档目录，需回退参考官方网站对应版本的文档。技能本身不需要重启 Agent 或额外配置即可生效。
11. 注意事项
- 该技能对模式（Framework / Data / Declarative / RSC）的判断依赖识别项目中的特征文件与导出写法，若项目结构非常规，可能需要人工提示 Agent 当前使用的具体模式
- RSC（React Server Components）相关指引明确标注为“unstable”，对应 React Router 的实验性能力，生产环境采用前需自行评估稳定性
- 除 Claude Code 外的其他三个 Agent 生态（Codex、OpenClaw、Hermes Agent）兼容性未获材料验证，实际使用前建议自行测试