@atlashub/smartstack-cli 3.7.0 → 3.9.0

package/templates/skills/business-analyse/references/init-schema-deployment.md

@@ -0,0 +1,65 @@
+# Init: JSON Schema Deployment
+
+> Reference for step-00-init.md — cache-based schema deployment.
+
+## Cache-Based Deployment Logic
+
+### Step 1: Check Deployment Cache
+
+Cache file location: `docs/business/{app}/business-analyse/.schema-cache.json`
+
+```
+IF EXISTS .schema-cache.json:
+  Read cache file
+  IF cache.version == "{CLI_VERSION}" (from package.json):
+    Display: "Schemas already deployed ({CLI_VERSION}) - skipping"
+    SKIP deployment → Go to Step 9
+  ELSE:
+    Display: "Schema version mismatch (cache: {cache.version}, current: {CLI_VERSION})"
+    Proceed to deployment
+ELSE:
+  Display: "Deploying schemas (first time)..."
+  Proceed to deployment
+```
+
+### Step 2: Deploy Schemas (if needed)
+
+Source: `schemas/` (relative to skill root = `~/.claude/skills/business-analyse/schemas/`)
+Destination: `docs/business/{app}/business-analyse/schemas/`
+
+```
+docs/business/{app}/business-analyse/schemas/
+├── feature-schema.json
+├── application-schema.json
+├── sections/
+│   ├── metadata-schema.json
+│   ├── discovery-schema.json
+│   ├── analysis-schema.json
+│   ├── specification-schema.json
+│   ├── validation-schema.json
+│   └── handoff-schema.json
+└── shared/
+    └── common-defs.json
+```
+
+**Total: 9 files to deploy.**
+
+### Step 3: Write Cache File
+
+```json
+{
+  "version": "{CLI_VERSION}",
+  "deployedAt": "{ISO timestamp}",
+  "schemas": [
+    "feature-schema.json",
+    "application-schema.json",
+    "sections/metadata-schema.json",
+    "sections/discovery-schema.json",
+    "sections/analysis-schema.json",
+    "sections/specification-schema.json",
+    "sections/validation-schema.json",
+    "sections/handoff-schema.json",
+    "shared/common-defs.json"
+  ]
+}
+```

package/templates/skills/business-analyse/references/review-data-mapping.md

