MCPInstall

implement-rfc

Implement a React Router RFC from a GitHub discussion URL. Fetches the proposal, evaluates community feedback, resolves outstanding questions interactively, then implements the feature with tests, future flags (if breaking), and a changeset.

Installs
100
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/remix-run/react-router --skill implement-rfc
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads implement-rfc automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implement React Router RFC

Implement the RFC from the following GitHub discussion: $ARGUMENTS

Branching

RFC implementations should start from a clean working tree. If there are uncommitted changes, stop and ask me to resolve them before continuing.

  • If you are already on a named branch that is at the same HEAD as main, use that branch.
  • Otherwise, create a branch from main using the format {author}/rfc-{semantic-name}:
    git branch {author}/rfc-{semantic-name} main
    git checkout {author}/rfc-{semantic-name}
    

Workflow

1. Fetch and Understand the RFC

Use WebFetch to read the discussion URL. If a GitHub discussion number is given instead of a URL, construct: https://github.com/remix-run/react-router/discussions/<number>

Extract:

  • Problem being solved: what pain point does this RFC address?

  • Proposed API: exact function signatures, hook names, types, option shapes

  • Affected modes: Declarative / Data / Framework / RSC Data / RSC Framework

  • Breaking changes: does this change or remove existing public API?

  • Open questions: anything explicitly marked as unresolved, "TBD", or asked as a question in the proposal

  • Status: are there linked tracking issues? Look for links to other github issues and read them to see if there is additional context.

    gh issue view <number> --repo remix-run/react-router
    

2. Evaluate Community Feedback

Fetch all comments from the discussion:

Use WebFetch on https://github.com/remix-run/react-router/discussions/<number> and scroll through the full thread. Look for:

  • Concerns or objections raised by community members or maintainers
  • Alternative proposals or API shape suggestions
  • Edge cases raised that the proposal does not address
  • Positive signals — repeated praise for a specific approach signals it's the right direction
  • Maintainer responses — Ryan Florence, Michael Jackson, or other core team members clarifying intent

Summarize the community sentiment into:

  • Points of consensus (safe to proceed)
  • Points of contention (need resolution before implementing)
  • Unanswered questions from the original proposal

3. Resolve Outstanding Questions

Before writing any code, present me with a numbered list of every unresolved question — from both the RFC itself and from community feedback. For each question:

  • State the question clearly
  • Summarize relevant community input
  • Offer a recommended answer with reasoning

Ask me to confirm, override, or skip each question. Do not proceed to implementation until all questions are either answered or explicitly deferred.

Example format:

## Unresolved Questions

1. **Should `useRouterState()` accept a path argument for scoped matching?**
   Community feedback: 3 comments in favor, 1 against (concerns about complexity).
   Recommendation: Yes — scoped matching improves type safety for nested routes.
   → Your decision: [confirm / override / defer]

2. **What should happen when the path doesn't match the current location?**
   Recommendation: Return `null` for active state (consistent with `useMatch()`).
   → Your decision: [confirm / override / defer]

Save the resolved decisions to a scratch file at tasks/rfc-decisions.md for reference during implementation.

4. Plan the Implementation

Before writing code, produce a concise implementation plan covering:

  • New types/interfaces to add
  • New functions/hooks to implement and their file locations
  • Existing APIs to deprecate (mark with @deprecated JSDoc + console warning in dev)
  • Whether a future flag is needed (see §5 below)
  • Test files to create or extend (unit and/or integration)
  • Changeset bump level (minor for new features, major for breaking changes behind a future flag that is now defaulted on)

Present the plan to me and wait for approval before implementing.

5. Future Flags for Breaking Changes

If the RFC changes or removes existing public API behavior, it must ship behind a future flag which will start with an unstable_ prefix.

Future flag pattern:

  1. Add the flag to FutureConfig in packages/react-router/lib/router/utils.ts:

    export interface FutureConfig {
      // existing flags...
      unstable_myNewBehavior: boolean;
    }
    
  2. Gate the new behavior on the flag:

    if (router.future.unstable_myNewBehavior) {
      // new behavior
    } else {
      // legacy behavior
    }
    
  3. Document the flag in docs/upgrading/future-flags.md if it exists.

New additive APIs (no behavior change to existing code) do not need a future flag.

6. Key File Locations

