# Argon Router

> Integrate and use argon-router in React web applications with Effector. Use when tasks involve creating routes and routers, wiring RouterControls/history adapters, composing routes with chainRoute/group/createVirtualRoute, rendering views with RouterProvider/createRoutesView/Outlet, building links with Link/useLink, and managing URL query state with trackQuery and @argon-router/paths.

- **Type:** Skill
- **Install:** `agentstack add skill-aiko-atami-effectorjs-skills-argon-router`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [aiko-atami](https://agentstack.voostack.com/s/aiko-atami)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [aiko-atami](https://github.com/aiko-atami)
- **Source:** https://github.com/aiko-atami/effectorjs-skills/tree/main/skills/argon-router
- **Website:** https://effector.dev/

## Install

```sh
agentstack add skill-aiko-atami-effectorjs-skills-argon-router
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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.

2. 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.

3. 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.

4. 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.

5. 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(...)) })`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [aiko-atami](https://github.com/aiko-atami)
- **Source:** [aiko-atami/effectorjs-skills](https://github.com/aiko-atami/effectorjs-skills)
- **License:** MIT
- **Homepage:** https://effector.dev/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-aiko-atami-effectorjs-skills-argon-router
- Seller: https://agentstack.voostack.com/s/aiko-atami
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.