dotfiles/sources/opencode/skills/react-router/SKILL.md

name, description, metadata

name	description	metadata
react-router	React Router setup using @aminnairi/react-router - project initialization and routing implementation	library audience @aminnairi/react-router developers

Project

Use @aminnairi/react-router from GitHub: https://github.com/aminnairi/react-router if the current project does not use any router like React Router or Tanstack Router.

Documentation Priority

When looking for documentation, prefer in this order:

1. Local module README.md (node_modules/@aminnairi/react-router/README.md)
2. NPM package: https://npmjs.com/package/@aminnairi/react-router
3. GitHub repository: https://github.com/aminnairi/react-router

Initialization

When setting up a new React project with routing:

1. Ask user for project location preference:

   • Current folder (use npm create vite@latest -- --template react-ts .)
   • Named folder (use npm create vite@latest -- --template react-ts <folder-name>)
   • Monorepo folder (if detecting root package.json with workspaces property)

2. If monorepo: Update the root package.json workspaces property with the new project path

3. Install dependencies:

   npm install @aminnairi/react-router
   

4. Set up routing in your app using the custom router

Best Practices

• Use declarative routing with <Route> components
• Follow the router's conventions for nested routes
• Implement proper route guards for authentication
• Use the router's built-in hooks (useParams, useLocation, useNavigate)