跳到正文
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（原文）

安装前可以查看交给 AI 代理的指令内容。

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?

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护，适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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/beagle842026年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/beagle842026年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/beagle842026年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/beagle842026年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/beagle842026年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/beagle842026年9月16日 更新

查看 existential-birds 的全部技能

报告此技能的问题