AreaFiles
Core router logicpackages/react-router/lib/router/router.ts
Router types/utilspackages/react-router/lib/router/utils.ts
React componentspackages/react-router/lib/components.tsx
React hookspackages/react-router/lib/hooks.tsx
Public exportspackages/react-router/index.ts
DOM utilitiespackages/react-router/lib/dom/
Framework/Vite pluginpackages/react-router-dev/vite/plugin.ts
RSC runtimepackages/react-router/lib/rsc/
Unit testspackages/react-router/__tests__/
Integration testsintegration/
Future flags docdocs/upgrading/future-flags.md

Confirm existing patterns before writing new code - prefer using the LSP but Grep/Glob also work. Match naming conventions and code style exactly.

7. Implement the Feature

Follow the approved plan. For each logical unit of work:

  1. Write the implementation
  2. Export from the appropriate public entry point (packages/react-router/index.ts)
  3. Add @deprecated JSDoc to any APIs being superseded
  4. Run typecheck to catch type errors early:
    pnpm typecheck
    

Keep changes minimal and focused. Do not refactor unrelated code. Commit as often as needed.

8. Write Tests

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

  • Location: packages/react-router/__tests__/
  • Runner: Jest → pnpm test packages/react-router/__tests__/<file>
  • Cover: happy path, edge cases identified in RFC/community feedback, future flag gating (if applicable), deprecation warnings

Integration tests (for Vite/Framework Mode, SSR, hydration):

  • Location: integration/
  • Runner: Playwright → pnpm test:integration:run --project chromium integration/<file>
  • Required if the RFC touches Framework Mode, file-system routing, or SSR behavior

Run all tests and confirm they pass:

pnpm test packages/react-router/
pnpm test:integration:run --project chromium  # only if integration tests were added/changed

9. Lint and Typecheck

pnpm lint
pnpm typecheck

Fix all errors before proceeding.

10. Create a Change File

Create packages/<package>/.changes/<bump-level>.<descriptive-name>.md. Use the RFC title or tracking issue as the description:

feat: <brief description matching the RFC title>

Implements the `useRouterState()` RFC (#12358). Deprecates `useLocation`,
`useParams`, `useSearchParams`, `useNavigation`, `useMatches`, `useMatch`,
`useNavigationType`, and `useViewTransitionState` in favor of a unified API.

Enable the `unstable_consolidatedRouterState` future flag to opt in.

Bump levels:

  • patch — bug-adjacent fix only
  • minor — new additive API (no breaking changes)
  • major — breaking change (should be rare; most breaking changes go behind a future flag as minor first)
  • unstable — new API that is not yet stable (e.g. added in a future flag, or an experimental API that may be removed without a major bump)

11. Report and Review

Summarize:

  • What RFC was implemented and which decisions were made
  • New public APIs added (with brief usage example)
  • APIs deprecated and the migration path
  • Future flag name (if applicable) and how to opt in
  • Test coverage added
  • Anything deferred or explicitly out of scope

Ask me to review and iterate before opening a PR.

12. Commit

Once I approve, commit and open a PR to main:

gh pr create --base main --title "feat: <RFC title>" --body "..."

PR body should include:

  • Link to the RFC discussion (Closes or Implements #NNNN)
  • Summary of what was implemented
  • Future flag instructions if applicable
  • Testing notes
  • Any decisions that deviated from the original proposal and why

FAQ

What does the implement-rfc skill do?

Implement a React Router RFC from a GitHub discussion URL. Fetches the proposal, evaluates community feedback, resolves outstanding questions interactively, then implements the feature with tests, future flags (if breaking), and a changeset.

How do I install implement-rfc?

Run npx skills add https://github.com/remix-run/react-router --skill implement-rfc in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/implement-rfc/ (personal) or .claude/skills/implement-rfc/ (project).

Which AI agents can use implement-rfc?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is implement-rfc safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains implement-rfc?

It is published by remix-run in remix-run/react-router. It has 100 recorded installs.

More from remix-run/react-router

View all →

react-router

remix-run/react-router

Build applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades.

Frontend & Design1.7K installs

fix-bug

remix-run/react-router

Open the skill to read its SKILL.md instructions.

create-pr

remix-run/react-router

Open the skill to read its SKILL.md instructions.

finish-line

remix-run/react-router

Open the skill to read its SKILL.md instructions.

prepare-release-notes

remix-run/react-router

Open the skill to read its SKILL.md instructions.

Docs & Writing99 installs

agentic-workflows

remix-run/react-router

Route gh-aw workflow design/create/debug/upgrade requests to the right prompts.

AI & Agents91 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs