argon-router

Argon Router

Use this skill to implement argon-router in React web apps with predictable Effector dataflow and typed paths.

Workflow

1. Classify the task:

• setup: create route map, router, and controls.
• ui: connect router to React views, links, and outlet.
• native: integrate argon-router with React Navigation in React Native.
• query: track URL query state and sync enter/exit flows.
• composition: build derived/protected/virtual routes.
• adapters: pick and configure history/query/custom adapter.
• ssr: scope-safe initialization with memory history and allSettled.
• hooks: route activity and router access hooks in React.
• debug: validate path/router wiring and route lifecycle.

1. Load only required references:

• Always start with references/core-routing.md.
• Add references/react-web.md for any React integration task.
• Add references/react-native.md for React Native stack/tabs integration.
• Add references/paths-dsl.md when working with route path syntax or parsing/building URLs.
• Add references/query-tracking.md when query params or filters are involved.
• Add references/route-composition.md when using auth guards, grouped states, or virtual routes.
• Add references/adapters-ssr.md for historyAdapter/queryAdapter, adapter selection, SSR bootstrap.
• Add references/react-navigation-apis.md for Link, useRouter, useRouterContext, useIsOpened, useOpenedViews.
• Add references/lazy-layout.md for createLazyRouteView and withLayout.
• Add references/examples.md for copyable happy-path scaffolds.
• End with references/checklist.md before final output.

1. Resolve source of truth before implementation:

• Prefer ../argon-router/packages/*/lib/*.ts and package lib/index.ts exports.
• Use docs as explanatory context and examples.
• If docs and code differ, follow code behavior and note mismatch briefly.

1. Build in this order:

• Define route units with explicit paths and params.
• Create router controls and initialize history adapter.
• Create router with known routes, optional base, and explicit pathless mapping ({ path, route }) when needed.
• Create React route views and wire RouterProvider + createRoutesView (add otherwise when fallback behavior is required).
• Add link/navigation actions via route open and Link first.
• Use useLink only for custom interaction surfaces.
• Add dynamic registration (router.registerRoute(...)) only if runtime extension is required.
• Add query trackers only when URL query behavior is required.
• Add route composition (chainRoute, group) after baseline routing works.
• Add lazy/layout organization (createLazyRouteView, withLayout) when route tree is stable.