app-routing

Guidance for adding client-side page navigation to Fusebase Apps using React Router. Client-side routing changes the displayed page without loading a new document, while path-based routes use URLs such as /settings or /users/42.

In plain words
What is it for?
Use it when adding routes, fixing deployed routes, configuring BrowserRouter, or linking between pages in a Fusebase app.
Why use it?
It helps avoid broken links, deployment 404 errors, and lost navigation state after sign-in or other redirects. It also explains Fusebase's subdomain-based URL structure.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/fusebase-dev/fusebase-flow/app-routing
Any agent
npx skills add fusebase-dev/fusebase-flow --skill app-routing
Clone the repo
git clone --depth 1 https://github.com/fusebase-dev/fusebase-flow

Made for: Claude Code, Codex.

Per session 53 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 399 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00053 $0.00399
Opus 5 $0.00026 $0.00199
Sonnet 5 $0.00011 $0.00080
Haiku 4.5 $0.00005 $0.00040

Measured 2d ago against content hash b940a39fe341, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

app-routing scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/app-routing/SKILL.md · 48 lines

What it actually says

App Routing

Fusebase Apps apps are each served from their own subdomain root:

https://{app-subdomain}.{FUSEBASE_APP_HOST}/

Read FUSEBASE_APP_HOST from the project .env when constructing app URLs. The app always owns the full path space from /.

IMPORTANT: Always use path-based routing (BrowserRouter). Hash-based routing (HashRouter) is forbidden — hash fragments are stripped during redirects (e.g. OAuth, SSO), causing users to lose their navigation state.

Path-Based Routing

Routes work as normal from root:

https://my-app.{FUSEBASE_APP_HOST}/settings
https://my-app.{FUSEBASE_APP_HOST}/users/42

Configure the router

import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </BrowserRouter>
  )
}

Common Pitfalls

  1. Using HashRouter — Forbidden. Hash fragments are dropped on redirects, breaking navigation after OAuth or SSO flows.
  2. Hardcoded absolute paths — Use React Router's <Link> component, not raw <a href="/settings">.
  3. Defining routes under /api — The /api prefix is reserved for the backend when an app has one. Never create SPA routes under /api/*. See skill app-backend.
Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 48 lines · 53 tokens per session scan A b940a39fe341

Subscribe to this mod's changes

app-routing is a skill published in the GitHub repository fusebase-dev/fusebase-flow (9 stars, last pushed 7d ago), licensed MIT. It adds 53 tokens to every session and 399 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

adobe-express-core

Adobe Express environment essentials, two-runtime architecture, project setup, and MCP server configuration. Use when starting add-on development, understanding iframe vs sandbox boundaries, configuring MCP servers, setting up local projects, or validating manifest configuration.

Sandgrouse/adobe-express-dev-skill · 50 tokens

adobe-express-monetization

Monetize Adobe Express add-ons with subscriptions and payments. Use when designing checkout flows, defining subscription tiers, implementing webhook verification, managing entitlements, or securing backend billing logic.

Sandgrouse/adobe-express-dev-skill · 44 tokens

adobe-express-spectrum-ui-ux

Build or review Adobe Express add-on panel UI with Spectrum patterns, stack selection guidance (raw SWC, swc-react, React Spectrum), Express theme setup, state and navigation design, and actionable UX quality checks. Use when implementing or auditing panel layouts, interaction states, multi-screen flows, and…

Sandgrouse/adobe-express-dev-skill · 70 tokens

adobe-express-cors-and-backend

Diagnose and fix CORS errors between Adobe Express add-on UI and backend APIs across local development, private listing, and public listing stages. Use when browser requests fail with preflight, Access-Control-Allow-Origin, Access-Control-Allow-Headers, or OPTIONS issues; when moving from localhost to hosted add-on…

Sandgrouse/adobe-express-dev-skill · 92 tokens

adobe-express-document-manipulation

Create and modify document content in Adobe Express add-ons using Document SDK. Use when planning document operations, inserting shapes/text/media, sequencing sandbox commands, or troubleshooting document edits.

Sandgrouse/adobe-express-dev-skill · 43 tokens

adobe-express-oauth-authentication

Implement OAuth 2.0 and authentication flows for Adobe Express add-ons. Use when connecting to cloud providers (Dropbox, OneDrive, Google Drive), managing tokens, storing credentials, or designing login surfaces.

Sandgrouse/adobe-express-dev-skill · 50 tokens