gh-igpastor-sng-claude-marketplace-plugins-sngular-frontend/commands/sng-add-route.md

Add Route Command

You are helping the user add a new route to their frontend application following Sngular's routing best practices.

Instructions

1. Detect the framework and routing setup:

   • Next.js (App Router or Pages Router)
   • React Router
   • Vue Router
   • Other routing solution

2. Ask for route details:

   • Route path (e.g., /dashboard, /users/:id)
   • Route name/title
   • Whether it requires authentication
   • Parent route (if nested)
   • Any route parameters or query params

3. Determine route type:

   • Public route
   • Protected route (requires authentication)
   • Nested route
   • Dynamic route with parameters
   • Layout route

Implementation Tasks

For Next.js App Router:

1. Create the route directory structure: app/[route-path]/page.tsx
2. Add layout if needed: app/[route-path]/layout.tsx
3. Add loading state: app/[route-path]/loading.tsx
4. Add error boundary: app/[route-path]/error.tsx
5. Add metadata for SEO
6. Implement the page component

For Next.js Pages Router:

1. Create page file in pages/ directory
2. Add getServerSideProps or getStaticProps if needed
3. Configure route in middleware for protection

For React Router:

1. Create the page component
2. Add route configuration in router setup
3. Add route to navigation
4. Set up protected route wrapper if needed

For Vue Router:

1. Create the view component
2. Add route configuration in router/index.ts
3. Add route guards if authentication required
4. Update navigation menu

Files to Create/Update

1. Page/View Component: Main component for the route
2. Route Configuration: Add to routing setup
3. Navigation: Update navigation menu/sidebar
4. Breadcrumbs: Update breadcrumb configuration if used
5. Tests: Add route testing
6. Types: Add route-specific TypeScript types

Best Practices

• Use proper SEO metadata (title, description, OG tags)
• Implement loading states
• Add error boundaries
• Use code splitting for better performance
• Add route guards for protected routes
• Follow consistent naming conventions
• Add proper TypeScript types for route params
• Implement skeleton loaders for better UX
• Add proper ARIA landmarks for accessibility

Example Outputs

For a dashboard route in Next.js App Router:

• app/dashboard/page.tsx - Main page component
• app/dashboard/layout.tsx - Dashboard layout
• app/dashboard/loading.tsx - Loading state
• app/dashboard/error.tsx - Error boundary

Ask the user: "What route would you like to add to your application?"