@@ -0,0 +1,363 @@
+# Review Data Mapping Reference (references/review-data-mapping.md)
+
+> **Used by:** step-06-review (Apply Review Corrections)
+> **Purpose:** Reverse mapping from ba-review.json (HTML export) back to feature.json format
+> **Complement of:** `references/html-data-mapping.md` (forward mapping)
+
+---
+
+## Overview
+
+The ba-review.json is exported from the interactive HTML with the same structure as the HTML data model. This document defines the **reverse transformation** to apply corrections back into feature.json format.
+
+---
+
+## Cadrage Reverse Mapping
+
+### Scope (HTML → feature.json)
+
+```javascript
+// HTML format: { vital: [{name, description}], important: [...], optional: [...], excluded: [...] }
+// feature.json format: { mustHave: [string], shouldHave: [string], couldHave: [string], outOfScope: [string] }
+
+reverseScope(reviewCadrage) {
+  return {
+    mustHave: (reviewCadrage.scope?.vital || []).map(s => s.name),
+    shouldHave: (reviewCadrage.scope?.important || []).map(s => s.name),
+    couldHave: (reviewCadrage.scope?.optional || []).map(s => s.name),
+    outOfScope: (reviewCadrage.scope?.excluded || []).map(s => s.name)
+  };
+}
+```
+
+### Stakeholders (HTML → feature.json)
+
+```javascript
+// HTML format: { role, function, tasks[], frequency, access, frustrations }
+// feature.json format: { role, function, involvement, tasks[], frequency, painPoints[] }
+
+const accessToInvolvement = {
+  admin: "decision-maker",
+  manager: "consulted",
+  contributor: "end-user",
+  viewer: "informed"
+};
+
+const frequencyReverse = {
+  daily: "Quotidien",
+  weekly: "Hebdomadaire",
+  monthly: "Mensuel",
+  occasional: "Occasionnel"
+};
+
+reverseStakeholder(htmlStakeholder) {
+  return {
+    role: htmlStakeholder.role,
+    function: htmlStakeholder.function || "",
+    involvement: accessToInvolvement[htmlStakeholder.access] || "end-user",
+    tasks: htmlStakeholder.tasks || [],
+    frequency: frequencyReverse[htmlStakeholder.frequency] || htmlStakeholder.frequency,
+    painPoints: (htmlStakeholder.frustrations || "").split("\n").filter(Boolean)
+  };
+}
+```
+
+### Problem / Vision / Current (HTML → feature.json)
+
+```javascript
+// HTML has detailed sub-fields; feature.json has flat strings
+reverseProblemVision(reviewCadrage) {
+  return {
+    problem: reviewCadrage.problem?.description || "",
+    trigger: reviewCadrage.problem?.trigger || "",
+    asIs: reviewCadrage.current?.tools || "",
+    toBe: reviewCadrage.vision?.changes || ""
+  };
+}
+```
+
+### Risks (HTML → feature.json)
+
+```javascript
+// HTML format: { description, probability, impact, mitigation }
+// feature.json format: { id, type, description, probability, impact, mitigation }
+
+reverseRisks(reviewRisks, existingRisks) {
+  return (reviewRisks || []).map((r, i) => {
+    // Try to match with existing risk by description
+    const existing = (existingRisks || []).find(er => er.description === r.description);
+    return {
+      id: existing?.id || "RISK-" + String(i + 1).padStart(3, "0"),
+      type: existing?.type || "business",
+      description: r.description,
+      probability: r.probability,
+      impact: r.impact,
+      mitigation: r.mitigation || ""
+    };
+  });
+}
+```
+
+### Acceptance Criteria (HTML → feature.json)
+
+```javascript
+// HTML format: success.definition (string, one criterion per line)
+// feature.json format: acceptanceCriteria[]: { id, criterion, validated }
+
+reverseAcceptanceCriteria(reviewSuccess, existingCriteria) {
+  const lines = (reviewSuccess?.definition || "").split("\n").filter(Boolean);
+  return lines.map((line, i) => {
+    const existing = (existingCriteria || []).find(ac => ac.criterion === line);
+    return {
+      id: existing?.id || "AC-" + String(i + 1).padStart(3, "0"),
+      criterion: line.trim(),
+      validated: existing?.validated || false
+    };
+  });
+}
+```
+
+---
+
+## Module Specifications Reverse Mapping
+
+### Use Cases (HTML → feature.json)
+
+```javascript
+// HTML format: { id, name, actor, steps (newline-separated string), alternative (string) }
+// feature.json format: { id, name, primaryActor, permission, preconditions[], postconditions[], mainScenario[], alternativeScenarios[], linkedRules[] }
+
+reverseUseCase(htmlUC, existingUC) {
+  return {
+    id: htmlUC.id || existingUC?.id,
+    name: htmlUC.name,
+    primaryActor: htmlUC.actor,
+    permission: existingUC?.permission || "",
+    preconditions: existingUC?.preconditions || [],
+    postconditions: existingUC?.postconditions || [],
+    mainScenario: (htmlUC.steps || "").split("\n").filter(Boolean),
+    alternativeScenarios: existingUC?.alternativeScenarios || [],
+    errorScenarios: existingUC?.errorScenarios || [],
+    linkedRules: existingUC?.linkedRules || []
+  };
+}
+```
+
+### Business Rules (HTML → feature.json)
+
+```javascript
+// HTML format: { id, name, category, statement, example (string) }
+// feature.json format: { id, name, category, statement, priority, conditions[], examples[], testability }
+
+reverseBusinessRule(htmlBR, existingBR) {
+  return {
+    id: htmlBR.id || existingBR?.id,
+    name: htmlBR.name,
+    category: htmlBR.category,
+    statement: htmlBR.statement,
+    priority: existingBR?.priority || "must",
+    conditions: existingBR?.conditions || [],
+    examples: htmlBR.example
+      ? [{ input: htmlBR.example, expected: "" }]
+      : (existingBR?.examples || []),
+    testability: existingBR?.testability || ""
+  };
+}
+```
+
+### Entities (HTML → feature.json)
+
+```javascript
+// HTML format: { name, description, attributes: [{name, description}], relationships: [string] }
+// feature.json format: { name, description, attributes: [{name, description, required}], relationships: [{target, type, description}] }
+
+reverseEntity(htmlEntity, existingEntity) {
+  return {
+    name: htmlEntity.name,
+    description: htmlEntity.description || "",
+    attributes: (htmlEntity.attributes || []).map(a => {
+      const existing = (existingEntity?.attributes || []).find(ea => ea.name === a.name);
+      return {
+        name: a.name,
+        description: a.description || "",
+        required: existing?.required ?? true
+      };
+    }),
+    relationships: (htmlEntity.relationships || []).map(relStr => {
+      // Parse "Target (type) - description" format back to structured
+      const match = relStr.match(/^(.+?)\s*\((.+?)\)\s*-\s*(.*)$/);
+      if (match) {
+        return { target: match[1].trim(), type: match[2].trim(), description: match[3].trim() };
+      }
+      return { target: relStr, type: "reference", description: "" };
+    })
+  };
+}
+```
+
+### Permissions (HTML → feature.json)
+
+```javascript
+// HTML format: permissions[] = ["Role|Action", "Role|Action", "Role|*"]
+// feature.json format: permissionMatrix = { permissions: [{path, action, description}], roleAssignments: [{role, permissions[]}] }
+
+const actionToPermission = {
+  Consulter: "read",
+  Creer: "create",
+  Modifier: "update",
+  Supprimer: "delete",
+  Valider: "validate",
+  Exporter: "export"
+};
+
+reversePermissions(htmlPermissions, moduleCode, appName) {
+  const rolePerms = {};
+
+  // Group permissions by role
+  (htmlPermissions || []).forEach(p => {
+    const [role, action] = p.split("|");
+    if (!rolePerms[role]) rolePerms[role] = [];
+    if (action === "*") {
+      // Wildcard: add all standard permission paths
+      Object.values(actionToPermission).forEach(permAction => {
+        const path = `business.${appName}.${moduleCode}.*.${permAction}`;
+        if (!rolePerms[role].includes(path)) rolePerms[role].push(path);
+      });
+    } else {
+      const permAction = actionToPermission[action] || action.toLowerCase();
+      const path = `business.${appName}.${moduleCode}.*.${permAction}`;
+      if (!rolePerms[role].includes(path)) rolePerms[role].push(path);
+    }
+  });
+
+  // Build unique permission paths
+  const allPaths = new Set();
+  Object.values(rolePerms).forEach(perms => perms.forEach(p => allPaths.add(p)));
+
+  return {
+    permissions: Array.from(allPaths).map(path => ({
+      path,
+      action: path.split(".").pop(),
+      description: ""
+    })),
+    roleAssignments: Object.entries(rolePerms).map(([role, perms]) => ({
+      role,
+      permissions: perms
+    }))
+  };
+}
+```
+
+---
+
+## Modules Reverse Mapping
+
+### Module List (HTML → feature.json)
+
+```javascript
+// HTML format: modules[] = [{ code, name, description, featureType, priority, entities[], status }]
+// feature.json format: modules[] = [{ code, description, featureType, dependencies[], dependents[], status, priority, sortOrder, entities[], estimatedComplexity }]
+
+reverseModule(htmlModule, existingModule) {
+  return {
+    code: htmlModule.code,
+    description: htmlModule.description || "",
+    featureType: htmlModule.featureType || "data-centric",
+    dependencies: existingModule?.dependencies || [],
+    dependents: existingModule?.dependents || [],
+    status: existingModule?.status || "pending",
+    priority: htmlModule.priority || "must",
+    sortOrder: existingModule?.sortOrder || 0,
+    entities: htmlModule.entities || [],
+    estimatedComplexity: existingModule?.estimatedComplexity || "medium",
+    featureJsonPath: existingModule?.featureJsonPath
+  };
+}
+```
+
+---
+
+## Consolidation Reverse Mapping
+
+### Cross-Module Interactions (HTML → feature.json)
+
+```javascript
+// HTML format: consolidation.interactions[] = [{ from, to, description }]
+// feature.json format: consolidation.crossModuleInteractions[] = [{ fromModule, toModule, interactionType, description, entities[] }]
+
+reverseInteraction(htmlInteraction, existingInteraction) {
+  return {
+    fromModule: htmlInteraction.from,
+    toModule: htmlInteraction.to,
+    interactionType: existingInteraction?.interactionType || "data-reference",
+    description: htmlInteraction.description || "",
+    entities: existingInteraction?.entities || []
+  };
+}
+```
+
+### E2E Flows (HTML → feature.json)
+
+```javascript
+// HTML format: consolidation.e2eFlows[] = [{ name, steps: [{module, action}], actors }]
+// feature.json format: consolidation.e2eFlows[] = [{ name, steps: [{module, action, permission}] }]
+
+reverseE2EFlow(htmlFlow, existingFlow) {
+  return {
+    name: htmlFlow.name,
+    steps: (htmlFlow.steps || []).map((s, i) => ({
+      module: s.module,
+      action: s.action,
+      permission: existingFlow?.steps?.[i]?.permission || ""
+    }))
+  };
+}
+```
+
+---
+
+## Review Comments Preservation
+
+Comments from the review are stored in a new `review` section of the master feature.json:
+
+```javascript
+{
+  review: {
+    appliedAt: "ISO timestamp",
+    sourceVersion: "1.0",
+    comments: [
+      // Inline structured comments from data.comments[]
+      { id, sectionId, cardIndex, author, timestamp, content, status, category }
+    ],
+    specComments: {
+      // Textarea comments keyed as "moduleCode.type.index"
+      "Employees.uc.0": "Comment text",
+      "Employees.br.1": "Another comment"
+    },
+    wireframeComments: {
+      // Wireframe feedback keyed by module
+      "Employees": { "EM-list": "Comment on list wireframe" }
+    },
+    changeSummary: {
+      cadrageModified: true,
+      modulesAdded: [],
+      modulesRemoved: [],
+      modulesModified: ["Employees", "LeaveRequests"],
+      commentsCount: 5
+    }
+  }
+}
+```
+
+---
+
+## Matching Strategy
+
+When applying corrections, always try to **match existing items** before creating new ones:
+
+1. **By ID**: If the review item has an ID (UC-001, BR-VAL-001), find the same ID in feature.json
+2. **By name**: If no ID match, find by exact name match
+3. **New item**: If no match found, create a new item with a generated ID
+4. **Removed items**: Items present in feature.json but absent from review are marked as removed (not deleted)
+
+This preserves referential integrity (linked rules, use case references) across the update.

