Agent skill

React Router Bug Fix Workflow

Fixes a React Router bug reported in a GitHub issue end to end: fetching the issue, validating the reproduction, writing a failing test and implementing the fix on a new branch.

MITAuto-check passedDevelopment

Install React Router Bug Fix Workflow

skills CLI

$ npx skills add remix-run/react-router --skill fix-bug -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install remix-run/react-router fix-bug --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/fix-bug .claude/skills/fix-bug && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "fix-bug" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/fix-bug into .claude/skills/fix-bug/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fix-bug", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/remix-run/react-router/tree/main/.agents/skills/fix-bug

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add remix-run/react-router --skill fix-bug -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install remix-run/react-router fix-bug --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/fix-bug .agents/skills/fix-bug && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "fix-bug" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/fix-bug into .agents/skills/fix-bug/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fix-bug", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add remix-run/react-router --skill fix-bug -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install remix-run/react-router fix-bug --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/fix-bug .cursor/skills/fix-bug && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "fix-bug" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/fix-bug into .cursor/skills/fix-bug/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fix-bug", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/remix-run/react-router.git --path .agents/skills/fix-bug

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add remix-run/react-router --skill fix-bug -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install remix-run/react-router fix-bug --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/fix-bug .gemini/skills/fix-bug && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "fix-bug" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/fix-bug into .gemini/skills/fix-bug/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fix-bug", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install remix-run/react-router fix-bug

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add remix-run/react-router --skill fix-bug -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/fix-bug .github/skills/fix-bug && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "fix-bug" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/fix-bug into .github/skills/fix-bug/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fix-bug", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add remix-run/react-router --skill fix-bug -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install remix-run/react-router fix-bug --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/fix-bug .opencode/skills/fix-bug && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "fix-bug" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/fix-bug into .opencode/skills/fix-bug/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "fix-bug", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: fix-bug
GitHub stars: 57k
Token cost: ~1.3k tokens
SKILL.md length: 535 words
Files: 1
Skills in repo: 6
Repo updated: Oct 6, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Fixes a React Router bug reported in a GitHub issue end to end: fetching the issue, validating the reproduction, writing a failing test and implementing the fix on a new branch.

Works in 8 steps: Fetch and Understand the Issue → Validate the Reproduction → Identify the Affected Code → …
Fixing a React Router bug starting from its GitHub issue
SKILL.md covers Branching and Workflow
Calls pnpm, git and gh

What it does

Given a GitHub issue number, the skill starts from a clean working tree on main, branching as author/semantic-name. It fetches the issue with gh issue view or WebFetch and extracts the bug description, the React Router version and mode, any code snippets and reproduction links. A StackBlitz, CodeSandbox or GitHub repro link is fetched and read to identify the exact triggering sequence; with no link, it searches issue comments for snippets and otherwise asks you for a minimal reproduction.

The affected code is located using a key file map, for example core router logic in packages/react-router/lib/router/router.ts or React components and hooks in components.tsx and hooks.tsx, traced further with Grep and Glob. From there the workflow writes a failing test that reproduces the issue before implementing the fix, keeping the bug fix scoped to a dedicated branch rather than committed directly to main.

When your agent uses it

Fixing a React Router bug starting from its GitHub issue
Reproducing a reported routing bug before writing the fix
Tracing a bug report to the right file in the React Router codebase

Example prompts

“Fix the bug in react-router issue #12345.”
“Reproduce and fix the loader revalidation bug reported in this issue, with a failing test first.”
“Investigate issue #9876 and find which file the DOM utilities bug is in.”

Requirements

The gh CLI
A clean git working tree on the react-router repository

Workflow steps

8 steps, taken from the step headings in SKILL.md.

Fetch and Understand the Issue
Validate the Reproduction
Identify the Affected Code
Write a Failing Test
Implement the Fix
Create a Change file
Report Results
Open PR

What it can do on your machine

Read from SKILL.md and the folder at commit 266915e. 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:
- pnpm
- git
- gh
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, git and gh, which can reach the network depending on how they are called.
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 Bug Fix Workflow loads about 1.3k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 535 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~75
When it runs · the whole SKILL.md, loaded when a task matches: ~1.3k

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

Auto-check passed

The automated check found no risky patterns in SKILL.md.

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 remix-run/react-router at commit 266915e, republished under its MIT licence (© remix-run). 535 words, ~1,290 tokens.

