vite-routing-rules
CommunityConfigure Vite SPA routing with React Router v6
System Documentation
What problem does it solve?
This skill helps developers set up robust client‑side routing in a Vite‑based React SPA, providing typed search parameters, protected layout routes, and lazy‑loaded pages, eliminating repetitive boilerplate and hard‑coded strings.
Core Features & Use Cases
- Typed routing with createBrowserRouter – central definition of public and protected routes.
- Layout components using Outlet – shared UI (sidebar, auth screens) without duplication.
- Client‑side auth guards – simple UX redirects for unauthenticated users.
- Zod‑validated search params – safe handling of query strings.
- Lazy page loading – code‑splitting for faster initial load.
- Centralized constant routes – avoids string scattering.
Use case example: building a dashboard application where some routes require authentication and others are public, with query filters typed via Zod.
Quick Start
Create a Vite React Router v6 routing configuration with protected layouts, typed search parameters, and lazy‑loaded pages.
Dependency Matrix
Required Modules
None requiredComponents
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: vite-routing-rules Download link: https://github.com/mauriciodelrio/delriodev-skills/archive/main.zip#vite-routing-rules Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.