mcpField
R
react-router-v7

react-router-v7

github.com/fandhe-aiDevelopment463 installsUpdated 1d ago
Repository

About react-router-v7

react-router-v7 is a reference skill for React Router v7 Framework Mode. It helps developers locate API guidance by task category, from routing and hooks to CLI commands and implementation patterns.

Key features

  1. 01Task-to-category reference mapping
  2. 02Framework Mode API documentation
  3. 03Guides for hooks and components
  4. 04Routing and data-loading references
  5. 05CLI and script references
  6. 06Sample implementation patterns

Use cases

  1. 01Find guidance for route and data-loading setup
  2. 02Look up hooks, components, or utility APIs
  3. 03Check CLI commands and type-generation guidance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fandhe-ai/agent-reference-skills --skill react-router-v7

After installing, type/react-router-v7in Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/cli/
dev.md
README.md
references/components/
Await.md
Form.md
Link.md
Links.md
Meta.md
Navigate.md
NavLink.md
Outlet.md
PrefetchPageLinks.md
README.md
Scripts.md
ScrollRestoration.md
references/conventions/
client-modules.md
entry-client-tsx.md
entry-server-tsx.md
react-router-config-ts.md
README.md
root-tsx.md
routes-ts.md
server-modules.md
references/explanation/
backend-for-frontend.md
code-splitting.md
concurrency.md
form-vs-fetcher.md
hot-module-replacement.md
index-query-param.md
lazy-route-discovery.md
progressive-enhancement.md

Details

From the project README

React Router v7 Framework Mode リファレンス

React Router v7 Framework Mode の全 API ドキュメントを網羅したスキル。 ユーザーのタスクに応じて適切な README.md を読み、そこから個別ファイルへ辿ること。

ディレクトリ構成

skills/react-router-v7/
  SKILL.md
  references/
    start/
      README.md
      actions.md
      data-loading.md
      deploying.md
      installation.md
      navigating.md
      pending-ui.md
      rendering.md
      route-module.md
      routing.md
      testing.md
    conventions/
      README.md
      client-modules.md
      entry-client-tsx.md
      entry-server-tsx.md
      react-router-config-ts.md
      root-tsx.md
      routes-ts.md
      server-modules.md
    routers/
      README.md
      HydratedRouter.md
      ServerRouter.md
    hooks/
      README.md
      useLoaderData.md
      useActionData.md
      useNavigation.md
      useNavigate.md
      useFetcher.md
      useFetchers.md
      useParams.md
      useRouteLoaderData.md
      useMatches.md
      useLocation.md
      useSubmit.md
      useRouteError.md
      useRevalidator.md
      useSearchParams.md
      useHref.md
      useBlocker.md
      useBeforeUnload.md
      useAsyncValue.md
      useAsyncError.md
      useOutletContext.md
      useViewTransitionState.md
      useFormAction.md
      useMatch.md
    components/
      README.md
      Await.md
      Form.md
      Link.md
      Links.md
      Meta.md
      Navigate.md
      NavLink.md
      Outlet.md
      PrefetchPageLinks.md
      ScrollRestoration.md
      Scripts.md
    utils/
      README.md
      createContext.md
      createCookie.md
      createCookieSessionStorage.md
      createMemorySessionStorage.md
      createRoutesStub.md
      data.md
      generatePath.md
      href.md
      isRouteErrorResponse.md
      redirect.md
      redirectDocument.md
      replace.md
      sessions-and-cookies.md
    how-to/
      README.md
      accessibility.md
      client-data.md
      error-boundary.md
      error-reporting.md
      fetchers.md
      file-route-conventions.md
      file-uploads.md
      form-validation.md
      headers.md
      instrumentation.md
      middleware.md
      navigation-blocking.md
      pre-rendering.md
      presets.md
      react-server-components.md
      resource-routes.md
      route-module-type-safety.md
      security.md
      server-bundles.md
      spa.md
      status.md
      suspense.md
      using-handle.md
      view-transitions.md
    explanation/
      README.md
      backend-for-frontend.md
      code-splitting.md
      concurrency.md
      form-vs-fetcher.md
      hot-module-replacement.md
      index-query-param.md
      lazy-route-discovery.md
      progressive-enhancement.md
      race-conditions.md
      react-transitions.md
      state-management.md
      type-safety.md
    cli/
      README.md
      dev.md
  samples/
    README.md
    basic-routing.md
    data-loading.md
    error-boundary.md
    form-action.md
    form-validation.md
    middleware-auth.md
    navigation-blocking.md
    pending-ui.md
    pre-rendering.md
    search-params.md
    session-auth.md
  scripts/
    README.md
    build.md
    cli.md
    install.md
    typegen.md

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

  1. 下記マッピング表でタスクに対応するカテゴリを探す
  2. そのカテゴリの references/{category}/README.md を参照して目的のページを特定する
  3. 該当ページの .md を Read して詳細を確認する

タスク → カテゴリ マッピング

タスクカテゴリ参照 README
プロジェクトのセットアップ・インストールstartreferences/start/README.md
ルーティング設定・データ読み込み・アクション・デプロイstartreferences/start/README.md
ルートモジュール・レンダリング戦略・テストstartreferences/start/README.md
root.tsx / routes.ts / react-router.config.ts の設定conventionsreferences/conventions/README.md
entry.client.tsx / entry.server.tsx / client・server モジュール分離conventionsreferences/conventions/README.md
HydratedRouter / ServerRouter の使い方routersreferences/routers/README.md
useLoaderData / useActionData / useFetcher 等のフックhooksreferences/hooks/README.md
useNavigate / useNavigation / useParams / useSearchParams 等hooksreferences/hooks/README.md
useBlocker / useRevalidator / useRouteError 等hooksreferences/hooks/README.md
Form / Link / NavLink / Outlet / Await 等のコンポーネントcomponentsreferences/components/README.md
Links / Meta / Scripts / ScrollRestoration / PrefetchPageLinkscomponentsreferences/components/README.md
redirect / data / createCookie / セッション管理utilsreferences/utils/README.md
generatePath / href / isRouteErrorResponse / createRoutesStubutilsreferences/utils/README.md
ミドルウェア・ファイルアップロード・SPA モード・プリレンダリングhow-toreferences/how-to/README.md
フォームバリデーション・エラーバウンダリ・セキュリティhow-toreferences/how-to/README.md
RSC・サーバーバンドル・リソースルート・型安全性how-toreferences/how-to/README.md
コード分割・状態管理・BFF・プログレッシブエンハンスメント等の概念explanationreferences/explanation/README.md
HMR・レースコンディション・並行処理・型安全性の仕組みexplanationreferences/explanation/README.md
dev / build / typegen 等の CLI コマンドclireferences/cli/README.md
典型的な使い方・実装パターンを確認したいsamplessamples/README.md
インストール・ビルド・型生成のコマンドを知りたいscriptsscripts/README.md

Comments

Markdown supported