package/templates/skills/business-analyse/references/spec-auto-inference.md

@@ -0,0 +1,57 @@
+# Specification: Auto-Inference Rules
+
+> Reference for step-03a-data.md — convention/override depth auto-generation from entity definitions.
+
+## Entity Attribute → SmartTable Column
+
+| Attribute Type | Column Format | Sortable | Filterable | Notes |
+|---|---|---|---|---|
+| string + unique | text | yes | yes | clickAction: navigate:detail |
+| string | text | yes | yes | — |
+| enum / status | badge | yes | yes (multi-select) | colorMap from lifeCycles if exists |
+| FK:Entity | text (join .name) | yes | yes (entity-select) | Display related entity name |
+| decimal | currency | yes | no | — |
+| int | number | yes | no | — |
+| datetime | date-relative | yes | yes (date-range) | — |
+| bool | boolean | yes | yes (toggle) | — |
+| text (long) | — | no | no | Hidden in table, visible in detail |
+
+## Entity Attribute → SmartForm Field
+
+| Attribute Type | Component | Required from | Notes |
+|---|---|---|---|
+| string | Input | entity.required | — |
+| string (multiline) | TextArea | entity.required | rows: 4 |
+| enum | Select | entity.required | source: enum name |
+| FK:Entity | EntitySelect | entity.required | source: target entity, searchable |
+| decimal | NumberInput | entity.required | — |
+| int | NumberInput | entity.required | — |
+| datetime | DatePicker | entity.required | — |
+| bool | Toggle | — | default: false |
+
+## Auto-Generated Sections by featureType
+
+| featureType | Sections generated |
+|---|---|
+| data-centric | list, create, detail |
+| workflow | list, create, detail, edit |
+| integration | list, detail, config |
+| reporting | dashboard |
+| full-module | list, create, detail, edit, dashboard |
+
+## Section Generation Rules
+
+1. **list section:** SmartTable with all non-long-text attributes as columns, actions = [view, edit, delete], defaultSort = { createdAt, desc }
+2. **create section:** SmartForm with all writable attributes as fields, component inferred from type
+3. **detail section:** DetailCard with all attributes + child SmartTable for each 1:N relationship
+4. **edit section:** Same as create but pre-filled (mode: edit)
+5. **dashboard section:** Trigger 3d (dashboard specification)
+
+## Status/Lifecycle Enhancement
+
+If entity has a status/enum field AND lifeCycles exists:
+- list section: status column gets `format: badge`, `colorMap: stateMachine:{Entity}`
+- list section: rowActions get `showWhen` conditions based on state machine transitions
+- detail section: add StatusBadge resource + transition action buttons
+
+Write auto-generated sections to `specification.sections[]` via `ba-writer.enrichSection()`

