Initial commit

2025-11-29 18:24:55 +08:00
commit bb9b688c76
8 changed files with 2098 additions and 0 deletions
--- a/commands/design-routes.md
+++ b/commands/design-routes.md
@@ -0,0 +1,261 @@
+---
+name: design-routes
+description: Design and plan Angular routes using Router-First methodology before implementing components
+---
+
+Design the complete routing structure for an Angular application using Router-First methodology.
+
+## What This Command Does
+
+Following Doguhan Uluca's Router-First approach, this command helps you:
+- ✅ Define routes BEFORE building components
+- ✅ Plan lazy loading strategy
+- ✅ Set up route guards and resolvers
+- ✅ Design navigation hierarchy
+- ✅ Plan data loading strategies
+
+## Information Needed
+
+Ask the user:
+1. **App type** - What kind of application? (e.g., e-commerce, dashboard, CMS)
+2. **User roles** - What roles exist? (e.g., admin, user, guest)
+3. **Main features** - List all features (e.g., dashboard, products, orders, settings)
+4. **Sub-features** - Any nested routes? (e.g., products → list/detail/edit)
+5. **Public vs Protected** - Which routes need authentication?
+
+## Router-First Process
+
+### Step 1: Create User Flow Diagram
+```
+Guest → Login → Dashboard → [Features]
+                          ├── Products
+                          ├── Orders
+                          ├── Users (admin only)
+                          └── Settings
+```
+
+### Step 2: Design Route Tree
+```
+/                           (redirect to /dashboard)
+/login                      (public, lazy)
+/dashboard                  (protected, lazy)
+  ├── /overview             (default)
+  ├── /analytics            (lazy)
+/products                   (protected, lazy)
+  ├── /list                 (default)
+  ├── /detail/:id           (lazy)
+  ├── /create               (lazy, admin only)
+/orders                     (protected, lazy)
+/users                      (protected, lazy, admin only)
+/settings                   (protected, lazy)
+```
+
+### Step 3: Define Route Configuration
+```typescript
+export const routes: Routes = [
+  {
+    path: '',
+    redirectTo: '/dashboard',
+    pathMatch: 'full'
+  },
+  {
+    path: 'login',
+    loadComponent: () => import('./features/auth/login.component')
+      .then(m => m.LoginComponent),
+    data: { breadcrumb: 'Login' }
+  },
+  {
+    path: 'dashboard',
+    loadChildren: () => import('./features/dashboard/dashboard.routes')
+      .then(m => m.DASHBOARD_ROUTES),
+    canActivate: [AuthGuard],
+    data: { breadcrumb: 'Dashboard' }
+  },
+  {
+    path: 'products',
+    loadChildren: () => import('./features/products/products.routes')
+      .then(m => m.PRODUCTS_ROUTES),
+    canActivate: [AuthGuard],
+    data: { breadcrumb: 'Products' }
+  },
+  {
+    path: 'users',
+    loadChildren: () => import('./features/users/users.routes')
+      .then(m => m.USERS_ROUTES),
+    canActivate: [AuthGuard, RoleGuard],
+    data: { breadcrumb: 'Users', role: 'admin' }
+  }
+];
+```
+
+### Step 4: Plan Guards and Resolvers
+```typescript
+// Guards needed
+AuthGuard       - Check if user is logged in
+RoleGuard       - Check user permissions
+UnsavedGuard    - Warn before leaving unsaved forms
+
+// Resolvers needed (optional)
+UserResolver    - Load user data before route activates
+ProductResolver - Preload product details
+```
+
+### Step 5: Loading Strategy
+```
+Immediate Load (Critical Path):
+- Login page
+- Dashboard shell
+- Error pages
+
+Lazy Load (On Demand):
+- Dashboard sub-routes
+- Product management
+- Admin features
+- Reports
+- Settings
+
+Preload Strategy:
+- Dashboard components (after login)
+- High-traffic features
+```
+
+## Output Format
+
+Provide:
+
+1. **Visual Route Tree** - ASCII diagram of all routes
+2. **Route Configuration Code** - Complete app.routes.ts
+3. **Feature Routes** - Example feature routing files
+4. **Guards Needed** - List with implementation stubs
+5. **Performance Plan** - Bundle size estimates
+6. **Navigation Strategy** - How users move through the app
+7. **ADR Document** - Architectural Decision Record
+
+## Example Output
+
+### Route Tree Visualization
+```
+Application Routes (Lazy-Loaded)
+│
+├─ / (redirect to /dashboard)
+│
+├─ /login (public)
+│
+├─ /dashboard (protected, AuthGuard)
+│   ├─ /overview (default)
+│   ├─ /analytics
+│   └─ /reports
+│
+├─ /products (protected, AuthGuard)
+│   ├─ /list (default)
+│   ├─ /detail/:id
+│   ├─ /create (admin only)
+│   └─ /edit/:id (admin only)
+│
+├─ /orders (protected, AuthGuard)
+│   ├─ /list (default)
+│   └─ /detail/:id
+│
+├─ /users (protected, AuthGuard + RoleGuard)
+│   ├─ /list (default)
+│   ├─ /create
+│   └─ /edit/:id
+│
+├─ /settings (protected, AuthGuard)
+│
+└─ /** (redirect to /dashboard)
+```
+
+### Bundle Size Planning
+```
+Initial Bundle: 180 KB (gzipped)
+- Core services
+- Layout components
+- Router
+
+Feature Bundles:
+- Dashboard: 45 KB
+- Products: 60 KB (data grid)
+- Orders: 35 KB
+- Users: 40 KB
+- Settings: 25 KB
+
+Total: ~385 KB (all features loaded)
+```
+
+## Best Practices
+
+When designing routes:
+- ✅ Keep URLs clean and RESTful
+- ✅ Use kebab-case for paths
+- ✅ Lazy load everything except critical path
+- ✅ Group related features
+- ✅ Plan for future features
+- ✅ Add breadcrumb data
+- ✅ Consider SEO (if applicable)
+- ✅ Handle 404s gracefully
+
+## Common Patterns
+
+### Nested Routes
+```typescript
+{
+  path: 'products',
+  component: ProductsLayoutComponent,
+  children: [
+    { path: '', component: ProductListComponent },
+    { path: ':id', component: ProductDetailComponent },
+    { path: ':id/edit', component: ProductEditComponent }
+  ]
+}
+```
+
+### Route Guards
+```typescript
+{
+  path: 'admin',
+  canActivate: [AuthGuard, AdminGuard],
+  canDeactivate: [UnsavedChangesGuard],
+  children: [...]
+}
+```
+
+### Route Data
+```typescript
+{
+  path: 'dashboard',
+  data: {
+    breadcrumb: 'Dashboard',
+    title: 'Dashboard - My App',
+    animation: 'DashboardPage'
+  }
+}
+```
+
+## Usage
+
+```bash
+# In Claude Code
+/angular-architecture:design-routes
+
+# Or natural language
+"Design routes for an e-commerce app with products, cart, checkout, and admin"
+"Use angular-architect to plan routing for a real estate listing platform"
+```
+
+## Deliverables
+
+After running this command, you'll have:
+1. Complete route structure documented
+2. Code for app.routes.ts
+3. Feature route files
+4. Guard implementations
+5. Performance plan
+6. Next implementation steps
+
+## Notes
+
+- Routes should tell a story of your app's features
+- Design for scalability (easy to add new features)
+- Consider analytics tracking in routing
+- Plan error handling routes (404, 403, 500)
--- a/commands/scaffold-project.md
+++ b/commands/scaffold-project.md
@@ -0,0 +1,142 @@
+---
+name: scaffold-project
+description: Generate complete Angular 17+ project structure with Router-First architecture, lazy loading, and enterprise patterns
+---
+
+Generate a production-ready Angular 17+ project structure following Router-First methodology.
+
+## What You'll Create
+
+A complete enterprise Angular project with:
+- ✅ Router-First architecture
+- ✅ Lazy-loaded feature modules
+- ✅ Core module (singletons)
+- ✅ Shared module (reusables)
+- ✅ TypeScript strict mode
+- ✅ Standalone components
+- ✅ Proper folder organization
+
+## Project Information Needed
+
+Ask the user for:
+1. **Project name** - kebab-case (e.g., `my-enterprise-app`)
+2. **Key features** - What features does the app need? (e.g., dashboard, users, reports)
+3. **Team size** - Small (2-5), Medium (5-20), Large (20+)
+4. **Authentication needed?** - Yes/No
+5. **Additional requirements** - Any special needs (GIS, real-time, offline)?
+
+## Generation Steps
+
+1. **Create root structure** with app.routes.ts, app.config.ts
+2. **Set up core module** with services, guards, interceptors
+3. **Create shared module** with common components
+4. **Generate feature modules** with lazy loading
+5. **Configure TypeScript** with strict mode
+6. **Set up routing** with guards and data
+7. **Add layout components** (header, sidebar, footer)
+8. **Generate example components** for each feature
+
+## Example Output Structure
+
+```
+src/app/
+├── core/
+│   ├── services/
+│   │   ├── auth.service.ts
+│   │   └── api.service.ts
+│   ├── guards/
+│   │   └── auth.guard.ts
+│   ├── interceptors/
+│   │   └── auth.interceptor.ts
+│   └── models/
+│       └── user.interface.ts
+│
+├── shared/
+│   ├── components/
+│   │   ├── loading-spinner/
+│   │   └── error-message/
+│   └── pipes/
+│       └── time-ago.pipe.ts
+│
+├── features/
+│   ├── dashboard/
+│   │   ├── components/
+│   │   ├── dashboard.routes.ts
+│   │   └── dashboard.component.ts
+│   └── users/
+│       ├── components/
+│       ├── users.routes.ts
+│       └── users.component.ts
+│
+├── layout/
+│   ├── header/
+│   ├── sidebar/
+│   └── main-layout.component.ts
+│
+├── app.routes.ts
+├── app.config.ts
+└── app.component.ts
+```
+
+## Configuration Files to Generate
+
+### tsconfig.json (strict mode)
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  }
+}
+```
+
+### angular.json (performance budgets)
+```json
+{
+  "budgets": [
+    {
+      "type": "initial",
+      "maximumWarning": "500kb",
+      "maximumError": "1mb"
+    }
+  ]
+}
+```
+
+## Best Practices to Include
+
+- All components use `standalone: true`
+- All routes use lazy loading except root
+- Separate files for templates/styles (no inline)
+- Guards use functional style (Angular 14+)
+- Services use `inject()` function
+- Components use signals for state
+
+## Output Format
+
+Provide:
+1. **Complete folder tree** showing all files
+2. **Key file contents** (app.routes.ts, core services, example components)
+3. **Installation commands** for dependencies
+4. **Next steps** for development
+5. **Architecture decision rationale** - Why this structure?
+
+## Usage
+
+```bash
+# In Claude Code
+/angular-architecture:scaffold-project
+
+# Or natural language
+"Use angular-architect to scaffold a new e-commerce project with 4 features"
+```
+
+## Notes
+
+- Adapt complexity based on team size
+- Small teams: simpler structure
+- Large teams: more abstraction and tooling
+- Always document architectural decisions in README