navigation

Governs admin menu declarations, route gating, and panel layout in Angular applications.

1|Updated Jan 14, 2024
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill navigation-eyhenij
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: navigation
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/navigation
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill navigation-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Admin navigation menus often drift out of sync with route guards, causing items that are hidden in the menu but still reachable by URL, or duplicated declarations that diverge over time. This rule enforces a single declaration as the source of truth for both the menu and route gating. ## Core Features & Use Cases - Single Declaration Principle: One item declaration drives both the rendered menu and route access guards, preventing visibility/access mismatches. - Two-Layer Gating Model: Distinguishes gating by user rights from gating by section availability flags, with clear rules for items that have no screen yet. - Dependency Boundaries: Forbids the menu declaration from importing the application shell, keeping the module graph acyclic and lint-checkable. - Use Case: When adding a new admin section, follow the admin-nav-item pattern to declare the item, its route constant, rights, and localized captions in one consistent edit. ## Quick Start Load this rule when editing the menu declaration, app routes, or any admin routes file, then follow the admin-nav-item pattern to add a new section.

Frequently Asked Questions about navigation

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

FAQPage Schema
How do I add a new admin menu item with its route in Angular?

Declare the item once in the menu declaration file with its title, path, and icon, then reference the same route constant in the section's routes file. The single declaration feeds both the rendered menu and the route access guard, so the two never drift apart.

How do I hide a menu item but keep its route guarded?

Use two-layer gating: set the required user right in the item declaration, and the route guard reads that same declaration. An item gated by a section flag is declared without an address and without rights, since there is no screen to open.

Why does my menu item show but the page still opens for unauthorized users?

This happens when route gating uses a separate list from the menu declaration, and the two drift apart. The rule requires one declaration to serve as the source of both menu visibility and route guards, so a hidden item is also unreachable.

Can the menu declaration import the application shell?

No. The declaration must not import the shell, because that closes a dependency cycle between shell, container, and feature modules and breaks the layout boundary check. Domain data reaches the header through an injection token instead.

How should domain data get into the admin page header?

Provide it through an Angular InjectionToken defined in the container util layer, with the composition root binding the token to the implementation. The declaration itself never imports the application shell or feature code directly.