routing-patterns

Design URL-to-content mappings with dynamic, optional, and catch-all routing parameters.

35|5|Updated Feb 5, 2026

Ready to run

npx skills add https://github.com/farming-labs/fm-skills --skill routing-patterns-farming-labs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: routing-patterns
Source: https://github.com/farming-labs/fm-skills/tree/main/routing-patterns
Command: npx skills add https://github.com/farming-labs/fm-skills --skill routing-patterns-farming-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Routing patterns define how URLs map to content and determine how navigation works across SPAs, MPAs, and meta-frameworks, helping teams design scalable architectures.

Core Features & Use Cases

Client-side routing concepts (History API, pushState, hash routing)
Server-side routing patterns (pattern matching, 404 handling)
File-based routing and nested layouts (templates, route groups, layouts)
Handling dynamic, optional, and catch-all parameters across frameworks
Use Case: Designing a Next.js/SvelteKit-like app with clean URLs and maintainable navigation structures

Quick Start

Create a simple routes table or file-based routing structure:

Map "/" to HomePage
Map "/about" to AboutPage
Map "/blog/[slug]" to BlogPostPage Then load the router and navigate to "/about" to see the AboutPage render.

Frequently Asked Questions about routing-patterns

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

FAQPage Schema

What are routing patterns and how do they map URLs to content in web apps?▼

Routing patterns define how web applications map URLs to content, determining navigation structure across SPAs, MPAs, and meta-frameworks. They handle route matching, dynamic parameters, and nested layouts to ensure predictable, maintainable navigation for scalable architectures.

How do I design file-based routing with nested layouts for a Next.js or SvelteKit app?▼

File-based routing maps file structures directly to URLs, supporting nested layouts, templates, and route groups. You can design clean URLs by mapping paths like "/blog/[slug]" to specific pages, creating maintainable navigation structures for Next.js or SvelteKit-like applications.

What is the difference between client-side SPA routing and server-side routing?▼

Client-side SPA routing uses the History API, pushState, and hash routing to navigate without full page reloads, while server-side routing involves pattern matching and 404 handling on the server. Both approaches use routing patterns to map URLs to content predictably.

How do I handle dynamic, optional, and catch-all parameters across web frameworks?▼

Dynamic, optional, and catch-all parameters are handled through route matching patterns that map URL segments to content. Using syntax like "/blog/[slug]" for dynamic routes or catch-all segments, frameworks parse these parameters to render the correct page and maintain predictable navigation.

Can I use route guards and middleware-like protections with client-side routing?▼

Yes, route guards and middleware-like protections can be applied to client-side routing. They intercept navigation to enforce access control before rendering matched routes, ensuring predictable and maintainable navigation structures across SPAs and meta-frameworks.

When should I use catch-all parameters versus dynamic parameters in routing?▼

Use dynamic parameters like "/blog/[slug]" for matching single URL segments, and catch-all parameters for capturing multiple nested segments. Choosing the right routing pattern ensures your URL structure maps cleanly to content and maintains scalable navigation.