Frontend Routing

This handles client-side routing across React Router v6, Vue Router 4, and Angular Router with working examples for protected routes, lazy loading, and query parameters. You'll want this when building SPAs that need URL-based navigation, route guards for auth, or code splitting. The quick start gives you a protected route wrapper right away, and the reference guides break down framework-specific implementations. It covers the practical stuff like transition effects and query parameter handling, though the best practices section is pretty generic. Solid if you're setting up routing from scratch or migrating between major versions.

skills.sh installs: 454
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill frontend-routing --agent claude-code

Installs into .claude/skills of the current project.

Files

Overview

Implement client-side routing with navigation, lazy loading, protected routes, and state management for multi-page single-page applications.

When to Use

Multi-page navigation
URL-based state management
Protected/guarded routes
Lazy loading of components
Query parameter handling

Quick Start

Minimal working example:

// App.tsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './pages/Home';
import { NotFound } from './pages/NotFound';
import { useAuth } from './hooks/useAuth';
import React from 'react';

// Lazy loaded components
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const UserProfile = React.lazy(() => import('./pages/UserProfile'));
const Settings = React.lazy(() => import('./pages/Settings'));

SKILL.md on GitHub