Download SKILL.mdSave it as .claude/skills/fix-bug/SKILL.md (or your agent's skills folder).

name: fix-bug
description: Fix a reported bug in React Router from a GitHub issue. Use when the user provides a GitHub issue URL and asks to fix a bug, investigate an issue, or reproduce a problem. Handles the full workflow: fetching the issue, finding the reproduction, writing a failing test, and implementing the fix.
disable-model-invocation: true

Fix React Router Bug

Fix the bug reported in the following GitHub issue: $ARGUMENTS

Branching

Bug fixes should start from a clean working tree. If there are changes, prompt me to resolve them before continuing.

Bugs should be fixed from the main branch in a new branch using the format {author}/{semantic-branch-name} (i.e., brophdawg11/fix-navigation):

git branch {author}/{semantic-branch-name} main
git checkout {author}/{semantic-branch-name}

Workflow

1. Fetch and Understand the Issue

Use gh issue view <number> --repo remix-run/react-router or WebFetch to read the full issue.

Extract:

Bug description and expected vs actual behavior
React Router version and mode (Declarative / Data / Framework / RSC)
Any code snippets in the issue
Links to reproductions (StackBlitz, CodeSandbox, GitHub repo, etc.)

2. Validate the Reproduction

If there's a StackBlitz/CodeSandbox/online sandbox link:

Use WebFetch to read the sandbox URL and extract the relevant code
Identify the exact sequence of events that triggers the bug

If there's a GitHub repository link:

Use WebFetch to read key files (package.json, relevant source files) from the raw GitHub URL
Identify the route configuration, loaders, actions, or components involved

If no reproduction link exists:

Search the issue comments with gh issue view <number> --repo remix-run/react-router --comments
Look for code snippets in comments
Ask the user: "No reproduction was provided. Can you share a minimal reproduction or paste the relevant code?"

3. Identify the Affected Code

Based on the bug, locate the relevant source files. Consult the key file map:

Area	Files
Core router logic	`packages/react-router/lib/router/router.ts`
React components/hooks	`packages/react-router/lib/components.tsx`, `lib/hooks.tsx`
DOM utilities	`packages/react-router/lib/dom/`
Vite/Framework plugin	`packages/react-router-dev/vite/plugin.ts`
RSC	`packages/react-router/lib/rsc/`

Use Grep and Glob to trace the relevant code paths.

4. Write a Failing Test

Unit test (for router logic, hooks, pure component behavior — no build needed):

Location: packages/react-router/__tests__/
Use Jest; run with: pnpm test packages/react-router/__tests__/<file>
Match the style of nearby test files (describe/it blocks, createStaticHandler, createMemoryRouter, render, screen, etc.)

Integration test (for Vite plugin, SSR, hydration, Framework Mode):

Location: integration/
Use Playwright with createFixture() → createAppFixture() → PlaywrightFixture
Run with: pnpm test:integration:run --project chromium integration/<file>
Build first if needed: pnpm test:integration --project chromium

Write the test to reproduce the bug exactly — it must fail before the fix.

Run it and confirm it fails:

bash

pnpm test packages/react-router/__tests__/<file>  # unit
# or
pnpm test:integration:run --project chromium integration/<file>  # integration

Show full SKILL.md (188 more words)Show less

5. Implement the Fix

Make the minimal change needed to fix the bug
Do not refactor unrelated code
Confirm the fix addresses the root cause, not just the symptom
Consider all five modes: does this fix break anything in Declarative / Data / Framework / RSC?

Run the failing test again — it must now pass:

bash

pnpm test packages/react-router/__tests__/<file>

Run the broader test suite to check for regressions:

bash

pnpm test packages/react-router/

If the fix touches Framework/Vite code, run integration tests too:

bash

pnpm test:integration:run --project chromium

Confirm linting and typechecking pass:

bash

pnpm lint
pnpm typecheck

6. Create a Change file

Create a change file at packages/<package>/.changes/<type>.<unique-meaningful-name>.md. <type> should be either patch, minor, major or unstable to indicate the type of API change being made.

Format:

markdown

fix: <brief description of what was fixed>

7. Report Results

Summarize:

What the bug was and why it happened
What code was changed and why
That the test now passes
Any edge cases or related issues noticed

Ask me to review the changes and iterate based on any feedback.

8. Open PR

Once I approve the fix, commit the changes and open a PR to main. Include a Closes #NNNN in the description to link the PR to the original issue. Also link the issue in the Development sidebar

Files

Just SKILL.md in .agents/skills/fix-bug of remix-run/react-router.

Open the folder on GitHubat commit 266915e

Compare with similar skills

React Router Bug Fix Workflow next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Router Bug Fix Workflow compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
React Router Bug Fix Workflow this skillremix-run/react-router	57k	—	~1.3k	Automated safety check: Pass	MIT	today
Exposed Bug Fix WorkflowJetBrains/Exposed	9.3k	—	~3.8k	Automated safety check: Pass	Apache-2.0	today
Triagebot Action Bug Triagewithastro/astro	63k	—	~639	Automated safety check: Pass	Custom licence	today
OpenROAD Issue TriageThe-OpenROAD-Project/OpenROAD	3.2k	—	~842	Automated safety check: Pass	BSD-3-Clause	today
Issue TracerZaxbyHub/opencode-swarm	488	—	~4.4k	Automated safety check: Pass	MIT	today
Triage Issuesoftspark/ai-toolkit	179	—	~1.3k	Automated safety check: Notes	Apache-2.0	today

Similar skills

Exposed Bug Fix Workflow
JetBrains/Exposed
Official
Takes a GitHub or YouTrack issue for the Exposed project through reproduction, a failing test, a fix, validation and a pull request.
9.3k GitHub stars~3.8k tokensUpdated today
DevelopmentAuto-check passed
Triagebot Action Bug Triage
withastro/astro
Official
Takes a bug report for the triagebot-action GitHub Action through reproduction, root-cause diagnosis, an intended-behavior check and a fix attempt.
63k GitHub stars~639 tokensUpdated today
DevelopmentAuto-check passed
OpenROAD Issue Triage
The-OpenROAD-Project/OpenROAD
Reproduces an OpenROAD GitHub bug from an attached tarball and shrinks the failing design with whittle.py so maintainers get a minimal test case.
3.2k GitHub stars~842 tokensUpdated today
DevelopmentAuto-check passed
Issue Tracer
ZaxbyHub/opencode-swarm
Drives a bug report from validation and root-cause tracing through a critic-reviewed plan, an approved minimal fix and a PR-ready closure, never merging without recorded human approval.
488 GitHub stars~4.4k tokensUpdated today
DevelopmentAuto-check passed
Triage Issue
softspark/ai-toolkit
Bug triage: explores codebase for root cause, files GitHub issue with TDD fix plan.
179 GitHub stars~1.3k tokensUpdated today
DevelopmentAuto-check: notes
Issue To Regression Test
brunosabot/streamline-card
A skill your agent uses when the user asks to fix a bug, references a GitHub issue number, or describes an issue and wants a fix.
269 GitHub stars~529 tokensUpdated 4 mo ago
Testing & QAAuto-check passed

Questions about React Router Bug Fix Workflow

What does React Router Bug Fix Workflow do?

Fixes a React Router bug reported in a GitHub issue end to end: fetching the issue, validating the reproduction, writing a failing test and implementing the fix on a new branch. Given a GitHub issue number, the skill starts from a clean working tree on main, branching as author/semantic-name. It fetches the issue with gh issue view or WebFetch and extracts the bug description, the React Router version and mode, any code snippets and reproduction links.

When should I use React Router Bug Fix Workflow?

React Router Bug Fix Workflow fits situations like: fixing a React Router bug starting from its GitHub issue; reproducing a reported routing bug before writing the fix; tracing a bug report to the right file in the React Router codebase.

How do I install React Router Bug Fix Workflow in Claude Code?

Run `npx skills add remix-run/react-router --skill fix-bug -a claude-code`. Or copy the skill folder (.agents/skills/fix-bug in remix-run/react-router) into .claude/skills/fix-bug in your project. Claude Code loads it when a task matches its description.

How do I install React Router Bug Fix Workflow in Codex?

Run `npx skills add remix-run/react-router --skill fix-bug -a codex`. Or copy the skill folder (.agents/skills/fix-bug in remix-run/react-router) into .agents/skills/fix-bug in your project. Codex loads it when a task matches its description.

Can I use React Router Bug Fix Workflow in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add remix-run/react-router --skill fix-bug -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fix-bug, .gemini/skills/fix-bug, .github/skills/fix-bug and .opencode/skills/fix-bug in your project.

What does React Router Bug Fix Workflow need to run?

Going by SKILL.md and its folder, React Router Bug Fix Workflow needs the command-line tools its instructions call (pnpm, git and gh). Our summary lists: The gh CLI; A clean git working tree on the react-router repository.

Does React Router Bug Fix Workflow access the network?

SKILL.md contains no URLs. Its commands use git and gh, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is React Router Bug Fix Workflow safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React Router Bug Fix Workflow use?

React Router Bug Fix Workflow is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Router Bug Fix Workflow use?

About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to React Router Bug Fix Workflow?

Skills that share tags, products or a category with React Router Bug Fix Workflow: Exposed Bug Fix Workflow (JetBrains/Exposed, 9.3k stars), Triagebot Action Bug Triage (withastro/astro, 63k stars), OpenROAD Issue Triage (The-OpenROAD-Project/OpenROAD, 3.2k stars) and Issue Tracer (ZaxbyHub/opencode-swarm, 488 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Router Bug Fix Workflow?

remix-run (a GitHub organization) maintains it in remix-run/react-router, which has 56,597 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 6, 2026.

Source: remix-run/react-router on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install React Router Bug Fix Workflow

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Fix React Router Bug

Branching

Workflow

1. Fetch and Understand the Issue

2. Validate the Reproduction

3. Identify the Affected Code

4. Write a Failing Test

5. Implement the Fix

6. Create a Change file

7. Report Results

8. Open PR

Files

Compare with similar skills

Similar skills

More from remix-run/react-router

Related

Questions about React Router Bug Fix Workflow