package/templates/skills/business-analyse/references/ui-dashboard-spec.md

@@ -0,0 +1,85 @@
+# UI: Dashboard Specification
+
+> Reference for step-03b-ui.md — section 3d dashboard KPI and chart capture.
+
+## 3d. Dashboard Specification (if section = dashboard)
+
+When a "dashboard" section is selected, capture structured KPI and chart data **in addition** to the standard ASCII mockup.
+
+1. **Ask client for KPIs** via AskUserQuestion (batch):
+   - KPI name and metric description
+   - Visualization type: `kpi-card`, `bar`, `line`, `pie`, `area`, `donut`, `stacked-bar`
+   - Data source entity
+   - Format: `number`, `currency`, `percent`, `duration`
+   - Thresholds (warning/critical) if applicable
+
+2. **Ask client for filters:**
+   - Date range filter? Default period? (day/week/month/quarter/year)
+   - Entity-based filters? (status, category, etc.)
+
+3. **Ask client for refresh mode:**
+   - Static (load on page open)
+   - Polling (periodic refresh)
+   - SignalR (real-time push)
+
+4. **Store in specification.dashboards[]:**
+
+```json
+{
+  "code": "{module}-dashboard",
+  "title": "{Module} Dashboard",
+  "description": "Vue d'ensemble des métriques {module}",
+  "linkedUCs": ["UC-XXX"],
+  "refreshMode": "static",
+  "defaultPeriod": "month",
+  "kpis": [
+    {
+      "code": "total-items",
+      "label": "Total Items",
+      "metric": "COUNT(entity)",
+      "format": "number",
+      "visualization": "kpi-card",
+      "dataSource": "Entity",
+      "thresholds": { "warning": 100, "critical": 50 }
+    },
+    {
+      "code": "items-by-status",
+      "label": "Items by Status",
+      "metric": "COUNT(entity) GROUP BY status",
+      "format": "number",
+      "visualization": "pie",
+      "dataSource": "Entity",
+      "dimensions": ["status"]
+    }
+  ],
+  "filters": [
+    { "field": "dateRange", "type": "dateRange", "label": "Période" },
+    { "field": "status", "type": "multiselect", "label": "Statut" }
+  ],
+  "permissionsRequired": ["business.{app}.{module}.read"]
+}
+```
+
+5. **ALSO generate the standard ASCII mockup** for the dashboard with KPI cards + chart placeholders:
+
+```
+╔═══════════════════════════════════════════════════════════════╗
+║  {Module} > Dashboard              Période: [Ce mois ▾]     ║
+╠═══════════════════════════════════════════════════════════════╣
+║  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐    ║
+║  │ KPI #1   │  │ KPI #2   │  │ KPI #3   │  │ KPI #4   │    ║
+║  │  1,234   │  │  567     │  │  89.2%   │  │  12,400  │    ║
+║  │  ↑ +12%  │  │  ↓ -3%  │  │  → 0%   │  │  ↑ +5%   │    ║
+║  └──────────┘  └──────────┘  └──────────┘  └──────────┘    ║
+╠═══════════════════════════════════════════════════════════════╣
+║  ┌─────────────────────────┐  ┌─────────────────────────┐    ║
+║  │  [Bar Chart]            │  │  [Pie Chart]            │    ║
+║  │  Items by Month         │  │  Items by Status        │    ║
+║  │  ████                   │  │      ████████           │    ║
+║  │  ████ ████              │  │   ███      ███          │    ║
+║  │  ████ ████ ████         │  │  ██   42%    ██         │    ║
+║  └─────────────────────────┘  └─────────────────────────┘    ║
+╚═══════════════════════════════════════════════════════════════╝
+```
+
+Store the mockup in specification.wireframes[] AS WELL (for visual reference).

