Skip to content
cccskills
FreePublished on GitHub

react-router-code-review

Reviews React Router code for proper data loading, mutations, error handling, and navigation patterns. Use when reviewing React Router v6.4+ code, loaders, actions, or navigation logic.

The English summary is being prepared. Showing the original description.

existential-birds/beagle
See how to install

Files included (5)

  • SKILL.md4.2 KB
  • references/data-loading.md7.3 KB
  • references/error-handling.md10.1 KB
  • references/mutations.md10.6 KB
  • references/navigation.md11.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

React Router Code Review

Quick Reference

Issue TypeReference
useEffect for data, missing loaders, paramsreferences/data-loading.md
Form vs useFetcher, action patternsreferences/mutations.md
Missing error boundaries, errorElementreferences/error-handling.md
navigate() vs Link, pending statesreferences/navigation.md

Review Checklist

  • Data loaded via loader not useEffect
  • Route params accessed type-safely with validation
  • Using defer() for parallel data fetching when appropriate
  • Mutations use <Form> or useFetcher not manual fetch
  • Actions handle both success and error cases
  • Error boundaries with errorElement on routes
  • Using isRouteErrorResponse() to check error types
  • Navigation uses <Link> over navigate() where possible
  • Pending states shown via useNavigation() or fetcher.state
  • No navigation in render (only in effects or handlers)

Valid Patterns (Do NOT Flag)

These patterns are correct React Router usage - do not report as issues:

  • useEffect for client-only data - Loaders run server-side; localStorage, window dimensions, and browser APIs must use useEffect
  • navigate() in event handlers - Link is for declarative navigation; navigate() is correct for imperative navigation in callbacks/handlers
  • Type annotation on loader data - useLoaderData<typeof loader>() is a type annotation, not a type assertion
  • Empty errorElement at route level - Route may intentionally rely on parent error boundary
  • Form without action prop - Posts to current URL by convention; explicit action is optional
  • loader returning null - Valid when data may not exist; null is a legitimate loader return value
  • Using fetcher.data without checking fetcher.state - May be intentional when stale data is acceptable during revalidation

Context-Sensitive Rules

Only flag these issues when the specific context applies:

IssueFlag ONLY IF
Missing loaderData is available server-side (not client-only)
useEffect for data fetchingData is NOT client-only (localStorage, browser APIs, window size)
Missing errorElementNo parent route in the hierarchy has an error boundary
navigate() instead of LinkNavigation is NOT triggered by an event handler or conditional logic

Gates (before reporting any finding)

Run in order. Pass each gate with evidence (paths, line refs, or a one-line quote from code)—not intuition alone.

Gate 1 — Scope the route surface

Pass when: You have repo path(s) to the route module, routes config entry, or layout that owns the behavior under review (write them in your notes before flagging).

Gate 2 — Context-sensitive match

Pass when: For every issue that maps to Context-Sensitive Rules, the Flag ONLY IF condition is satisfied with a one-line rationale tied to the code; for other checklist items, you have a concrete code citation (path + line or short excerpt).

Gate 3 — Non-issue patterns

Pass when: The behavior is not covered by Valid Patterns (Do NOT Flag) for that category.

Gate 4 — Verification protocol

Load and follow review-verification-protocol. Pass when: Its pre-report checklist (and any issue-type subsection that applies) is complete for each finding you will output.

When to Load References

  • Reviewing data fetching code → data-loading.md
  • Reviewing forms or mutations → mutations.md
  • Reviewing error handling → error-handling.md
  • Reviewing navigation logic → navigation.md

Review Questions

  1. Is data loaded in loaders instead of effects?
  2. Are mutations using Form/action patterns?
  3. Are there error boundaries at appropriate route levels?
  4. Is navigation declarative with Link components?
  5. Are pending states properly handled?

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

adr-decision-extraction

Free

Use when you need to mine a conversation, session transcript, or design discussion for architectural decisions before writing ADRs. Identifies problem-solution pairs, trade-off debates, technology choices, and explicit "[ADR]" tags. Triggers on "what decisions did we make", "extract decisions from this chat", "find the choices in our discussion", or "summarize architectural decisions". Also useful after long planning sessions to capture decisions that were made implicitly. Does NOT write ADR documents — use adr-writing or write-adr for that.

The English summary is being prepared. Showing the original description.

existential-birds/beagle84Updated Sep 16, 2026

adr-writing

Free

Use when writing or formatting an ADR document using the MADR template, applying Definition of Done (E.C.A.D.R.) criteria, or verifying ADR completeness. Triggers on "write the ADR", "format as MADR", "check ADR quality", "mark gaps in ADR". Also triggers when a decision has been extracted and needs to become a document. Does NOT extract decisions from conversations (use adr-decision-extraction) or orchestrate the full extract-confirm-write workflow (use write-adr).

The English summary is being prepared. Showing the original description.

existential-birds/beagle84Updated Sep 16, 2026

agent-architecture-analysis

Free

Use when auditing an agent codebase against the 12-Factor Agents methodology, reviewing LLM-powered system architecture, or assessing agentic app compliance. Triggers on "analyze agent architecture", "12-factor audit", "how compliant is this agent", or "evaluate this LLM app". Also applies when comparing frameworks or planning agent improvements. Not for quick checklists — this performs deep per-factor codebase analysis with file-level evidence.

The English summary is being prepared. Showing the original description.

existential-birds/beagle84Updated Sep 16, 2026

ai-elements

Free

Vercel AI Elements for workflow UI components. Use when building chat interfaces, displaying tool execution, showing reasoning/thinking, or creating job queues. Triggers on ai-elements, Queue, Confirmation, Tool, Reasoning, Shimmer, Loader, Message, Conversation, PromptInput.

The English summary is being prepared. Showing the original description.

existential-birds/beagle84Updated Sep 16, 2026

app-intents-code-review

Free

Reviews App Intents code for intent structure, entities, shortcuts, and parameters. Use when reviewing code with import AppIntents, @AppIntent, AppEntity, AppShortcutsProvider, or @Parameter.

The English summary is being prepared. Showing the original description.

existential-birds/beagle84Updated Sep 16, 2026

artifact-analysis

Free

Use when the user wants a cited, structured read of local documents and project knowledge. Triggers on: "analyze these docs", "scan my project for context", "read the docs folder", "summarize what's in .beagle/concepts/", "extract context from docs/", "what's in this folder", "go read everything in X and tell me what's there". Also invoked programmatically by other beagle skills (prfaq-beagle Ignition, brainstorm-beagle reference points, strategy-interview context grounding) via the companion contract. Does NOT trigger on codebase lookups ("find this function", "search the repo"), web research (use web-research), LLM-as-judge evaluation (use llm-judge), or document editing (use humanize-beagle). Produces a written scan plan, parallel-subagent findings, and a cited synthesis report on disk — never inline prose, never unsourced claims.

The English summary is being prepared. Showing the original description.

existential-birds/beagle84Updated Sep 16, 2026

See all skills by existential-birds

Report a problem with this skill