skills.rest
iv-zhang
iv-zhangCOMMUNITY
Explore all skills by this author →
GitHub

bmrc-new-page

Adds new pages and routes to a Next.js static-export app with Firestore wiring.

2|Updated Dec 24, 2025
Search Tags:#routing#next.js#navigation#app router#firestore#static export#role gating
One-click install
npx skills add https://github.com/iv-zhang/BMRC-Logistics --skill bmrc-new-page-iv-zhang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bmrc-new-page
Source: https://github.com/iv-zhang/BMRC-Logistics/tree/main/.claude/skills/bmrc-new-page
Command: npx skills add https://github.com/iv-zhang/BMRC-Logistics --skill bmrc-new-page-iv-zhang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new page to the BMRC Logistics app involves non-obvious constraints: the app is fully static (output: 'export'), so dynamic route segments and useSearchParams() break the build, and every page must follow specific auth, data, and navigation registration patterns. This Skill encodes all of those rules so new routes work on the first build. ## Core Features & Use Cases - Static-export routing guidance: Enforces the static route + query param pattern (/foo/detail?id=<docId>) and reading params from window.location.search instead of useSearchParams(). - Page skeleton with auth and data wiring: Provides a canonical 'use client' page template using useUserRole() for role gating, onSnapshot Firestore listeners with proper unsubscribe, and useOrgConfig() for configuration. - Navigation registration: Covers adding entries to the sidebar (ADMIN_NAV/MEMBER_NAV), the mobile bottom nav, and the NO_BOTTOM_NAV_PATHS/NO_SIDEBAR_PATHS exception lists. - Use Case: You need an admin-only inventory audit page. The Skill gives you the skeleton, the role === 'admin' || role === 'quartermaster' gate, the sidebar entry, and a ship checklist including npm run build to catch static-export violations. ## Quick Start Ask the AI to add a new admin page at /inventory/audit to the BMRC Logistics app with a sidebar nav entry and Firestore-backed list.

Frequently Asked Questions about bmrc-new-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new page in Next.js App Router with static export?▼

Create a 'use client' page component under app/ and register it in the sidebar navigation. With output: 'export', every route must be known at build time, so avoid dynamic segments and verify with npm run build, which catches violations that dev mode tolerates.

How to handle dynamic IDs with Next.js static export?▼

Use a static route with query parameters, such as /foo/detail?id=<docId>, instead of dynamic segments like app/foo/[id]. Firestore document IDs do not exist at build time, so generateStaticParams cannot cover them.

Why does useSearchParams break my Next.js static export build?▼

useSearchParams forces a Suspense boundary that fails under static export with trailingSlash enabled. Read query params from window.location.search inside a useEffect instead, parsing them with URLSearchParams.

How do I gate a page by user role with Firebase auth?▼

Use the useUserRole hook, which returns user, role, and loading state. Treat admin access as role === 'admin' || role === 'quartermaster', redirect unauthenticated users to /login, and wrap admin nav links in an isAdmin conditional.

Can I test different user roles without logging in again?▼

Yes. Set localStorage.bmrc_role_override to a role string like 'admin' or 'member'; the useUserRole hook picks it up via the bmrc-role-changed and storage events. Remove the key to restore your real role.

Related Skills

Explore More Software Engineering Skills→
pxlcrtivpxlcrtiv

firebase-basics

Set up and manage Firebase projects with the Firebase CLI.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-responsive-images

Detect responsive image defects in browser audits of product pages.

Community
Intermediate
DevXojeDevXoje

firebase

Standardize Firebase Auth and Firestore error handling and data conversion.

Community
Advanced
wsimmondswsimmonds
109

nextjs-dynamic-routes-params

Maps URL segments to dynamic route files and accesses params in Next.js App Router.

Community
Basic