本文へ移動
cccskills
無料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.

existential-birds/beagle
インストール方法を見る

含まれるファイル（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（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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?

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

adr-decision-extraction

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

existential-birds/beagle822026年9月16日 更新

adr-writing

無料

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).

日本語の概要は準備中です。原文の説明を表示しています。

existential-birds/beagle822026年9月16日 更新

agent-architecture-analysis

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

existential-birds/beagle822026年9月16日 更新

ai-elements

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

existential-birds/beagle822026年9月16日 更新

app-intents-code-review

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

existential-birds/beagle822026年9月16日 更新

artifact-analysis

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

existential-birds/beagle822026年9月16日 更新

existential-birds のスキルをすべて見る

このスキルの問題を報告する