@atlashub/smartstack-cli 3.39.0 → 3.40.0

package/templates/skills/application/references/frontend-i18n-and-output.md

@@ -1,67 +1,67 @@
-# Frontend: i18n Structure & Output Formatting
-
-> Referenced from `steps/step-05-frontend.md` — i18n files and output presentation.
-
----
-
-## i18n Structure
-
-All i18n files must follow this structure:
-
-```
-locales/
-├── fr/
-│   └── {entityCode}.json
-├── en/
-│   └── {entityCode}.json
-├── it/
-│   └── {entityCode}.json
-└── de/
-    └── {entityCode}.json
-```
-
-**Note:** i18n files are auto-generated by `type: "page"` scaffold. Verify the 4 language files were created and customize the `title`/`subtitle` with proper labels.
-
-If customization needed:
-- `i18n/locales/fr/{entityCode}.json` → set `"title": "{labels.fr}"`
-- `i18n/locales/en/{entityCode}.json` → set `"title": "{labels.en}"`
-- `i18n/locales/it/{entityCode}.json` → set `"title": "{labels.it}"`
-- `i18n/locales/de/{entityCode}.json` → set `"title": "{labels.de}"`
-
----
-
-## Presenting Output to User
-
-Display generated frontend code organized by category:
-
-### Pages
-- `pages/{application}/{module}/{EntityName}Page.tsx`
-- `pages/{application}/{module}/{EntityName}ListView.tsx`
-
-### Components
-- `components/{application}/{module}/{EntityName}.tsx`
-- `hooks/use{EntityName}.ts`
-
-### API Client
-- `services/api/{entityCode}Api.ts`
-- `types/{entityName}.types.ts`
-
-### Routes
-- Updated `navRoutes.generated.ts`
-- Generated `clientRoutes.generated.tsx`
-- Wired routes in `App.tsx` (standard + tenant blocks)
-
-### i18n
-- `locales/fr/{entityCode}.json`
-- `locales/en/{entityCode}.json`
-- `locales/it/{entityCode}.json`
-- `locales/de/{entityCode}.json`
-
-### Route Configuration Example
-```tsx
-// In routes.tsx - NESTED routes (not flat!)
-<Route path="{application_kebab}">
-  <Route index element={<Navigate to="{module_kebab}" replace />} />
-  <Route path="{module_kebab}" element={<{EntityName}Page />} />
-</Route>
-```
+# Frontend: i18n Structure & Output Formatting
+
+> Referenced from `steps/step-05-frontend.md` — i18n files and output presentation.
+
+---
+
+## i18n Structure
+
+All i18n files must follow this structure:
+
+```
+locales/
+├── fr/
+│   └── {entityCode}.json
+├── en/
+│   └── {entityCode}.json
+├── it/
+│   └── {entityCode}.json
+└── de/
+    └── {entityCode}.json
+```
+
+**Note:** i18n files are auto-generated by `type: "page"` scaffold. Verify the 4 language files were created and customize the `title`/`subtitle` with proper labels.
+
+If customization needed:
+- `i18n/locales/fr/{entityCode}.json` → set `"title": "{labels.fr}"`
+- `i18n/locales/en/{entityCode}.json` → set `"title": "{labels.en}"`
+- `i18n/locales/it/{entityCode}.json` → set `"title": "{labels.it}"`
+- `i18n/locales/de/{entityCode}.json` → set `"title": "{labels.de}"`
+
+---
+
+## Presenting Output to User
+
+Display generated frontend code organized by category:
+
+### Pages
+- `pages/{application}/{module}/{EntityName}Page.tsx`
+- `pages/{application}/{module}/{EntityName}ListView.tsx`
+
+### Components
+- `components/{application}/{module}/{EntityName}.tsx`
+- `hooks/use{EntityName}.ts`
+
+### API Client
+- `services/api/{entityCode}Api.ts`
+- `types/{entityName}.types.ts`
+
+### Routes
+- Updated `navRoutes.generated.ts`
+- Generated `clientRoutes.generated.tsx`
+- Wired routes in `App.tsx` (standard + tenant blocks)
+
+### i18n
+- `locales/fr/{entityCode}.json`
+- `locales/en/{entityCode}.json`
+- `locales/it/{entityCode}.json`
+- `locales/de/{entityCode}.json`
+
+### Route Configuration Example
+```tsx
+// In routes.tsx - NESTED routes (not flat!)
+<Route path="{application_kebab}">
+  <Route index element={<Navigate to="{module_kebab}" replace />} />
+  <Route path="{module_kebab}" element={<{EntityName}Page />} />
+</Route>
+```

