Initial commit

commands/sng-add-route.md

@@ -0,0 +1,83 @@
+# 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?"