New to Claude Skills? Learn how to install them →

remix-run on GitHub

Create React Router PR

Free

Streamline your React Router pull request process.

Get this skill

Free · Opens the source repo

What Create React Router PR does

The Create React Router PR skill automates the process of preparing and submitting pull requests for the React Router repository. This tool is designed for developers who frequently contribute to the React Router project and want to streamline their workflow. It handles the entire pull request lifecycle, from branch creation to PR submission, ensuring that all necessary steps are followed and that the PR is well-documented.

When using this skill, it first checks the current state of your git repository to ensure that only relevant changes are included in the pull request. It will prompt you to create a new branch if you are working in a detached state or if you need to follow a specific naming convention. The skill also verifies that the appropriate test coverage exists for the changes being made, which is crucial for maintaining the quality of the codebase.

Once the changes are staged and committed, the skill generates a draft pull request targeting the main branch by default. You can customize the PR title and body, which includes capturing the context of the changes, related issues, and any necessary usage examples. This ensures that reviewers have all the information they need to understand the changes and their implications.

After creating the pull request, the skill applies relevant labels based on the packages modified in your commit. This helps in organizing and categorizing pull requests effectively within the repository. Overall, this skill is ideal for developers looking to enhance their productivity and ensure consistency in their pull request submissions to the React Router project.

When to use it

Use this skill when you are ready to submit changes to the React Router repository and need to create a pull request efficiently.

When not to use it

This skill is not suitable for repositories outside of React Router or for users who prefer manual control over their pull request process.

What you can build with it

Submitting a New Feature

When you've completed a new feature for React Router, use this skill to create a pull request that includes usage examples and documentation.

Fixing a Bug

If you've fixed a bug in the React Router codebase, this skill helps you create a PR that references the issue and includes necessary testing notes.

Updating Documentation

For changes that involve documentation updates, this skill streamlines the PR creation process while ensuring all relevant links and context are included.

How to install Create React Router PR

View source

1. Install with the skills CLI

npx skills add remix-run/react-router/create-pr --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by remix-run

Create React Router PR

Create the pull request handoff for completed React Router work. Default to a draft PR targeting main unless the user explicitly asks for a ready PR or a different base branch.

Preconditions

  • Inspect git status --short --branch and git branch --show-current.
  • Do not include unrelated dirty files. If unrelated changes are present, leave them unstaged and mention them.
  • If the worktree is detached, create a branch from the current HEAD before committing. Use the branch name requested by the user, an existing repository convention, or <author>/<semantic-name> when no stronger convention is available.
  • If already on a suitable named branch, use it.
  • Confirm appropriate automated coverage exists or was added. Do not list routine CI-covered checks in the PR body.
  • If user-facing functionality is being updated, check that the appropriate package has a change file under packages/<package>/.changes/. This is not necessary for docs-only, GitHub Actions/workflow-only, or dependency-maintenance PRs unless the dependency change itself has user-facing impact.

Context

  • Capture what changed, why it changed, and who it affects.
  • Find related issues, discussions, or PRs and include links when relevant.
  • Prefer git diff --stat plus focused git diff over broad repo archaeology when the change is small.
  • If the user supplies a report, issue, discussion, or related PR, treat that as the primary context source.
  • For new feature work, include a concise usage snippet. If the feature replaces or improves an older approach, include before/after examples when they help reviewers.

Commit and Push

  1. Review the diff with git diff --stat and focused git diff as needed.
  2. Stage only the intended files.
  3. Commit with a concise imperative subject.
  4. Push the branch before creating the PR.

PR Creation

Save the PR body to a temporary file, then use gh pr create with:

gh pr create --draft --base main --head <branch> --title "<title>" --body-file <file>
  • Omit --draft only when the user explicitly asks for a ready PR.
  • Change --base only when the user explicitly requests a different base branch.
  • Keep shell quoting simple. Prefer a body file if the body contains backticks, quotes, or multiple paragraphs.
  • Include issue/discussion links when known. Use Closes #NNNN for bug fixes the PR should close; use Implements #NNNN or a plain link for RFCs/discussions when closing semantics are not appropriate.
  • Include testing notes only for manual checks, unusual verification, skipped non-CI checks, or failures that reviewers should know about.
  • If gh pr create fails, leave the branch pushed when possible and give the user a ready-to-open compare URL plus the prepared title and body.

