Skills
.Work. You
Rest

frontend-navigation

Official

Declarative React Router navigation for SSR.

Software Engineering#frontend#routing#navigation#ssr#react-router#layout-guards
Authoraexol-studio
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Helps teams architect and implement consistent, SSR-safe navigation for React apps by centralizing route definitions, layouts, and guards.

Core Features & Use Cases

  • Classic Routes/Route usage with SSR-safe architecture via BrowserRouter and StaticRouter
  • Layout-based guards (ProtectedLayout and GuestLayout) to protect route groups
  • Nested layouts with AdminLayout and child routes to share UI
  • Route grouping by access level: guest/public/protected for clear separation
  • Declarative navigation using Link and Navigate; explicit active state via useLocation
  • SSR integration: separate entry points for client and server, with proper hydration and redirects
  • Central source of truth for routes in routes/index.tsx to ensure consistency

Quick Start

Create a new protected route under /app and confirm ProtectedLayout redirects unauthenticated users to the login page.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-navigation
Download link: https://github.com/aexol-studio/axolotl/archive/main.zip#frontend-navigation

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.