@atlashub/smartstack-cli 3.27.0 → 3.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlashub/smartstack-cli",
-  "version": "3.27.0",
+  "version": "3.28.0",
   "description": "SmartStack Claude Code automation toolkit - GitFlow, EF Core migrations, prompts and more",
   "author": {
     "name": "SmartStack",
@@ -112,6 +112,5 @@
     "typescript": "^5.3.3",
     "vitest": "^2.1.0"
   },
-  "optionalDependencies": {
-  }
+  "optionalDependencies": {}
 }

package/templates/skills/business-analyse/steps/step-05a-handoff.md

@@ -491,7 +491,7 @@ const seedDataCore = {
     ),
 
   navigationTranslations: master.modules.flatMap(m => {
-    const langs = ["fr", "en"];  // minimum required
+    const langs = ["fr", "en", "it", "de"];  // all supported languages
     return langs.map(lang => ({
       moduleCode: m.code,
       language: lang,

package/templates/skills/business-analyse/steps/step-05c-ralph-readiness.md

@@ -450,7 +450,7 @@ Handoff Completeness:
 For EACH module feature.json:
 
 1. Extract all i18n keys from specification.i18nKeys[]
-2. Verify each key has translations for: fr, en, nl, de
+2. Verify each key has translations for: fr, en, it, de
 3. Check for common missing patterns:
    ```
    - Entity names (singular + plural)
@@ -467,7 +467,7 @@ For EACH module feature.json:
 i18n Keys Validation:
   Module: Projects
     ✓ 42 keys defined
-    ✓ All keys have 4 languages (fr, en, nl, de)
+    ✓ All keys have 4 languages (fr, en, it, de)
     ✓ Entity keys complete
     ✓ Validation message keys complete
     ✓ Navigation keys complete

package/templates/skills/ralph-loop/references/category-rules.md

@@ -99,6 +99,18 @@ Execution sequence:
 - Missing translations (must have all 4 languages)
 - Seeding business entities WITHOUT `TenantId`
 
+### POST-CHECK: Navigation translations diacritical marks
+
+After generating `NavigationTranslationSeedEntry` strings, verify ALL non-English translations contain proper diacritical marks:
+
+- **FR** must use: é, è, ê, ë, à, â, ç, ù, û, ô, î (e.g., "Employés" NOT "Employes", "Activités" NOT "Activites")
+- **DE** must use: ä, ö, ü, ß (e.g., "Aktivitäten" NOT "Aktivitaten")
+- **IT** must use: à, è, é, ì, ò, ù (e.g., "Attività" NOT "Attivita")
+
+Cross-reference navigation seed data labels with the corresponding frontend `i18n/index.ts` translations for consistency.
+
+**BLOCKING** if any `NavigationTranslationSeedEntry` for fr/de/it contains only ASCII characters where diacritical marks are expected in the target language.
+
 ---
 
 ## Infrastructure — SQL Objects
@@ -305,12 +317,13 @@ fi
 **FORBIDDEN:** `src/pages/{Module}/` (flat structure without Context/App)
 
 **Execution sequence (IN ORDER):**
+0. **Read back feature.json** (via `prd.source.featurePath`) — The PRD only carries the file list (structural skeleton). The behavioral specs (columnDefs, componentMapping, layout, rowActions, emptyState, tab structure, i18n key-value pairs, dashboard KPIs, state machine transitions) are ONLY in the original feature.json. Without this step, generated code will be generic and miss entity-specific UI details.
 1. `mcp__smartstack__scaffold_api_client` → API client + types + React Query hook
 2. `mcp__smartstack__scaffold_routes` (with `outputFormat: "clientRoutes"`) → route registry + route fragments
 3. **Wire routes to App.tsx (detect pattern: `contextRoutes` array OR JSX `<Route>`):**
    - **Pattern A** (`contextRoutes: ContextRouteExtensions` in App.tsx): add to `contextRoutes.{context}[]` with RELATIVE paths → auto-injected into both standard + tenant trees
    - **Pattern B** (JSX `<Route>` in App.tsx): insert `<Route>` entries inside correct Layout wrapper (BOTH standard AND tenant-prefixed `/t/:slug/...` blocks)
-4. Create pages using **`/ui-components` skill** (MANDATORY for entity lists, grids, tables, dashboards, charts). The skill ensures CSS variables, EntityCard, SmartTable, loading/error/empty states, and responsive grid patterns.
+4. Create pages using **`/ui-components` skill** — **LOAD the skill step files before creating any page.** This is MANDATORY for entity lists, grids, tables, dashboards, charts. The skill ensures CSS variables, EntityCard, SmartTable, loading/error/empty states, and responsive grid patterns. **Pages MUST use `t()` from `useTranslation()` for ALL visible text from the very first line of code.** Do NOT hardcode English strings with the intent of adding i18n later — the i18n keys are created in step 6 based on what keys the pages reference. Pattern: `t('{moduleLower}:actions.create', 'Create')`.
 5. Create preferences hook: `use{Module}Preferences.ts`
 6. Generate i18n (4 languages: fr, en, it, de) — see I18n section below for detailed rules
 7. `npm run typecheck` MUST pass (BLOCKING)
@@ -323,6 +336,18 @@ fi
 - FK fields: `EntityLookup` for searchable entity selection (NEVER plain text for Guid FK)
 - Dashboard: `StatCard`, Recharts components
 
+**Per-page /ui-components validation (MANDATORY before commit):**
+- After creating EACH page, verify it follows /ui-components patterns:
+  1. List pages: uses `DataTable` or `SmartTable` (NOT raw `<table>`)
+  2. List pages: uses `EntityCard` for card/grid views (NOT custom `<div>` cards)
+  3. All pages: ALL colors use CSS variables (`bg-[var(--xxx)]`) — ZERO hardcoded Tailwind colors
+  4. All pages: loading skeleton, error state with retry, empty state are present
+  5. All pages: ALL visible text uses `t()` from `useTranslation()`
+  6. Delete actions: use `ConfirmDialog` component (NOT `window.confirm()`)
+  7. Status displays: use `StatusBadge` with CSS variable colors (NOT inline styled spans)
+- **If ANY check fails: fix the page BEFORE moving to the next page**
+- The POST-CHECKs in step-02 enforce these rules with BLOCKING severity
+
 **Form pages (CRITICAL — ZERO modals/popups/drawers):**
 - Create form: `EntityCreatePage.tsx` with route `/{module}/create`
 - Edit form: `EntityEditPage.tsx` with route `/{module}/:id/edit`
@@ -340,6 +365,15 @@ fi
 | `business.*` | `BusinessLayout` | `/business` |
 | `personal.*` | `UserLayout` | `/personal/myspace` |
 
+**Route naming convention (CRITICAL — must match backend):**
+- Frontend route paths MUST use **kebab-case** matching the backend API route convention
+- Convention: `HumanResources` (C# namespace) → `human-resources` (URL segment)
+- ALL multi-word route segments MUST contain hyphens: `time-management`, `human-resources`, `leave-balance`
+- FORBIDDEN: `humanresources`, `timemanagement`, `leavebalance` (concatenated without hyphens)
+- Frontend path `/business/human-resources/clients` matches API `api/business/human-resources/clients`
+- Navigation seed data Route values MUST also use kebab-case
+- The POST-CHECK in step-02 will BLOCK if frontend routes don't match backend kebab-case convention
+
 **CSS:** Variables ONLY → `bg-[var(--bg-card)]`, `text-[var(--text-primary)]`
 
 **Form error handling (MANDATORY):**
@@ -348,6 +382,13 @@ fi
 - API errors (4xx, 5xx) MUST show a user-friendly error notification (toast/banner)
 - Forms MUST preserve user input on error (no data loss on failed submit)
 
+**Hook error handling pattern (MANDATORY):**
+- ALL hooks MUST preserve server validation errors from axios responses
+- Pattern: `catch (err) { if (axios.isAxiosError(err)) { return err.response?.data; } throw err; }`
+- NEVER discard `err.response.data` — it contains field-level validation errors from FluentValidation
+- Error messages MUST use i18n: `setError(t('{mod}:errors.saveFailed'))` — NEVER hardcoded English strings
+- Toast/notification messages MUST also use i18n
+
 **Dependency verification (BLOCKING):**
 - BEFORE writing any import, verify the package exists in `package.json`
 - If package not present: run `npm install {package}` BEFORE writing the import
@@ -372,6 +413,13 @@ useXxx with raw axios inside hooks           → hooks MUST use the shared apiCl
 placeholder="Enter ID" / "Enter GUID"       → EntityLookup provides search-based entity selection
 <Modal>/<Dialog>/<Drawer>/<Popup> for forms  → forms are FULL PAGES with own URL routes (/create, /:id/edit)
 useState(showCreateModal/editDialog)         → navigate to form page, NEVER toggle modal visibility
+<table>/<thead>/<tbody>                    → MUST use SmartTable or DataTable component
+bg-blue-600 / bg-red-500 / etc.           → MUST use CSS variables: bg-[var(--color-accent-600)]
+text-green-700 / text-gray-500 / etc.     → MUST use CSS variables: text-[var(--success-text)]
+window.confirm() / confirm()              → MUST use ConfirmDialog component with i18n
+Hardcoded English text in JSX (>Create<)  → MUST use t('{mod}:actions.create', 'Create')
+Hardcoded error strings in hooks           → MUST use t('{mod}:errors.loadFailed') in all hooks
+/business/humanresources/                  → MUST use kebab-case: /business/human-resources/
 ```
 
 ---
@@ -399,11 +447,14 @@ useState(showCreateModal/editDialog)         → navigate to form page, NEVER to
 **Usage pattern in TSX:** `t('{moduleLower}:actions.create', 'Create')` — ALWAYS namespace prefix + fallback value.
 
 **Rules:**
-- 4 JSON files: fr, en, it, de — ALL mandatory (not just fr/en)
+- 4 JSON files per module: fr, en, it, de — ALL mandatory (not just fr/en)
+- File structure: `src/i18n/locales/{lang}/{moduleLower}.json` — NEVER inline translations in index.ts
 - Identical key structures across all languages — same keys, translated values
-- All UI labels, validation messages, button text, empty states
+- All UI labels, validation messages, button text, empty states, error messages
 - Depends on frontend page completion (pages define which keys are needed)
 - Add entity-specific keys under `labels`, `columns`, `form` for each entity field
+- **Hooks MUST also use i18n** — error messages like "Failed to load" MUST use `t('{mod}:errors.loadFailed')`
+- **FORBIDDEN:** Inline translation objects in `i18n/index.ts` — use separate JSON files per language per module
 - Reference `smartstack-frontend.md` for the complete template
 
 ---

package/templates/skills/ralph-loop/references/compact-loop.md

@@ -69,6 +69,7 @@ Batch: {batch.length} [{firstCategory}] → {batch.map(t => `[${t.id}] ${t.descr
 
 1. Mark `task.status = 'in_progress'`, `task.started_at = now`
 2. **Read `references/category-rules.md`** for category-specific rules
+2bis. **For frontend tasks:** Also read back the original **feature.json** (via `prd.source.featurePath`) to access wireframe `componentMapping`, `columnDefs`, `layout`, `emptyState`, `rowActions`, and `i18n` keys that the PRD does NOT carry forward. The PRD only has the file list — the behavioral spec is in feature.json.
 3. Implement the task following SmartStack conventions
 4. Track `files_created` and `files_modified`
 
@@ -110,7 +111,7 @@ Batch: {batch.length} [{firstCategory}] → {batch.map(t => `[${t.id}] ${t.descr
 |----------|--------|
 | `infrastructure` with `_migrationMeta` | Migration sequence: `suggest_migration` MCP → `dotnet ef migrations add` → cleanup corrupted artifacts (`for d in src/*/bin?Debug; do [ -d "$d" ] && rm -rf "$d"; done`) → `dotnet ef database update` → `dotnet build` |
 | `infrastructure` with seed data keywords | **MANDATORY:** Read `references/core-seed-data.md` → implement templates → `dotnet build` |
-| `frontend` | MCP-first: `scaffold_api_client` → `scaffold_routes` (outputFormat: clientRoutes) → **wire to App.tsx (detect pattern: `contextRoutes` array OR JSX `<Route>`)** → create pages → `npm run typecheck && npm run lint` |
+| `frontend` | MCP-first: `scaffold_api_client` → `scaffold_routes` (outputFormat: clientRoutes) → **wire to App.tsx** → **LOAD `/ui-components` skill** before creating ANY page → create pages using skill patterns (SmartTable, EntityCard, CSS variables, StatusBadge) → ALL visible text via `t()` from first line → `npm run typecheck && npm run lint` → **run frontend POST-CHECKs (section 3bis below)** |
 | `test` | **Create tests:** `scaffold_tests` MCP → **Run:** `dotnet test --verbosity normal` → **Fix loop:** if fail → fix SOURCE CODE → rebuild → retest → repeat until 100% pass |
 | `validation` | `dotnet clean && dotnet restore && dotnet build` → `dotnet test` (full) → `validate_conventions` MCP |
 
@@ -161,7 +162,112 @@ Batch: {batch.length} [{firstCategory}] → {batch.map(t => `[${t.id}] ${t.descr
    ```
    If FAIL → fix → re-check → loop until pass
 
-3bis. **Dependency audit (if frontend tasks in batch):**
+3bis. **Frontend POST-CHECKs (BLOCKING — if frontend tasks in batch):**
+
+   > **CRITICAL:** These checks enforce /ui-components compliance, i18n, and route conventions.
+   > Without them, generated code silently regresses to raw HTML tables, hardcoded colors, and English-only text.
+
+   ```bash
+   # Resolve paths dynamically (handles web/ prefix)
+   PAGE_DIR=$(find . -path "*/src/pages" -not -path "*/node_modules/*" -type d 2>/dev/null | head -1)
+   HOOK_DIR=$(find . -path "*/src/hooks" -not -path "*/node_modules/*" -type d 2>/dev/null | head -1)
+   COMP_DIR=$(find . -path "*/src/components" -not -path "*/node_modules/*" -type d 2>/dev/null | head -1)
+   WEB_SRC=$(find . -name "App.tsx" -not -path "*/node_modules/*" -exec dirname {} \; 2>/dev/null | head -1)
+
+   if [ -n "$PAGE_DIR" ]; then
+     # BLOCKING: No raw HTML <table> — MUST use SmartTable/DataTable
+     RAW_TABLES=$(grep -rPn '<table[\s>]|<thead[\s>]|<tbody[\s>]' "$PAGE_DIR" --include="*.tsx" 2>/dev/null)
+     if [ -n "$RAW_TABLES" ]; then
+       echo "BLOCKING: Raw HTML <table> detected — MUST use SmartTable or DataTable"
+       echo "$RAW_TABLES" | head -5
+       # FIX REQUIRED before commit
+     fi
+
+     # BLOCKING: No hardcoded Tailwind colors — MUST use CSS variables
+     HARDCODED_COLORS=$(grep -rPn '(?:bg|text|border|ring)-(?:red|blue|green|yellow|orange|purple|pink|indigo|teal|cyan|emerald|violet|fuchsia|rose|amber|lime|sky|slate|gray|zinc|neutral|stone)-\d{2,3}' "$PAGE_DIR" "$COMP_DIR" --include="*.tsx" 2>/dev/null | head -10)
+     if [ -n "$HARDCODED_COLORS" ]; then
+       echo "BLOCKING: Hardcoded Tailwind colors — MUST use CSS variables (bg-[var(--bg-secondary)])"
+       echo "$HARDCODED_COLORS" | head -5
+       # FIX REQUIRED before commit
+     fi
+
+     # BLOCKING: No window.confirm() — use ConfirmDialog component
+     BAD_CONFIRM=$(grep -rPn 'window\.confirm\s*\(' "$PAGE_DIR" --include="*.tsx" 2>/dev/null | grep -v '//')
+     if [ -n "$BAD_CONFIRM" ]; then
+       echo "BLOCKING: window.confirm() detected — use ConfirmDialog component with i18n"
+       echo "$BAD_CONFIRM"
+       # FIX REQUIRED before commit
+     fi
+
+     # BLOCKING: No hardcoded English UI text in JSX
+     HARDCODED_TEXT=$(grep -rPn '>\s*(Create|Edit|Delete|Save|Cancel|Search|Loading|Error|No .* found|Are you sure|Submit|Back|Actions|Status)\s*<' "$PAGE_DIR" --include="*.tsx" 2>/dev/null | grep -v test | grep -v '//' | head -10)
+     if [ -n "$HARDCODED_TEXT" ]; then
+       echo "BLOCKING: Hardcoded English text — ALL visible text MUST use t() from useTranslation()"
+       echo "$HARDCODED_TEXT" | head -5
+       # FIX REQUIRED before commit
+     fi
+
+     # BLOCKING: No modals/drawers for forms — forms are full pages
+     MODAL_IMPORTS=$(grep -rPn "import.*\b(Modal|Dialog|Drawer|Popup|Sheet)\b" "$PAGE_DIR" --include="*.tsx" 2>/dev/null)
+     if [ -n "$MODAL_IMPORTS" ]; then
+       echo "BLOCKING: Form modals/dialogs detected — forms MUST be full pages with own URL"
+       echo "$MODAL_IMPORTS"
+       # FIX REQUIRED before commit
+     fi
+   fi
+
+   if [ -n "$HOOK_DIR" ]; then
+     # BLOCKING: Hooks must use i18n for error messages
+     HARDCODED_ERRORS=$(grep -rPn "(setError|throw new Error)\(['\"][A-Z]" "$HOOK_DIR" --include="*.ts" --include="*.tsx" 2>/dev/null | grep -v "t(" | head -10)
+     if [ -n "$HARDCODED_ERRORS" ]; then
+       echo "BLOCKING: Hardcoded error messages in hooks — MUST use t('{mod}:errors.xxx')"
+       echo "$HARDCODED_ERRORS" | head -5
+       # FIX REQUIRED before commit
+     fi
+   fi
+
+   # BLOCKING: i18n file structure — 4 languages with module-specific JSON files
+   if [ -n "$WEB_SRC" ]; then
+     I18N_DIR="$WEB_SRC/i18n/locales"
+     if [ -d "$I18N_DIR" ]; then
+       for LANG in fr en it de; do
+         if [ ! -d "$I18N_DIR/$LANG" ]; then
+           echo "BLOCKING: Missing i18n locale directory: $I18N_DIR/$LANG"
+           # FIX REQUIRED before commit
+         fi
+         MODULE_JSONS=$(find "$I18N_DIR/$LANG" -name "*.json" ! -name "common.json" ! -name "navigation.json" 2>/dev/null)
+         if [ -z "$MODULE_JSONS" ]; then
+           echo "BLOCKING: No module translation files in $I18N_DIR/$LANG/"
+           # FIX REQUIRED before commit
+         fi
+       done
+     else
+       echo "BLOCKING: Missing i18n/locales directory"
+       # FIX REQUIRED before commit
+     fi
+   fi
+
+   # Cross-validate route conventions (frontend vs backend)
+   APP_TSX=$(find . -name "App.tsx" -not -path "*/node_modules/*" 2>/dev/null | head -1)
+   API_CONTROLLERS=$(find . -path "*/Controllers/*" -name "*Controller.cs" 2>/dev/null)
+   if [ -n "$APP_TSX" ] && [ -n "$API_CONTROLLERS" ]; then
+     API_SEGMENTS=$(grep -ohP '\[Route\("api/([^"]+)"\)\]' $API_CONTROLLERS | sed 's/\[Route("api\///;s/")\]//' | tr '/' '\n' | sort -u)
+     CLIENT_PATHS=$(grep -ohP "path:\s*['\"]([^'\"]+)['\"]" "$APP_TSX" | sed "s/path:\s*['\"]//;s/['\"]//" | sort -u)
+     for SEG in $API_SEGMENTS; do
+       if echo "$SEG" | grep -qP '[a-z]+-[a-z]+'; then
+         NO_HYPHEN=$(echo "$SEG" | tr -d '-')
+         if echo "$CLIENT_PATHS" | grep -q "$NO_HYPHEN"; then
+           echo "BLOCKING: Frontend uses '$NO_HYPHEN' but backend uses '$SEG' (kebab-case mismatch)"
+           # FIX REQUIRED before commit
+         fi
+       fi
+     done
+   fi
+   ```
+   If ANY POST-CHECK fails → fix the code → re-run ALL checks → loop until ALL pass.
+   **NEVER commit with failing POST-CHECKs.**
+
+3ter. **Dependency audit (if frontend tasks in batch):**
    ```bash
    cd {frontend_dir}
    npm ls --depth=0 2>&1 | grep "MISSING" && echo "FAIL: missing deps" && exit 1

package/templates/skills/ralph-loop/steps/step-02-execute.md

@@ -99,6 +99,20 @@ if [ -n "$UPPERCASE_ROUTES" ]; then
   echo "Fix: Use ToKebabCase() helper in route generation (see core-seed-data.md)"
   exit 1
 fi
+
+# Search for multi-word route segments missing hyphens (e.g., "humanresources" instead of "human-resources")
+MULTI_WORD_ROUTES=$(grep -oP 'Route\s*=\s*"([^"]+)"' Infrastructure/Persistence/Seeding/Data/*/NavigationSeedData.cs 2>/dev/null | grep -P '"[^"]*(?:human(?:resources|resource)|time(?:management|tracking)|project(?:management|member)|leave(?:balance|request))[^"]*"')
+
+if [ -n "$MULTI_WORD_ROUTES" ]; then
+  echo "❌ BLOCKING: Route segments contain concatenated multi-word names without hyphens"
+  echo "Found: $MULTI_WORD_ROUTES"
+  echo ""
+  echo "Convention: multi-word segments MUST use kebab-case"
+  echo "  humanresources → human-resources"
+  echo "  timemanagement → time-management"
+  echo "Fix: Apply ToKebabCase() to all route segments in NavigationSeedData"
+  exit 1
+fi
 ```
 
 **Why this matters:**
@@ -244,9 +258,22 @@ npm run lint         # ESLint — MUST exit 0
 If FAIL → read errors → fix TSX/TS files → re-run → loop until pass.
 
 **Frontend POST-CHECKs (BLOCKING for frontend category):**
+
+> **Path resolution:** Web projects may live in subdirectories (e.g., `web/app-web/src/pages/`).
+> All POST-CHECKs below use dynamic path discovery instead of hardcoded `src/pages/`.
+
+```bash
+# Resolve frontend directories dynamically (handles web/ prefix and varied project structures)
+PAGE_DIR=$(find . -path "*/src/pages" -not -path "*/node_modules/*" -type d 2>/dev/null | head -1)
+HOOK_DIR=$(find . -path "*/src/hooks" -not -path "*/node_modules/*" -type d 2>/dev/null | head -1)
+COMP_DIR=$(find . -path "*/src/components" -not -path "*/node_modules/*" -type d 2>/dev/null | head -1)
+WEB_SRC=$(find . -name "App.tsx" -not -path "*/node_modules/*" -exec dirname {} \; 2>/dev/null | head -1)
+# All POST-CHECKs below use $PAGE_DIR, $HOOK_DIR, $COMP_DIR, $WEB_SRC instead of hardcoded paths
+```
+
 ```bash
 # POST-CHECK: Forms must be full pages — ZERO modals/popups/drawers
-PAGE_FILES=$(find src/pages/ -name "*.tsx" 2>/dev/null)
+PAGE_FILES=$(find "$PAGE_DIR" -name "*.tsx" 2>/dev/null)
 if [ -n "$PAGE_FILES" ]; then
   MODAL_IMPORTS=$(grep -Pn "import.*(?:Modal|Dialog|Drawer|Popup|Sheet)" $PAGE_FILES 2>/dev/null)
   if [ -n "$MODAL_IMPORTS" ]; then
@@ -257,8 +284,92 @@ if [ -n "$PAGE_FILES" ]; then
   fi
 fi
 
+# POST-CHECK: No raw HTML <table> in page files — MUST use SmartTable/DataTable (BLOCKING)
+PAGE_FILES=$(find "$PAGE_DIR" -name "*.tsx" 2>/dev/null)
+if [ -n "$PAGE_FILES" ]; then
+  RAW_TABLES=$(grep -Pn '<table[\s>]|<thead[\s>]|<tbody[\s>]' $PAGE_FILES 2>/dev/null)
+  if [ -n "$RAW_TABLES" ]; then
+    echo "BLOCKING: Raw HTML <table> detected in page files — MUST use SmartTable or DataTable"
+    echo "SmartStack convention: Lists MUST use SmartTable + SmartFilter (see /ui-components skill)"
+    echo "Import: import { DataTable } from '@/components/ui/DataTable'"
+    echo ""
+    echo "Found:"
+    echo "$RAW_TABLES"
+    exit 1
+  fi
+fi
+
+# POST-CHECK: No hardcoded Tailwind colors — MUST use CSS variables (BLOCKING)
+PAGE_FILES=$(find "$PAGE_DIR" -name "*.tsx" -o -name "*.tsx" 2>/dev/null | sort -u)
+COMPONENT_FILES=$(find "$COMP_DIR" -name "*.tsx" 2>/dev/null)
+ALL_TSX="$PAGE_FILES $COMPONENT_FILES"
+if [ -n "$ALL_TSX" ]; then
+  # Match bg-{color}-{shade} or text-{color}-{shade} patterns (excluding bg-white, bg-black, bg-transparent, bg-current)
+  HARDCODED_COLORS=$(grep -Pn '(?:bg|text|border|ring|from|to|via)-(?:red|blue|green|yellow|orange|purple|pink|indigo|teal|cyan|emerald|violet|fuchsia|rose|amber|lime|sky|slate|gray|zinc|neutral|stone)-\d{2,3}' $ALL_TSX 2>/dev/null | head -20)
+  if [ -n "$HARDCODED_COLORS" ]; then
+    echo "BLOCKING: Hardcoded Tailwind colors detected — MUST use CSS variables"
+    echo "SmartStack convention: ALL colors via CSS variables for theming support"
+    echo "  bg-blue-600    → bg-[var(--color-accent-600)]"
+    echo "  text-red-500   → text-[var(--error-text)]"
+    echo "  bg-green-100   → bg-[var(--success-bg)]"
+    echo "  bg-gray-50     → bg-[var(--bg-secondary)]"
+    echo ""
+    echo "Found:"
+    echo "$HARDCODED_COLORS"
+    exit 1
+  fi
+fi
+
+# POST-CHECK: List pages must import SmartTable/DataTable OR EntityCard (WARNING)
+LIST_PAGES=$(find "$PAGE_DIR" -name "*ListPage.tsx" -o -name "*sPage.tsx" 2>/dev/null | grep -v test)
+if [ -n "$LIST_PAGES" ]; then
+  for LP in $LIST_PAGES; do
+    HAS_TABLE=$(grep -c 'SmartTable\|DataTable' "$LP" 2>/dev/null)
+    HAS_CARD=$(grep -c 'EntityCard' "$LP" 2>/dev/null)
+    if [ "$HAS_TABLE" -eq 0 ] && [ "$HAS_CARD" -eq 0 ]; then
+      echo "WARNING: List page missing SmartTable/DataTable or EntityCard: $LP"
+      echo "List pages MUST use SmartStack UI components from /ui-components skill"
+      echo "  Tables: import { DataTable } from '@/components/ui/DataTable'"
+      echo "  Cards:  import { EntityCard } from '@/components/ui/EntityCard'"
+    fi
+  done
+fi
+
+# POST-CHECK: No window.confirm() — MUST use confirmation component (BLOCKING)
+PAGE_FILES=$(find "$PAGE_DIR" -name "*.tsx" 2>/dev/null)
+if [ -n "$PAGE_FILES" ]; then
+  BAD_CONFIRM=$(grep -Pn 'window\.confirm\s*\(|(?<!\w)confirm\s*\(' $PAGE_FILES 2>/dev/null | grep -v '//' | grep -v test)
+  if [ -n "$BAD_CONFIRM" ]; then
+    echo "BLOCKING: window.confirm() detected — MUST use a SmartStack confirmation component"
+    echo "Native browser dialogs break theming and i18n"
+    echo "Use a ConfirmDialog component with translated messages"
+    echo ""
+    echo "Found:"
+    echo "$BAD_CONFIRM"
+    exit 1
+  fi
+fi
+
+# POST-CHECK: Pages must handle loading, error, and empty states (WARNING)
+PAGE_FILES=$(find "$PAGE_DIR" -name "*ListPage.tsx" -o -name "*sPage.tsx" 2>/dev/null | grep -v test)
+if [ -n "$PAGE_FILES" ]; then
+  for LP in $PAGE_FILES; do
+    HAS_LOADING=$(grep -c 'loading\|isLoading\|skeleton\|Skeleton\|PageLoader\|spinner' "$LP" 2>/dev/null)
+    HAS_ERROR=$(grep -c 'error\|Error' "$LP" 2>/dev/null)
+    HAS_EMPTY=$(grep -c 'empty\|Empty\|no.*found\|length === 0' "$LP" 2>/dev/null)
+    MISSING=""
+    [ "$HAS_LOADING" -eq 0 ] && MISSING="${MISSING}loading "
+    [ "$HAS_ERROR" -eq 0 ] && MISSING="${MISSING}error "
+    [ "$HAS_EMPTY" -eq 0 ] && MISSING="${MISSING}empty "
+    if [ -n "$MISSING" ]; then
+      echo "WARNING: List page missing state handling ($MISSING): $LP"
+      echo "All list pages MUST handle: loading skeleton, error with retry, empty state"
+    fi
+  done
+fi
+
 # POST-CHECK: Create/Edit pages must exist for each module with a list page
-LIST_PAGES=$(find src/pages/ -name "*ListPage.tsx" -o -name "*sPage.tsx" 2>/dev/null | grep -v test)
+LIST_PAGES=$(find "$PAGE_DIR" -name "*ListPage.tsx" -o -name "*sPage.tsx" 2>/dev/null | grep -v test)
 if [ -n "$LIST_PAGES" ]; then
   for LP in $LIST_PAGES; do
     DIR=$(dirname "$LP"); MOD=$(basename "$DIR")
@@ -272,9 +383,9 @@ if [ -n "$LIST_PAGES" ]; then
 fi
 
 # First check: at least one test file must exist in pages/
-PAGE_FILES=$(find src/pages/ -name "*.tsx" ! -name "*.test.tsx" 2>/dev/null)
+PAGE_FILES=$(find "$PAGE_DIR" -name "*.tsx" ! -name "*.test.tsx" 2>/dev/null)
 if [ -n "$PAGE_FILES" ]; then
-  TEST_FILES=$(find src/pages/ -name "*.test.tsx" 2>/dev/null)
+  TEST_FILES=$(find "$PAGE_DIR" -name "*.test.tsx" 2>/dev/null)
   if [ -z "$TEST_FILES" ]; then
     echo "BLOCKING: No frontend test files found in src/pages/"
     echo "Every module with pages MUST have at least one .test.tsx file"
@@ -283,7 +394,7 @@ if [ -n "$PAGE_FILES" ]; then
 fi
 
 # POST-CHECK: Form pages must have companion test files
-FORM_PAGES=$(find src/pages/ -name "*CreatePage.tsx" -o -name "*EditPage.tsx" 2>/dev/null | grep -v test)
+FORM_PAGES=$(find "$PAGE_DIR" -name "*CreatePage.tsx" -o -name "*EditPage.tsx" 2>/dev/null | grep -v test)
 if [ -n "$FORM_PAGES" ]; then
   for FP in $FORM_PAGES; do
     TEST="${FP%.tsx}.test.tsx"
@@ -295,7 +406,7 @@ if [ -n "$FORM_PAGES" ]; then
 fi
 
 # POST-CHECK: FK fields must NOT be plain text inputs — use EntityLookup
-FORM_PAGES=$(find src/pages/ -name "*CreatePage.tsx" -o -name "*EditPage.tsx" 2>/dev/null | grep -v test | grep -v node_modules)
+FORM_PAGES=$(find "$PAGE_DIR" -name "*CreatePage.tsx" -o -name "*EditPage.tsx" 2>/dev/null | grep -v test | grep -v node_modules)
 if [ -n "$FORM_PAGES" ]; then
   # Match any input with name ending in "Id" (except hidden inputs)
   FK_TEXT_INPUTS=$(grep -Pn '<input[^>]*name=["\x27][a-zA-Z]*Id["\x27]' $FORM_PAGES 2>/dev/null | grep -v 'type=["\x27]hidden["\x27]')
@@ -326,15 +437,34 @@ if [ -n "$CTRL_FILES" ]; then
   done
 fi
 
-# POST-CHECK: Route seed data vs frontend cross-validation
+# POST-CHECK: Route seed data vs frontend cross-validation (CONVENTION + EXISTENCE)
 SEED_NAV_FILES=$(find src/ -path "*/Seeding/Data/*" -name "*NavigationSeedData.cs" 2>/dev/null)
-APP_TSX=$(find src/ -name "App.tsx" -not -path "*/node_modules/*" 2>/dev/null | head -1)
+APP_TSX="$WEB_SRC/App.tsx"
 if [ -n "$SEED_NAV_FILES" ] && [ -n "$APP_TSX" ]; then
   SEED_ROUTES=$(grep -ohP 'Route\s*=\s*"([^"]+)"' $SEED_NAV_FILES | sed 's/Route\s*=\s*"//' | sed 's/"//' | sort -u)
   CLIENT_PATHS=$(grep -ohP "path:\s*['\"]([^'\"]+)['\"]" "$APP_TSX" | sed "s/path:\s*['\"]//;s/['\"]//" | sort -u)
   if [ -n "$SEED_ROUTES" ] && [ -z "$CLIENT_PATHS" ]; then
     echo "WARNING: Seed data has navigation routes but App.tsx has no client routes defined"
   fi
+  # Cross-check: frontend paths must use same kebab-case segments as backend API routes
+  API_CONTROLLERS=$(find src/ -path "*/Controllers/*" -name "*Controller.cs" 2>/dev/null)
+  if [ -n "$API_CONTROLLERS" ] && [ -n "$CLIENT_PATHS" ]; then
+    API_SEGMENTS=$(grep -ohP '\[Route\("api/([^"]+)"\)\]' $API_CONTROLLERS | sed 's/\[Route("api\///;s/")\]//' | tr '/' '\n' | sort -u)
+    for SEG in $API_SEGMENTS; do
+      # Check if frontend path contains same segment (kebab-case match)
+      if echo "$SEG" | grep -qP '[a-z]+-[a-z]+'; then
+        # Multi-word segment like "human-resources" — verify frontend uses same convention
+        NO_HYPHEN=$(echo "$SEG" | tr -d '-')
+        if echo "$CLIENT_PATHS" | grep -q "$NO_HYPHEN"; then
+          echo "BLOCKING: Frontend route uses '$NO_HYPHEN' but backend API uses '$SEG' (kebab-case)"
+          echo "Fix: Frontend paths MUST match backend route convention"
+          echo "  Backend: api/business/$SEG/..."
+          echo "  Frontend: /business/$SEG/... (NOT /business/$NO_HYPHEN/...)"
+          exit 1
+        fi
+      fi
+    done
+  fi
 fi
 
 # POST-CHECK: HasQueryFilter anti-pattern
@@ -359,20 +489,78 @@ if [ -n "$SERVICE_FILES" ]; then
   fi
 fi
 
-# POST-CHECK: i18n required key structure
-FR_I18N_FILES=$(find src/i18n/locales/fr/ -name "*.json" 2>/dev/null)
-if [ -n "$FR_I18N_FILES" ]; then
-  for f in $FR_I18N_FILES; do
+# POST-CHECK: i18n file structure — per-module JSON files MUST exist (BLOCKING)
+WEB_DIR=$(find . -name "App.tsx" -not -path "*/node_modules/*" -exec dirname {} \; 2>/dev/null | head -1)
+if [ -n "$WEB_DIR" ]; then
+  I18N_DIR="$WEB_DIR/i18n/locales"
+  if [ -d "$I18N_DIR" ]; then
+    for LANG in fr en it de; do
+      LANG_DIR="$I18N_DIR/$LANG"
+      if [ ! -d "$LANG_DIR" ]; then
+        echo "BLOCKING: Missing i18n locale directory: $LANG_DIR"
+        echo "All 4 languages (fr, en, it, de) MUST have a dedicated directory"
+        exit 1
+      fi
+      # Check for at least one module-specific JSON (not just common.json)
+      MODULE_JSONS=$(find "$LANG_DIR" -name "*.json" ! -name "common.json" ! -name "navigation.json" 2>/dev/null)
+      if [ -z "$MODULE_JSONS" ]; then
+        echo "BLOCKING: No module translation files in $LANG_DIR/"
+        echo "Each module MUST have src/i18n/locales/$LANG/{moduleLower}.json"
+        exit 1
+      fi
+    done
+  else
+    echo "BLOCKING: Missing i18n/locales directory — i18n file structure not created"
+    echo "Expected: src/i18n/locales/{fr,en,it,de}/{module}.json"
+    exit 1
+  fi
+fi
+
+# POST-CHECK: i18n required key structure (BLOCKING — upgraded from WARNING)
+if [ -d "$I18N_DIR/fr" ]; then
+  for f in $(find "$I18N_DIR/fr/" -name "*.json" 2>/dev/null); do
     BASENAME=$(basename "$f")
     case "$BASENAME" in common.json|navigation.json) continue;; esac
-    for KEY in "actions" "labels" "errors"; do
+    for KEY in "actions" "labels" "errors" "messages" "empty"; do
       if ! grep -q "\"$KEY\"" "$f"; then
-        echo "WARNING: i18n file missing required key '$KEY': $f"
+        echo "BLOCKING: i18n file missing required key group '$KEY': $f"
+        echo "All module i18n files MUST contain: actions, labels, errors, messages, empty"
+        exit 1
       fi
     done
   done
 fi
 
+# POST-CHECK: Pages must NOT contain hardcoded English UI text (BLOCKING)
+PAGE_FILES=$(find "$PAGE_DIR" -name "*.tsx" ! -name "*.test.tsx" 2>/dev/null)
+if [ -n "$PAGE_FILES" ]; then
+  # Detect common hardcoded English patterns in JSX (excluding imports/comments/code)
+  HARDCODED_TEXT=$(grep -Pn '>\s*(Create|Edit|Delete|Save|Cancel|Search|Loading|Error|No .* found|Are you sure|Submit|Back|Actions|Status|Name|Description|Total)\s*<' $PAGE_FILES 2>/dev/null | grep -v '//' | grep -v 'test' | head -20)
+  if [ -n "$HARDCODED_TEXT" ]; then
+    echo "BLOCKING: Hardcoded English UI text found in page files"
+    echo "ALL visible text MUST use t() from useTranslation() — NEVER hardcode strings"
+    echo "Pattern: t('{module}:actions.create', 'Create') — namespace + fallback"
+    echo ""
+    echo "Found:"
+    echo "$HARDCODED_TEXT"
+    exit 1
+  fi
+fi
+
+# POST-CHECK: Hooks must NOT contain hardcoded error messages (BLOCKING)
+HOOK_FILES=$(find "$HOOK_DIR" -name "*.ts" -o -name "*.tsx" 2>/dev/null)
+if [ -n "$HOOK_FILES" ]; then
+  HARDCODED_ERRORS=$(grep -Pn "(setError|throw new Error)\(['\"](?!t\()[A-Z][a-z]+" $HOOK_FILES 2>/dev/null | head -15)
+  if [ -n "$HARDCODED_ERRORS" ]; then
+    echo "BLOCKING: Hardcoded error messages in hooks — MUST use i18n t() function"
+    echo "Hooks must import useTranslation and use t('{module}:errors.loadFailed') for all messages"
+    echo ""
+    echo "Found:"
+    echo "$HARDCODED_ERRORS"
+    exit 1
+  fi
+fi
+
 # POST-CHECK: SeedConstants must NOT contain ContextId (pre-seeded by SmartStack core)
 SEED_CONST_FILES=$(find src/ -path "*/Seeding/*" -name "SeedConstants.cs" 2>/dev/null)
 if [ -n "$SEED_CONST_FILES" ]; then

package/templates/skills/ralph-loop/steps/step-03-commit.md

@@ -24,9 +24,9 @@ if [ "{current_task_category}" != "frontend" ] && [ "{current_task_category}" !=
   dotnet build --no-restore --verbosity quiet
 fi
 
-# Frontend: typecheck must pass
+# Frontend: typecheck + lint must pass
 if [ "{current_task_category}" = "frontend" ]; then
-  npm run typecheck
+  npm run typecheck && npm run lint
 fi
 
 # Tests: full suite if test project exists

package/templates/skills/ralph-loop/steps/step-04-check.md

@@ -80,7 +80,7 @@ fi
 
 ```javascript
 const presentCategories = new Set(prd.tasks.map(t => t.category));
-const REQUIRED_CATEGORIES = ['domain', 'infrastructure', 'application', 'api', 'frontend', 'test'];
+const REQUIRED_CATEGORIES = ['domain', 'infrastructure', 'application', 'api', 'seedData', 'frontend', 'test'];
 const missingFromPrd = REQUIRED_CATEGORIES.filter(c => !presentCategories.has(c));
 
 if (missingFromPrd.length > 0) {
@@ -90,6 +90,7 @@ if (missingFromPrd.length > 0) {
   let maxIdNum = Math.max(...prd.tasks.map(t => parseInt(t.id.replace(/[^0-9]/g, ''), 10) || 0));
   const prefix = prd.tasks[0]?.id?.replace(/[0-9]+$/, '') || 'GUARD-';
   const lastApiTask = prd.tasks.filter(t => t.category === 'api').pop()?.id;
+  const lastSeedDataTask = prd.tasks.filter(t => t.category === 'seedData').pop()?.id;
 
   for (const cat of missingFromPrd) {
     maxIdNum++;
@@ -98,7 +99,7 @@ if (missingFromPrd.length > 0) {
       id: taskId,
       description: `[GUARDRAIL] Generate missing ${cat} layer for ${prd.project?.module || 'module'}`,
       status: 'pending', category: cat,
-      dependencies: lastApiTask ? [lastApiTask] : [],
+      dependencies: lastSeedDataTask ? [lastSeedDataTask] : (lastApiTask ? [lastApiTask] : []),
       acceptance_criteria: [
         cat === 'frontend' ? 'React pages + routes wired to App.tsx (standard + tenant blocks)' :
         cat === 'test' ? 'Unit + integration test projects with passing dotnet test' :
@@ -179,7 +180,7 @@ if (fileExists(queuePath)) {
   // MODULE COMPLETENESS CHECK (lightweight — heavy check already done in section 1.7)
   // Verify all expected layers have completed tasks
   const completedCats = new Set(prd.tasks.filter(t => t.status === 'completed').map(t => t.category));
-  const expected = ['domain', 'infrastructure', 'application', 'api', 'frontend', 'test'];
+  const expected = ['domain', 'infrastructure', 'application', 'api', 'seedData', 'frontend', 'test'];
   const missing = expected.filter(c => !completedCats.has(c));
 
   if (missing.length > 0) {

package/templates/skills/ralph-loop/steps/step-05-report.md

@@ -70,7 +70,57 @@ if [ -d "$TEST_PROJECT" ]; then
 fi
 ```
 
-### 1e. Final DB Validation (if infrastructure/migration tasks were executed)
+### 1e. Frontend Quality Metrics (if frontend tasks were executed)
+
+```bash
+WEB_SRC=$(find . -name "App.tsx" -not -path "*/node_modules/*" -exec dirname {} \; 2>/dev/null | head -1)
+if [ -n "$WEB_SRC" ]; then
+  PAGE_DIR="$WEB_SRC/pages"
+  HOOK_DIR="$WEB_SRC/hooks"
+  COMP_DIR="$WEB_SRC/components"
+  I18N_DIR="$WEB_SRC/i18n/locales"
+
+  # Count metrics
+  PAGE_COUNT=$(find "$PAGE_DIR" -name "*.tsx" ! -name "*.test.tsx" 2>/dev/null | wc -l)
+  TEST_COUNT=$(find "$PAGE_DIR" -name "*.test.tsx" 2>/dev/null | wc -l)
+  HOOK_COUNT=$(find "$HOOK_DIR" -name "*.ts" -o -name "*.tsx" 2>/dev/null | wc -l)
+
+  # Quality checks
+  RAW_TABLES=$(grep -rl '<table[\s>]' "$PAGE_DIR" --include="*.tsx" 2>/dev/null | wc -l)
+  HARDCODED_COLORS=$(grep -rl '(?:bg|text|border)-(?:red|blue|green|gray|slate)-\d{2,3}' "$PAGE_DIR" "$COMP_DIR" --include="*.tsx" 2>/dev/null | wc -l)
+  CSS_VARS=$(grep -rl 'var(--' "$PAGE_DIR" "$COMP_DIR" --include="*.tsx" 2>/dev/null | wc -l)
+  WINDOW_CONFIRM=$(grep -rl 'window\.confirm' "$PAGE_DIR" --include="*.tsx" 2>/dev/null | wc -l)
+  HARDCODED_TEXT=$(grep -rl '>\s*\(Create\|Edit\|Delete\|Save\|Cancel\)\s*<' "$PAGE_DIR" --include="*.tsx" 2>/dev/null | wc -l)
+  USE_TRANSLATION=$(grep -rl 'useTranslation' "$PAGE_DIR" --include="*.tsx" 2>/dev/null | wc -l)
+  SMART_TABLE=$(grep -rl 'SmartTable\|DataTable' "$PAGE_DIR" --include="*.tsx" 2>/dev/null | wc -l)
+
+  # i18n coverage
+  I18N_LANGS=0
+  for LANG in fr en it de; do
+    [ -d "$I18N_DIR/$LANG" ] && I18N_LANGS=$((I18N_LANGS + 1))
+  done
+fi
+```
+
+Include frontend metrics in report section:
+```markdown
+## Frontend Quality
+| Metric | Value | Target |
+|--------|-------|--------|
+| Pages | {PAGE_COUNT} | — |
+| Tests | {TEST_COUNT} | ≥ {PAGE_COUNT/3} |
+| Hooks | {HOOK_COUNT} | — |
+| SmartTable/DataTable usage | {SMART_TABLE} files | All list pages |
+| Raw HTML tables | {RAW_TABLES} files | 0 |
+| CSS variable usage | {CSS_VARS} files | All TSX files |
+| Hardcoded colors | {HARDCODED_COLORS} files | 0 |
+| useTranslation() usage | {USE_TRANSLATION} files | All page files |
+| Hardcoded English text | {HARDCODED_TEXT} files | 0 |
+| window.confirm() usage | {WINDOW_CONFIRM} files | 0 |
+| i18n languages | {I18N_LANGS}/4 | 4 |
+```
+
+### 1f. Final DB Validation (if infrastructure/migration tasks were executed)
 
 ```bash
 INFRA_PROJECT=$(ls src/*Infrastructure*/*.csproj 2>/dev/null | head -1)