Agent Skills › github/replica › routing

routing

GitHub

提供基于 React Router v7 的单页应用路由配置规范，指导如何编辑 routes.ts、添加或修改路由路径及导航结构。

starters/coreai/.agents/skills/routing/SKILL.md github/replica

Trigger Scenarios

编辑 app/routes.ts 文件添加或删除路由更改应用导航逻辑

Install

npx skills add github/replica --skill routing -g -y

More Options

Non-standard path

npx skills add https://github.com/github/replica/tree/main/starters/coreai/.agents/skills/routing -g -y

Use without installing

npx skills use github/replica@routing

指定 Agent (Claude Code)

npx skills add github/replica --skill routing -a claude-code -g -y

安装 repo 全部 skill

npx skills add github/replica --all -g -y

预览 repo 内 skill

npx skills add github/replica --list

SKILL.md

Frontmatter

{
    "name": "routing",
    "description": "React Router v7 routing conventions for this SPA. USE WHEN: editing `app\/routes.ts`, adding\/removing a route, or changing navigation."
}

Routing

Paths below are relative to this app's directory.

This app disables runtime SSR (ssr: false) and renders routes client-side. React Router still generates the SPA HTML shell during the build.
Routes are defined in app/routes.ts using React Router v7 config (the "framework" style).

General Structure

Main navigation structure:
- Home: index("routes/home.tsx") at /
- Discover section: /discover/models, /discover/tools
- Build section: /build/agents, /build/tools
- Operate section: /operate/dashboard, /operate/agents
- Docs: /docs
Layout wrapper: app/components/shell/NavLayout.tsx provides top/left nav
Export topNavRoutes and getLeftNavRoutes(pathname) from app/routes.ts for navigation components
Type-safe routes via auto-generated types in .react-router/types/

Adding a Route

Create the file in app/routes/
Add it to app/routes.ts config array
Use type-safe route imports: import type { Route } from "./+types/routeName"
Run npm run type-check from this app's directory to regenerate route types and check TypeScript.