本文へ移動
cccskills
無料GitHub で公開

remix-v2-routing-review

Reviews Remix v2 route files for naming convention violations, missing layouts, resource-route shape, and v1 holdovers. Use when reviewing files under app/routes/ in a Remix v2 codebase.

インストール方法を見る

含まれるファイル(6)

  • SKILL.md7.9 KB
  • references/layouts-outlets.md5.9 KB
  • references/resource-routes.md5.9 KB
  • references/root-shell.md4.6 KB
  • references/route-files.md7.5 KB
  • references/v1-holdovers.md6.1 KB

SKILL.md(原文)

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

Remix v2 Routing Code Review

Loaded by review-remix-v2 (umbrella) to flag routing anti-patterns in app/routes/ modules. See remix-v2-routing for canonical patterns.

Quick Reference

Issue TypeReference
Filename smells (index.tsx, __auth, wrong escape, non-route files)references/route-files.md
Missing <Outlet />, orphan dotted segments, duplicated layout logicreferences/layouts-outlets.md
Default export on a resource, <Link> without reloadDocument, splat paramsreferences/resource-routes.md
react-router-dom imports, __double folders, v1-adapter fallbackreferences/v1-holdovers.md
Missing <Meta />/<Links />/<Scripts />/<ScrollRestoration />, Vite-vs-Classic <LiveReload />, root ErrorBoundary without document shellreferences/root-shell.md

Scope

This skill flags issues in:

  • Files under app/routes/ (filenames, exports, imports, JSX shape)
  • app/root.tsx (document shell, root <Outlet />)
  • remix.config.js (entries that change route discovery: routes(), ignoredRouteFiles, @remix-run/v1-route-convention)
  • Any module that links to a resource route (<Link> usage)

Out of scope: loader/action data contracts (covered by remix-v2-data-flow-review), form behavior (remix-v2-forms-review), meta/headers (remix-v2-meta-sessions-review).

Review Checklist

  • Index routes named _index.tsx, not index.tsx
  • Pathless layouts use single underscore (_auth.tsx), not double (__auth/)
  • Dotted child routes (users.profile.tsx) have a parent module or use trailing underscore (users_.profile.tsx)
  • Parent route modules render <Outlet />
  • Splat segments read params["*"], never params.splat / params.rest
  • Literal dots/special chars escaped with brackets (sitemap[.]xml.tsx)
  • Resource routes have no default export
  • <Link> to a resource route uses reloadDocument (or is a plain <a>)
  • Imports come from @remix-run/react, not react-router-dom
  • Non-route files (CSS, helpers, tests) live in a folder with route.tsx, or are listed in ignoredRouteFiles
  • Trailing-underscore opt-outs only used when a parent layout actually exists to escape
  • Optional segments ($lang) narrow params.lang in the loader (see references/route-files.md)

Valid Patterns (Do NOT Flag)

  • Resource route with no default export — this is the convention that makes it a resource route. Never flag.
  • Any _-prefixed pathless layout file without <Outlet /> when the module is intentionally a wrapper that renders fixed UI only. Confirm by checking children — if no *.{segment}.tsx siblings exist, the wrapper-only shape is intentional.
  • Files prefixed with _ that don't appear in any URL — pathless layouts and _index are supposed to be hidden from the URL.
  • @remix-run/v1-route-convention wired up in remix.config.js — legitimate migration adapter, not a smell on its own. Only flag if v1-style files appear without the adapter installed.
  • useLoaderData<typeof loader>() — type annotation, not assertion.
  • Splat route accessing params["*"] with bracket syntax — that is the only correct access pattern.
  • Folder app/routes/dashboard/ with route.tsx plus sibling .server.ts, .css, component files — co-location is the documented pattern.
  • Trailing underscore (concerts_.mine.tsx) when a sibling concerts.tsx layout exists and this URL intentionally skips it.

Context-Sensitive Rules

Only flag these issues when the specific context applies:

IssueFlag ONLY IF
index.tsx under app/routes/Project is v2 and @remix-run/v1-route-convention is NOT wired in remix.config.js
Parent module without <Outlet />Sibling dotted children (parent.*.tsx) exist in app/routes/
__double underscore folderNo v1-convention adapter is installed
Trailing-underscore segmentNo corresponding parent layout exists (nothing to opt out of)
Default export on a module returning non-HTMLThe loader/action actually returns a raw Response (PDF, JSON, RSS)
<Link> to resource routeTarget route has no default export AND <Link> lacks reloadDocument

Hard gates (before writing findings)

Run these in order. Do not draft user-facing findings until every gate passes for the batch you are about to report.

  1. Location evidence — Pass: Each issue lists a repo path (file under app/routes/ or remix.config.js) and either a line range or a short verbatim quote from the file you read. Filename-only smells must quote the literal filename.

  2. Exemption check — Pass: For each issue, state in one line why it is not covered by Valid Patterns (Do NOT Flag). Resource-route flags require explicit evidence of a default export or a <Link> without reloadDocument.

  3. Version check — Pass: Confirm the project is Remix v2 (check package.json for @remix-run/react ^2, or presence of v2 flat-routes filenames elsewhere in app/routes/). If @remix-run/v1-route-convention is wired in remix.config.js, v1 filenames (__auth/, index.tsx) are intentional — do not flag them as smells.

  4. Protocol — Pass: Complete the Pre-Report Verification Checklist in review-verification-protocol for this review.

When to Load References

Review Questions

  1. Does every parent route render <Outlet />, or is it a deliberate wrapper-only?
  2. Do filenames match the v2 grammar (single _ for pathless, _index for index, [...] for escapes)?
  3. Are resource routes free of default exports, and do all <Link>s to them use reloadDocument?
  4. Are all router imports from @remix-run/react (and server helpers from @remix-run/node)?
  5. If v1 filenames exist, is @remix-run/v1-route-convention wired up — or are they accidental?

Additional Documentation

  • Route file naming smells: references/route-files.md — index.tsx, __double folders, wrong escape syntax, dot/underscore confusion, non-route files under app/routes/.
  • Layouts and outlets: references/layouts-outlets.md — pathless layout misuse, missing <Outlet />, orphan dotted children, duplicated layout logic.
  • Resource routes: references/resource-routes.md — accidental default export, <Link> without reloadDocument, splat params["*"] access.
  • v1 holdovers: references/v1-holdovers.md — react-router-dom imports, __auth folders, @remix-run/v1-route-convention as a deliberate-vs-accidental tell.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

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日 更新

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日 更新

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日 更新

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日 更新

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日 更新

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 のスキルをすべて見る

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