From 15988c20f00c7e482baf407acbf2fabec7a94f89 Mon Sep 17 00:00:00 2001 From: k-j-kim Date: Tue, 31 Mar 2026 10:56:50 -0700 Subject: [PATCH] fix: derive router basename from at runtime Add guidance to building-ui-bundle-frontend skill to always derive the client-side router basename from the document's tag instead of hardcoding it. --- skills/building-ui-bundle-frontend/SKILL.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/skills/building-ui-bundle-frontend/SKILL.md b/skills/building-ui-bundle-frontend/SKILL.md index b83252d..47a07fa 100644 --- a/skills/building-ui-bundle-frontend/SKILL.md +++ b/skills/building-ui-bundle-frontend/SKILL.md @@ -43,6 +43,15 @@ Before finishing, confirm: Did I update `appLayout.tsx` with real nav items and Use a single router package. With `createBrowserRouter` / `RouterProvider`, all imports must come from `react-router` (not `react-router-dom`). +If the app uses a client-side router (React Router, Remix Router, Vue Router, etc.), always derive basename / basepath / base from the document's `` tag at runtime. Never hardcode the basename: + +```js +const basename = document.querySelector('base') + ? new URL(document.querySelector('base').href).pathname.replace(/\/$/, '') + : '/'; +const router = createBrowserRouter(routes, { basename }); +``` + ### Component Library and Styling - **shadcn/ui** for components: `import { Button } from '@/components/ui/button';`