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.

1. •Produce output contract:

• •Router topology: routes, router, controls, view mapping.
• •Wiring snippets for navigation and query flows.
• •Notes for params/path DSL used by each route.
• •Notes on adapter/SSR decisions when relevant.
• •Validation checklist with expected lifecycle behavior.

Defaults

• •Target React web only (@argon-router/react).
• •Switch to React Native patterns only when task explicitly targets mobile/native stack.
• •Use happy-path integration patterns.
• •Keep route graph explicit and small before adding composition.
• •Prefer declarative Effector links (sample, attach) over imperative glue code.
• •Prefer Link over useLink unless custom interaction requires manual handlers.

Guardrails

• •Initialize controls with setHistory before expecting route activation from URL changes.
• •Pass router adapters to setHistory (historyAdapter(...) or queryAdapter(...)), not raw history objects.
• •Ensure every route used by useLink is registered in createRouter({ routes }).
• •Keep route paths deterministic; avoid ambiguous wildcard-heavy patterns unless required.
• •Model query state through trackQuery, not ad-hoc parsing in components.
• •Keep view rendering centralized in createRoutesView and Outlet composition.
• •Add createRoutesView({ otherwise }) when no-match fallback is part of requirements.
• •Use historyAdapter for pathname routing and queryAdapter for secondary/modal/tab routing.
• •For SSR/testing, initialize router in scope with allSettled(router.setHistory, { params: historyAdapter(createMemoryHistory(...)) }).