skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

kb-navigation

Model config-driven Next.js App Router navigation with RBAC and feature-flag filtering.

Updated May 19, 2026
Search Tags:#rbac#navigation#feature flags#nextjs app router#mobile bottom nav#badge counts#config-driven ssot
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-navigation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kb-navigation
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/kb-navigation
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of messy, inconsistent navigation implementations by centralizing how routes, RBAC visibility, feature flags, and badge counts are modeled for a Next.js App Router app.

Core Features & Use Cases

  • Config-driven SSOT navigation: Define every nav item in a single typed config so updates require editing one place instead of multiple UI components.
  • RBAC and feature-flag filtering at the config layer: Filter the navigation tree in one traversal before rendering to keep surfaces consistent across desktop and mobile.
  • Badge counts via hook registry: Attach count “keys” to items and map them to dedicated hooks so data-fetch strategies stay decoupled from navigation UI.
  • Mobile + desktop composition with overflow patterns: Build a desktop sidebar and a mobile bottom-nav plus “more” sheet from the same config.
  • Collapsible groups and active-state propagation: Support nested groups with parent expansion when a child is active.

Quick Start

Use kb-navigation to model the navigation for your new feature by writing a single config list of nav items (including roles, feature flags, and badge keys) and then deriving the desktop sidebar and mobile bottom-nav from the filtered config.

Frequently Asked Questions about kb-navigation

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

FAQPage Schema
How do I build a Next.js App Router navigation that filters by RBAC and feature flags?▼

Define a config-driven SSOT for navigation items, then filter the tree in a single traversal before rendering to apply RBAC and feature flags consistently across all UI surfaces.

What is the best way to synchronize a desktop sidebar and mobile bottom nav in Next.js?▼

Use a single typed config list of navigation items to derive both the desktop sidebar and mobile bottom-nav, applying breakpoint-specific composition and overflow sheets from the same source.

How do badge counts work in a config-driven navigation setup?▼

Attach count keys to navigation items and map them to a dedicated hook registry, keeping badge data-fetch strategies decoupled from the navigation UI components.

Can I use collapsible groups with active-state propagation in Next.js navigation?▼

Yes, the navigation config supports nested groups with collapsible behavior, automatically expanding parent groups when a child route becomes active.

Does Next.js navigation RBAC visibility replace route-level authorization?▼

No, filtering navigation visibility by RBAC roles is separate from route-level authorization and does not secure the actual routes from unauthorized access attempts.

Why should I centralize feature flag and RBAC filtering at the config layer?▼

Centralizing RBAC and feature flag filtering at the config layer ensures navigation updates require editing only one place, preventing messy and inconsistent UI implementations.

Related Skills

Explore More Software Engineering Skills→
TimeKastTimeKast

sk-navigation

Centralize Next.js navigation in a single config with RBAC filtering.

Official
Advanced
saranskumarsaranskumar

responsive-design-planner

Plan responsive layouts with breakpoints and content priority across mobile, tablet, and desktop.

Community
Intermediate
vishalsachdevvishalsachdev
2

secure-nextjs-api-routes

Secure Next.js 13+ App Router API routes with composable middleware.

Community
Advanced
DrSatsuma1DrSatsuma1

react-architecture-enforcer

Enforce React architecture rules with pre-flight checks and extraction workflows.

Community
Intermediate