React Router Framework Mode

What it does

When your agent uses it

• Configuring routes
• Working with loaders and actions
• Handling navigation
• Pending/optimistic UI

Example prompts

• “/react-router-framework-mode”

What it can do on your machine

Read from SKILL.md and the folder at commit 91febfe. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • reactrouter.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Router Framework Mode loads about 1.1k tokens when it runs, and up to ~22k if it reads all its reference files. Until then it costs about 79 tokens; SKILL.md has 287 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~79

When it runs · the whole SKILL.md, loaded when a task matches

~1.1k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~22k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from curvenote/curvenote at commit 91febfe, republished under its MIT licence (© curvenote). 287 words, ~1,150 tokens.

name

react-router-framework-mode

description

Build full-stack React applications using React Router's framework mode. Use when configuring routes, working with loaders and actions, handling forms, handling navigation, pending/optimistic UI, error boundaries, or working with react-router.config.ts or other react router conventions.

license

MIT

npm list react-router

// ✅ Correct
<Form method="get">
  <input name="q" />
</Form>

// ❌ Wrong - don't manually handle search params
<form onSubmit={(e) => { e.preventDefault(); setSearchParams(...) }}>

const fetcher = useFetcher();
const optimistic = fetcher.formData
  ? fetcher.formData.get("favorite") === "true"
  : isFavorite;

<fetcher.Form method="post" action={`/favorites/${id}`}>
  <button>{optimistic ? "★" : "☆"}</button>
</fetcher.Form>;

// app/root.tsx - add navigation, footer, providers here
export default function App() {
  return (
    <div>
      <nav>...</nav>
      <Outlet />
      <footer>...</footer>
    </div>
  );
}

// ✅ Correct
export function meta({ loaderData }: Route.MetaArgs) { ... }

// ❌ Wrong - `data` is deprecated
export function meta({ data }: Route.MetaArgs) { ... }

© curvenote, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (references) in .agents/skills/react-router-framework-mode of curvenote/curvenote.

• SKILL.md
• references/actions.md
• references/data-loading.md
• references/error-handling.md
• references/middleware.md
• references/navigation.md
• references/pending-ui.md
• references/rendering-strategies.md
• references/route-modules.md
• references/routing.md
• references/sessions.md
• references/special-files.md
• references/type-safety.md

Open the folder on GitHubat commit 91febfe

Used in 4 other repositories

We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 4 other GitHub owners. This page covers the copy in curvenote/curvenote, which our catalogue first saw on October 7, 2026.

• syhily/kobato.agents/skills/react-router-framework-mode
• foxlau/react-router-v7-better-auth.agents/skills/react-router-framework-mode
• halo-dev/upage.agents/skills/react-router-framework-mode
• remix-run/agent-skillsskills/react-router-framework-mode