package/templates/skills/application/references/frontend-route-naming.md

@@ -1,117 +1,117 @@
-# Frontend: Route Naming & Kebab-Case Requirements
-
-> Referenced from `steps/step-05-frontend.md` — Route path conventions and naming rules.
-
----
-
-## Route Naming Rule (BLOCKING)
-
-All route paths MUST use **kebab-case** to match navigation seed data exactly.
-
-**Transformation:** `PascalCase` → `kebab-case`
-
-Examples:
-- `HumanResources` → `human-resources`
-- `Employees` → `employees`
-- `TimeManagement` → `time-management`
-- `OrderItems` → `order-items`
-
----
-
-## Forbidden Patterns
-
-| Pattern | Issue |
-|---------|-------|
-| `humanresources` | Concatenated words without hyphens |
-| `timemanagement` | Missing hyphens in multi-word names |
-| `mymodule` | Ambiguous (is this "my-module" or literal "mymodule"?) |
-
----
-
-## Required Patterns
-
-| Pattern | Correct Usage |
-|---------|---------------|
-| `human-resources` | Multi-word segment with proper hyphens |
-| `time-management` | Proper kebab-case |
-| `employees` | Single-word segments stay lowercase |
-| `products` | Single-word segments stay lowercase |
-
----
-
-## Verification
-
-Route paths MUST match the navigation seed data routes (which use `ToKebabCase()`).
-
-**Example verification:**
-
-Navigation seed data:
-```csharp
-Route = "/human-resources/time-management"  // From ToKebabCase()
-```
-
-App.tsx routes must use:
-```tsx
-const applicationRoutes: ApplicationRouteExtensions = {
-  'human-resources': [  // ← kebab-case
-    { path: 'time-management', element: <TimeManagementPage /> },  // ← kebab-case
-  ],
-};
-```
-
----
-
-## Kebab-Case Conversion Rules
-
-| Input | Output | Rule |
-|-------|--------|------|
-| `ProductCode` | `product-code` | Insert `-` before uppercase letters |
-| `Product` | `product` | Lowercase single words |
-| `IDs` | `ids` | Lowercase acronyms |
-| `HTTPSConnection` | `https-connection` | Insert `-` before each uppercase cluster transition |
-| `CamelCaseExample` | `camel-case-example` | Insert `-` at each camelCase boundary |
-
----
-
-## Implementation Pattern
-
-When generating routes, apply kebab-case to all multi-word segments:
-
-```tsx
-// CORRECT
-<Route path="/human-resources" element={<HRLayout />}>
-  <Route path="employees" element={<EmployeesPage />} />
-  <Route path="time-management" element={<TimeManagementPage />} />
-</Route>
-
-// FORBIDDEN
-<Route path="/humanresources" element={<HRLayout />} />
-<Route path="/HR" element={<HRLayout />} />
-<Route path="/human_resources" element={<HRLayout />} />
-```
-
----
-
-## Cross-Reference with Navigation Seeds
-
-Before finalizing route paths, verify they match navigation seeds:
-
-**Step 1:** Extract application code from `{full_path}` (e.g., `human-resources.time-management` → app: `human-resources`)
-
-**Step 2:** Check existing navigation seeds:
-```bash
-Glob: **/Seeding/Data/Navigation/NavigationApplicationSeedData.cs
-Search for: Route = "/{application_kebab}"
-```
-
-**Step 3:** Ensure App.tsx routes use the exact same kebab-case format.
-
----
-
-## Validation Checklist
-
-- [ ] All multi-word segments use hyphens (kebab-case)
-- [ ] Single-word segments are lowercase
-- [ ] Route paths match navigation seed data routes
-- [ ] No uppercase letters in route paths
-- [ ] No underscores (`_`) or camelCase in paths
+# Frontend: Route Naming & Kebab-Case Requirements
+
+> Referenced from `steps/step-05-frontend.md` — Route path conventions and naming rules.
+
+---
+
+## Route Naming Rule (BLOCKING)
+
+All route paths MUST use **kebab-case** to match navigation seed data exactly.
+
+**Transformation:** `PascalCase` → `kebab-case`
+
+Examples:
+- `HumanResources` → `human-resources`
+- `Employees` → `employees`
+- `TimeManagement` → `time-management`
+- `OrderItems` → `order-items`
+
+---
+
+## Forbidden Patterns
+
+| Pattern | Issue |
+|---------|-------|
+| `humanresources` | Concatenated words without hyphens |
+| `timemanagement` | Missing hyphens in multi-word names |
+| `mymodule` | Ambiguous (is this "my-module" or literal "mymodule"?) |
+
+---
+
+## Required Patterns
+
+| Pattern | Correct Usage |
+|---------|---------------|
+| `human-resources` | Multi-word segment with proper hyphens |
+| `time-management` | Proper kebab-case |
+| `employees` | Single-word segments stay lowercase |
+| `products` | Single-word segments stay lowercase |
+
+---
+
+## Verification
+
+Route paths MUST match the navigation seed data routes (which use `ToKebabCase()`).
+
+**Example verification:**
+
+Navigation seed data:
+```csharp
+Route = "/human-resources/time-management"  // From ToKebabCase()
+```
+
+App.tsx routes must use:
+```tsx
+const applicationRoutes: ApplicationRouteExtensions = {
+  'human-resources': [  // ← kebab-case
+    { path: 'time-management', element: <TimeManagementPage /> },  // ← kebab-case
+  ],
+};
+```
+
+---
+
+## Kebab-Case Conversion Rules
+
+| Input | Output | Rule |
+|-------|--------|------|
+| `ProductCode` | `product-code` | Insert `-` before uppercase letters |
+| `Product` | `product` | Lowercase single words |
+| `IDs` | `ids` | Lowercase acronyms |
+| `HTTPSConnection` | `https-connection` | Insert `-` before each uppercase cluster transition |
+| `CamelCaseExample` | `camel-case-example` | Insert `-` at each camelCase boundary |
+
+---
+
+## Implementation Pattern
+
+When generating routes, apply kebab-case to all multi-word segments:
+
+```tsx
+// CORRECT
+<Route path="/human-resources" element={<HRLayout />}>
+  <Route path="employees" element={<EmployeesPage />} />
+  <Route path="time-management" element={<TimeManagementPage />} />
+</Route>
+
+// FORBIDDEN
+<Route path="/humanresources" element={<HRLayout />} />
+<Route path="/HR" element={<HRLayout />} />
+<Route path="/human_resources" element={<HRLayout />} />
+```
+
+---
+
+## Cross-Reference with Navigation Seeds
+
+Before finalizing route paths, verify they match navigation seeds:
+
+**Step 1:** Extract application code from `{full_path}` (e.g., `human-resources.time-management` → app: `human-resources`)
+
+**Step 2:** Check existing navigation seeds:
+```bash
+Glob: **/Seeding/Data/Navigation/NavigationApplicationSeedData.cs
+Search for: Route = "/{application_kebab}"
+```
+
+**Step 3:** Ensure App.tsx routes use the exact same kebab-case format.
+
+---
+
+## Validation Checklist
+
+- [ ] All multi-word segments use hyphens (kebab-case)
+- [ ] Single-word segments are lowercase
+- [ ] Route paths match navigation seed data routes
+- [ ] No uppercase letters in route paths
+- [ ] No underscores (`_`) or camelCase in paths

