mcpField
R
react-router-v7

react-router-v7

github.com/fandhe-ai開発463 回インストール1 日前に更新
リポジトリ

react-router-v7 について

react-router-v7 は React Router v7 Framework Mode のリファレンススキルです。ルーティングやフックから CLI コマンド、実装例まで、タスク別に API 情報を探せます。

主な機能

  1. 01タスク別のカテゴリ案内
  2. 02Framework Mode の API ドキュメント
  3. 03フックとコンポーネントのガイド
  4. 04ルーティングとデータ読み込みの資料
  5. 05CLI とスクリプトの資料
  6. 06実装パターンのサンプル

活用シーン

  1. 01ルートやデータ読み込み設定のガイドを探す
  2. 02フック、コンポーネント、ユーティリティ API を調べる
  3. 03CLI コマンドや型生成の手順を確認する

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/react-router-v7を入力して読み込まれたか確認します。

同梱ファイル

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

詳細

プロジェクトの 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

コメント