
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- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads implement-rfc automatically when relevant.
- 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
mainusing 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
@deprecatedJSDoc + 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 (
minorfor new features,majorfor 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:
-
Add the flag to
FutureConfiginpackages/react-router/lib/router/utils.ts:export interface FutureConfig { // existing flags... unstable_myNewBehavior: boolean; } -
Gate the new behavior on the flag:
if (router.future.unstable_myNewBehavior) { // new behavior } else { // legacy behavior } -
Document the flag in
docs/upgrading/future-flags.mdif it exists.
New additive APIs (no behavior change to existing code) do not need a future flag.
6. Key File Locations
| Area | Files |
|---|---|
| Core router logic | packages/react-router/lib/router/router.ts |
| Router types/utils | packages/react-router/lib/router/utils.ts |
| React components | packages/react-router/lib/components.tsx |
| React hooks | packages/react-router/lib/hooks.tsx |
| Public exports | packages/react-router/index.ts |
| DOM utilities | packages/react-router/lib/dom/ |
| Framework/Vite plugin | packages/react-router-dev/vite/plugin.ts |
| RSC runtime | packages/react-router/lib/rsc/ |
| Unit tests | packages/react-router/__tests__/ |
| Integration tests | integration/ |
| Future flags doc | docs/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:
- Write the implementation
- Export from the appropriate public entry point (
packages/react-router/index.ts) - Add
@deprecatedJSDoc to any APIs being superseded - 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 onlyminor— new additive API (no breaking changes)major— breaking change (should be rare; most breaking changes go behind a future flag asminorfirst)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
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.
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.
agentic-workflows
remix-run/react-router
Route gh-aw workflow design/create/debug/upgrade requests to the right prompts.
Popular frontend & design skills
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-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.
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.
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.
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.