# 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?"