본문으로 건너뛰기
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?

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 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의 스킬 모두 보기

이 스킬의 문제 신고