package/templates/skills/business-analyse/references/ui-resource-cards.md

@@ -0,0 +1,110 @@
+# UI: Resource Structure Cards
+
+> Reference for step-03b-ui.md — exact JSON formats for section resources (SmartTable, SmartForm) and wireframes.
+
+## specification.sections[] (with resources)
+
+```json
+{
+  "code": "list",
+  "labels": { "fr": "Liste", "en": "List", "it": "Elenco", "de": "Liste" },
+  "route": "/business/{app}/{module}/list",
+  "icon": "list",
+  "permission": "business.{app}.{module}.read",
+  "wireframe": "{module}-list",
+  "useCases": ["UC-{PREFIX}-001", "UC-{PREFIX}-002"],
+  "businessRules": ["BR-VAL-{PREFIX}-001"],
+  "resources": [
+    {
+      "code": "{module}-grid",
+      "type": "SmartTable",
+      "entity": "{MainEntity}",
+      "permission": "business.{app}.{module}.read",
+      "columns": ["name", "status", "createdAt"],
+      "columnDefs": [
+        { "field": "code", "label": {"fr": "Code", "en": "Code"}, "format": "text", "sortable": true, "filterable": true, "clickAction": "navigate:detail" },
+        { "field": "name", "label": {"fr": "Nom", "en": "Name"}, "format": "text", "sortable": true, "filterable": true },
+        { "field": "status", "label": {"fr": "Statut", "en": "Status"}, "format": "badge", "sortable": true, "filterable": true, "colorMap": "stateMachine:{Entity}" },
+        { "field": "createdAt", "label": {"fr": "Créé le", "en": "Created"}, "format": "date-relative", "sortable": true }
+      ],
+      "actions": ["view", "edit", "delete"],
+      "rowActions": [
+        { "action": "view", "icon": "eye", "permission": "business.{app}.{module}.read" },
+        { "action": "edit", "icon": "edit", "permission": "business.{app}.{module}.update", "showWhen": {"status": ["draft"]} },
+        { "action": "delete", "icon": "trash", "permission": "business.{app}.{module}.delete", "confirm": true }
+      ],
+      "filters": ["status", "dateRange"],
+      "defaultSort": { "field": "createdAt", "direction": "desc" },
+      "defaultPageSize": 20,
+      "emptyState": { "icon": "inbox", "message": {"fr": "Aucun enregistrement", "en": "No records"}, "createAction": true }
+    }
+  ]
+}
+```
+
+**MANDATORY for SmartTable:** `columnDefs`, `rowActions`, `defaultSort`, `emptyState`
+
+## SmartForm resource (for create/edit sections)
+
+```json
+{
+  "code": "{module}-form",
+  "type": "SmartForm",
+  "entity": "{MainEntity}",
+  "permission": "business.{app}.{module}.create",
+  "fields": [
+    { "name": "code", "component": "Input", "required": true, "validation": "Unique, auto-generated" },
+    { "name": "name", "component": "Input", "required": true },
+    { "name": "type", "component": "Select", "required": true, "source": "EntityTypeEnum" },
+    { "name": "description", "component": "TextArea", "required": false },
+    { "name": "parentId", "component": "EntitySelect", "source": "ParentEntity", "required": true },
+    { "name": "startDate", "component": "DatePicker", "required": true },
+    { "name": "isActive", "component": "Toggle", "default": true }
+  ],
+  "formLayout": {
+    "type": "tabs",
+    "tabs": [
+      { "code": "general", "label": {"fr": "Général", "en": "General"}, "fields": ["code", "name", "type", "description"] },
+      { "code": "details", "label": {"fr": "Détails", "en": "Details"}, "fields": ["parentId", "startDate", "isActive"] }
+    ]
+  }
+}
+```
+
+**MANDATORY for SmartForm:** `fields` with `component` type, `formLayout`
+
+## specification.uiWireframes[]
+
+```json
+{
+  "screen": "{module}-{section}",
+  "section": "{section}",
+  "description": "Description of the screen",
+  "mockupFormat": "ascii",
+  "mockup": "╔═══...",
+  "elements": ["DataGrid", "FilterBar", "Pagination", "CreateButton"],
+  "actions": ["filter", "sort", "create", "view-detail"],
+  "permissionsRequired": ["business.{app}.{module}.read"],
+  "componentMapping": [
+    { "wireframeElement": "DataGrid", "reactComponent": "SmartTable" },
+    { "wireframeElement": "FilterBar", "reactComponent": "SmartFilter" },
+    { "wireframeElement": "CreateButton", "reactComponent": "Button" }
+  ],
+  "layout": {
+    "type": "page",
+    "regions": [
+      { "id": "toolbar", "position": "top", "components": [
+        { "type": "FilterBar", "resourceRef": "{module}-filters" },
+        { "type": "ActionMenu", "resourceRef": "{module}-actions", "permission": "business.{app}.{module}.create" }
+      ]},
+      { "id": "content", "position": "main", "span": 12, "components": [
+        { "type": "SmartTable", "resourceRef": "{module}-grid" }
+      ]}
+    ]
+  }
+}
+```
+
+**REQUIRED fields:** `screen`, `mockup`, `elements`, `section`, `componentMapping`, `layout` are ALL mandatory.
+A wireframe without `componentMapping` or `layout` will FAIL validation in step 9.
+**layout.regions[].components[].resourceRef** MUST match a `sections[].resources[].code`.