Recommended PR body shape:

This change ...

- Optional extra detail when useful.

```tsx
// Optional feature usage example
```
// Optional before/after example

Testing

  • Optional manual or non-CI verification notes only.

- Do not use a `## Summary` heading. Start with one or two short sentences explaining what the change accomplishes.
- Add bullets after the opening only when more detail is useful.
- Include usage examples for new features, and before/after examples for replacements or improvements, when they help reviewers understand the change.
- Add `**Testing**` with bullets below the description only when there are manual checks, unusual verification steps, skipped non-CI checks, or failures reviewers should know about. Omit it for routine automated coverage.

## Testing Notes

- Do not list linting, typechecking, unit test, or integration test commands in the PR body, even if they were run locally. CI runs these automatically.
- Do not say that CI will run routine linting, typechecking, unit tests, or integration tests. That is assumed for every PR.
- Do not add manual testing instructions by default.
- Add manual testing instructions only when necessary, such as visual/UI behavior that needs human review, environment-specific behavior not covered by CI, release/publish dry-run steps, external service integration, or a reproduction that cannot be expressed reliably in automated tests.
- When manual testing is necessary, keep the instructions minimal and directly tied to the uncovered risk.

## Labels

Apply labels after the PR exists. Rely on the stable labels listed in this skill for normal PRs.

Apply labels with:

```sh
gh pr edit <number-or-url> --add-label "<label>"

If gh pr edit --add-label fails because the specified label is invalid or missing, run:

gh label list --limit 200

Then choose the correct label from the live list and update this skill in place so the stable label guidance stays current. Use real labels only. If the right label does not exist, do not invent one; mention the missing label.

Package Labels

Add every applicable pkg:* label based on touched package paths:

Touched pathLabel
packages/react-router/pkg:react-router
packages/react-router-dev/pkg:@react-router/dev
packages/create-react-router/pkg:create-react-router
packages/react-router-architect/pkg:@react-router/architect
packages/react-router-cloudflare/pkg:@react-router/cloudflare
packages/react-router-node/pkg:@react-router/node
packages/react-router-serve/pkg:@react-router/serve
packages/react-router-express/pkg:@react-router/express
packages/react-router-fs-routes/pkg:@react-router/fs-routes
packages/react-router-remix-routes-option-adapter/pkg:@react-router/remix-routes-option-adapter

If a package path is unclear, inspect its package.json name and use pkg:<name> when that label exists. If a change touches generated artifacts or integration tests only, infer the package label from the runtime/tooling area being tested. For example, Vite plugin or prerender integration coverage usually maps to pkg:@react-router/dev.

Feature Labels

Add applicable feat:* labels for the behavior area being changed. Common labels include:

Behavior areaLabel
Core navigation, loaders/actions, fetchers, redirects, matching, and router statefeat:router
Route config APIs and routes.tsfeat:routes.ts
Vite plugin and build pipeline behaviorfeat:vite
SPA modefeat:spa-mode
Prerenderingfeat:prerender
Lazy route discoveryfeat:lazy-route-discovery
Hydration and hydration fallback behaviorfeat:hydration
View transition APIsfeat:view-transitions
Middleware behaviorfeat:middleware
Split route module behaviorfeat:split-route-modules
Streaming behaviorfeat:streaming
CSS handlingfeat:css
Windows-specific fixesfeat:windows
RSC Data or RSC Framework behaviorfeat:rsc
Path matching semanticsfeat:path-matching
Single fetch behaviorfeat:single-fetch
Types, typegen, and TypeScript behaviorfeat:typescript

Multiple feature labels are fine when the diff truly spans multiple areas. Prefer the most specific label that exists.

Non-Package Labels

Some PRs do not need package or feature labels:

  • Add docs for documentation-only changes.
  • Add github-actions for .github/workflows/ or Actions infrastructure changes.
  • Add dependencies for dependency or lockfile-only maintenance.
  • Add version labels such as v6, v7, or v8 only when the PR is intentionally scoped to that release line or the user asks for it.

Final Report

Report:

  • Branch name.
  • Commit hash.
  • PR URL and whether it is draft or ready.
  • Base branch.
  • Labels applied.
  • Verification performed or skipped.

Frequently asked questions about Create React Router PR

Similar skills