package/templates/skills/application/references/frontend-route-wiring-app-tsx.md

@@ -1,107 +1,107 @@
-# Frontend: Route Wiring in App.tsx
-
-> Referenced from `steps/step-05-frontend.md` — Detailed route wiring patterns and verification.
-
----
-
-## Step 4: Wire Routes to App.tsx (BLOCKING)
-
-**CRITICAL:** This step is MANDATORY. Without it, routes exist as files but are invisible to the React Router. The page will be BLANK.
-
-After `scaffold_routes` generates the route files, you MUST manually insert the routes into `App.tsx`.
-
----
-
-## Step 4a: Import Page Components
-
-At the top of App.tsx:
-
-```tsx
-import { {EntityName}Page } from '@/pages/{Application}/{Module}/{EntityName}Page';
-// Or lazy-loaded:
-const {EntityName}Page = lazy(() => import('@/pages/{Application}/{Module}/{EntityName}Page'));
-```
-
----
-
-## Step 4b: Detect App.tsx Routing Pattern
-
-Read App.tsx and detect which pattern is used:
-
-### Pattern A: applicationRoutes Object
-
-**If App.tsx contains:** `applicationRoutes: ApplicationRouteExtensions`
-
-→ Add routes to `applicationRoutes.{application}[]` with **RELATIVE** paths (no leading `/`)
-
-```tsx
-const applicationRoutes: ApplicationRouteExtensions = {
-  'human-resources': [
-    // existing routes...
-    { path: '{module_kebab}', element: <{EntityName}ListPage /> },
-    { path: '{module_kebab}/new', element: <Create{EntityName}Page /> },
-    { path: '{module_kebab}/:id', element: <{EntityName}DetailPage /> },
-    { path: '{module_kebab}/:id/edit', element: <Create{EntityName}Page /> },
-  ],
-};
-```
-
-Routes are automatically injected into BOTH standard (`/{application}/...`) and tenant-prefixed (`/t/:slug/{application}/...`) route trees by `mergeRoutes()`. No manual duplication needed.
-
-### Pattern B: JSX Routes
-
-**If App.tsx contains:** `<Route path="/{application}" element={<{Layout} />}>`
-
-→ Insert `<Route>` children inside the Layout wrapper:
-
-```tsx
-<Route path="/human-resources" element={<AppLayout />}>
-  {/* ... existing routes ... */}
-  <Route path="{module_kebab}" element={<{EntityName}Page />} />
-</Route>
-```
-
-**ALSO add the same routes inside the tenant-prefixed block:**
-
-Find `<Route path="/t/:slug">` and add the **same route entries** there.
-
----
-
-## Step 4c: Application-to-Layout Mapping
-
-| Application prefix | Layout Component | Route path |
-|---------|------------------|------------|
-| `administration.*` | `AppLayout` | `/administration` |
-| `*` (business apps) | `AppLayout` | `/{application}` |
-| `myspace.*` | `AppLayout` | `/myspace` |
-
----
-
-## Step 4d: Verify Wiring
-
-```
-Tool: mcp__smartstack__validate_frontend_routes
-Args:
-  scope: "routes"
-```
-
-If `appWiring.issues` is not empty, fix the wiring before proceeding.
-
----
-
-## Forbidden Patterns (BOTH patterns)
-
-- Adding application routes to `clientRoutes[]` with absolute paths — `clientRoutes` is ONLY for routes outside SmartStack applications (e.g., `/about`, `/pricing`)
-- Adding routes OUTSIDE the Layout wrapper (shell will not render)
-- Using `createBrowserRouter` (SmartStack uses `useRoutes()` + `mergeRoutes()`)
-
----
-
-## Verification Checklist
-
-- [ ] Routes are inside the AppLayout wrapper
-- [ ] Routes use NESTED structure (not flat)
-- [ ] Application kebab-case matches navigation seed data
-- [ ] Both standard and tenant-prefixed blocks have routes (if using Pattern B)
-- [ ] Page components are imported at top of App.tsx
-- [ ] `mcp__smartstack__validate_frontend_routes` returns no issues
+# Frontend: Route Wiring in App.tsx
+
+> Referenced from `steps/step-05-frontend.md` — Detailed route wiring patterns and verification.
+
+---
+
+## Step 4: Wire Routes to App.tsx (BLOCKING)
+
+**CRITICAL:** This step is MANDATORY. Without it, routes exist as files but are invisible to the React Router. The page will be BLANK.
+
+After `scaffold_routes` generates the route files, you MUST manually insert the routes into `App.tsx`.
+
+---
+
+## Step 4a: Import Page Components
+
+At the top of App.tsx:
+
+```tsx
+import { {EntityName}Page } from '@/pages/{Application}/{Module}/{EntityName}Page';
+// Or lazy-loaded:
+const {EntityName}Page = lazy(() => import('@/pages/{Application}/{Module}/{EntityName}Page'));
+```
+
+---
+
+## Step 4b: Detect App.tsx Routing Pattern
+
+Read App.tsx and detect which pattern is used:
+
+### Pattern A: applicationRoutes Object
+
+**If App.tsx contains:** `applicationRoutes: ApplicationRouteExtensions`
+
+→ Add routes to `applicationRoutes.{application}[]` with **RELATIVE** paths (no leading `/`)
+
+```tsx
+const applicationRoutes: ApplicationRouteExtensions = {
+  'human-resources': [
+    // existing routes...
+    { path: '{module_kebab}', element: <{EntityName}ListPage /> },
+    { path: '{module_kebab}/new', element: <Create{EntityName}Page /> },
+    { path: '{module_kebab}/:id', element: <{EntityName}DetailPage /> },
+    { path: '{module_kebab}/:id/edit', element: <Create{EntityName}Page /> },
+  ],
+};
+```
+
+Routes are automatically injected into BOTH standard (`/{application}/...`) and tenant-prefixed (`/t/:slug/{application}/...`) route trees by `mergeRoutes()`. No manual duplication needed.
+
+### Pattern B: JSX Routes
+
+**If App.tsx contains:** `<Route path="/{application}" element={<{Layout} />}>`
+
+→ Insert `<Route>` children inside the Layout wrapper:
+
+```tsx
+<Route path="/human-resources" element={<AppLayout />}>
+  {/* ... existing routes ... */}
+  <Route path="{module_kebab}" element={<{EntityName}Page />} />
+</Route>
+```
+
+**ALSO add the same routes inside the tenant-prefixed block:**
+
+Find `<Route path="/t/:slug">` and add the **same route entries** there.
+
+---
+
+## Step 4c: Application-to-Layout Mapping
+
+| Application prefix | Layout Component | Route path |
+|---------|------------------|------------|
+| `administration.*` | `AppLayout` | `/administration` |
+| `*` (business apps) | `AppLayout` | `/{application}` |
+| `myspace.*` | `AppLayout` | `/myspace` |
+
+---
+
+## Step 4d: Verify Wiring
+
+```
+Tool: mcp__smartstack__validate_frontend_routes
+Args:
+  scope: "routes"
+```
+
+If `appWiring.issues` is not empty, fix the wiring before proceeding.
+
+---
+
+## Forbidden Patterns (BOTH patterns)
+
+- Adding application routes to `clientRoutes[]` with absolute paths — `clientRoutes` is ONLY for routes outside SmartStack applications (e.g., `/about`, `/pricing`)
+- Adding routes OUTSIDE the Layout wrapper (shell will not render)
+- Using `createBrowserRouter` (SmartStack uses `useRoutes()` + `mergeRoutes()`)
+
+---
+
+## Verification Checklist
+
+- [ ] Routes are inside the AppLayout wrapper
+- [ ] Routes use NESTED structure (not flat)
+- [ ] Application kebab-case matches navigation seed data
+- [ ] Both standard and tenant-prefixed blocks have routes (if using Pattern B)
+- [ ] Page components are imported at top of App.tsx
+- [ ] `mcp__smartstack__validate_frontend_routes` returns no issues