@atlashub/smartstack-cli 2.5.3 → 2.6.0

package/templates/skills/business-analyse/steps/step-03-specify.md

@@ -13,10 +13,11 @@ next_step: steps/step-03-specify.md OR steps/step-04-consolidation.md (condition
 - This step is EXECUTED ONCE PER MODULE in topological dependency order
 - ALWAYS check workflow state to determine current module
 - ALWAYS reference completed modules when specifying current one
-- ALWAYS propose ASCII/SVG mockups for each section
+- **MANDATORY:** Generate and validate an ASCII/SVG mockup for EVERY section (not optional)
 - ALL questions via AskUserQuestion tool
 - ALL communication in `{language}`
 - NEVER skip per-module validation
+- **WIREFRAME RULE:** Every section MUST have a wireframe in `specification.uiWireframes[]`. No section without a validated mockup.
 
 ## YOUR TASK
 
@@ -89,9 +90,13 @@ options:
     description: "Formulaire de création et de modification"
   - label: "Validation/Approbation"
     description: "Workflow de validation avec changement de statut"
+  - label: "Dashboard"
+    description: "Tableau de bord avec KPIs, graphiques (Recharts) et métriques clés"
 ```
 
-#### 3b. For Each Section: Propose ASCII Mockup
+#### 3b. For Each Section: Generate MANDATORY ASCII Mockup
+
+> **BLOCKING RULE:** Every section MUST have a wireframe. No section proceeds to entity definition (step 6) without a validated mockup stored in `specification.uiWireframes[]`.
 
 For each confirmed section, generate an ASCII mockup and validate with client:
 
@@ -111,7 +116,7 @@ Example for a list section:
 ╚═══════════════════════════════════════════════════════════╝
 ```
 
-Store in specification.wireframes[]:
+Store in specification.uiWireframes[] (**MANDATORY** for every section):
 
 ```json
 {
@@ -126,8 +131,31 @@ Store in specification.wireframes[]:
 }
 ```
 
+> **REQUIRED fields:** `screen`, `mockup`, `elements`, `section` are all mandatory. A wireframe without these fields will FAIL validation in step 9.
+
 Ask client to validate each mockup via AskUserQuestion (batch 2-3 mockups at once if possible).
 
+> **IF client rejects a mockup:** Revise and re-propose until validated. Do NOT proceed without client approval on the layout.
+
+#### 3b-bis. Wireframe-to-Component Mapping
+
+After client validates the mockup, map each wireframe element to a SmartStack React component:
+
+| Wireframe Element | SmartStack Component | Notes |
+|-------------------|---------------------|-------|
+| DataGrid | `SmartTable` or `EntityCard` grid | Use EntityCard for card layouts |
+| FilterBar | `SmartFilter` | Integrated with SmartTable |
+| SearchInput | `SearchInput` | Debounced search |
+| Pagination | Built into `SmartTable` | Server-side pagination |
+| ActionButton | `Button` + `RequirePermission` | Always wrapped in permission check |
+| StatusBadge | `StatusBadge` | Uses entity lifecycle states |
+| DetailCard | `EntityDetailCard` | Standard detail layout |
+| Form | `SmartForm` | FluentValidation-backed |
+| KpiCard | `StatCard` (Recharts) | Dashboard KPI display |
+| Chart:bar/line/pie | Recharts `BarChart`/`LineChart`/`PieChart` | CSS variables for colors |
+
+Store the component mapping alongside the wireframe to ensure downstream skills use the correct components.
+
 #### 3c. Identify Resources per Section
 
 For each section, identify what resources/components are needed:
@@ -136,6 +164,88 @@ For each section, identify what resources/components are needed:
 - Detail section → DetailCard, StatusBadge, ActionButtons, Timeline
 - Create section → Form, ValidationMessages, SubmitButton
 - Approve section → StatusTransitionPanel, CommentBox, ApproveRejectButtons
+- Dashboard section → StatCard, RechartsChart (Bar/Line/Pie/Area), DashboardGrid, FilterBar
+
+#### 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"
+    },
+    {
+      "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).
 
 ### 4. Conditional Questionnaires
 
@@ -148,9 +258,28 @@ Based on module type, load questionnaires per-module:
 | Has lifecycle | 11 | `questionnaire/11-data-lifecycle.md` |
 | Has migration needs | 12 | `questionnaire/12-migration.md` |
 | References other modules | 13 | `questionnaire/13-cross-module.md` |
+| Documentation needed | 10 | `questionnaire/10-documentation.md` |
 
 Ask via AskUserQuestion, 1-2 batches per category.
 
+#### Store Documentation Requirements
+
+If questionnaire 10 was loaded, persist answers in feature.json:
+
+```
+ba-writer.enrichSection({
+  featureId: {feature_id},
+  section: "documentation",
+  data: {
+    userDocRequired: {Q10.1 answer == "Yes"},
+    techDocRequired: {Q10.2 answer == "Yes"},
+    status: "pending"
+  }
+})
+```
+
+This data will be consumed by `/application` step-08 to auto-generate in-app documentation.
+
 ### 5. Cross-Module References
 
 > Reference completed modules to help define current one.
@@ -286,7 +415,7 @@ Translation keys for all UI text (4 languages: fr, en, it, de)
 | functionalRequirements | 4 | PASS/FAIL |
 | permissionMatrix | 1 resource × 2 roles | PASS/FAIL |
 | entities | 1 | PASS/FAIL |
-| wireframes | 2 | PASS/FAIL |
+| wireframes | 1 per section (BLOCKING) | PASS/FAIL |
 | gherkinScenarios | 2 per UC | PASS/FAIL |
 | validations | 1 | PASS/FAIL |
 | messages | 4 | PASS/FAIL |
@@ -463,7 +592,7 @@ Read metadata.workflow.currentModule
 ## SUCCESS METRICS
 
 - All sections walked through with client
-- ASCII mockups proposed and validated for key sections
+- ASCII mockups generated and validated for EVERY section (1 wireframe per section minimum)
 - Entities defined with business attributes
 - Business rules extracted and categorized
 - Per-module validation PASS

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

@@ -225,7 +225,9 @@ Include:
 
 #### 4.5 Frontend Files
 
-From `specification.wireframes[]` and `analysis.useCases[]` of the module:
+From `specification.uiWireframes[]`, `specification.dashboards[]` and `analysis.useCases[]` of the module:
+
+> **WIREFRAME TRACEABILITY RULE:** Every frontend file (Page, DashboardPage, Component) MUST include `linkedWireframes[]` referencing the wireframe `screen` identifiers from `specification.uiWireframes[]`. This ensures the BA mockups validated by the client are respected during implementation.
 
 ```json
 "frontend": [
@@ -233,12 +235,33 @@ From `specification.wireframes[]` and `analysis.useCases[]` of the module:
     "path": "src/pages/{ModuleName}/{PageName}Page.tsx",
     "type": "Page",
     "linkedUCs": ["UC-001", "UC-002"],
-    "module": "{moduleCode}"
+    "linkedWireframes": ["{module}-list"],
+    "module": "{moduleCode}",
+    "wireframeAcceptanceCriteria": "Layout MUST match wireframe '{module}-list': elements [{elements}], actions [{actions}]. See specification.uiWireframes[] for exact mockup."
+  },
+  {
+    "path": "src/pages/{ModuleName}/{PageName}DetailPage.tsx",
+    "type": "Page",
+    "linkedUCs": ["UC-003"],
+    "linkedWireframes": ["{module}-detail"],
+    "module": "{moduleCode}",
+    "wireframeAcceptanceCriteria": "Layout MUST match wireframe '{module}-detail': elements [{elements}], actions [{actions}]. See specification.uiWireframes[] for exact mockup."
+  },
+  {
+    "path": "src/pages/{ModuleName}/{DashboardName}DashboardPage.tsx",
+    "type": "DashboardPage",
+    "linkedUCs": ["UC-060"],
+    "linkedWireframes": ["{module}-dashboard"],
+    "module": "{moduleCode}",
+    "dashboardRef": "{module}-dashboard",
+    "instructions": "Use Recharts library. See specification.dashboards[] for KPI definitions, chart types, filters, and data sources.",
+    "wireframeAcceptanceCriteria": "Layout MUST match wireframe '{module}-dashboard': KPI card positions, chart placement, filter bar location. See specification.uiWireframes[] AND specification.dashboards[] for exact mockup and KPI specs."
   },
   {
     "path": "src/components/{ModuleName}/{ComponentName}.tsx",
     "type": "Component",
     "linkedUCs": ["UC-001"],
+    "linkedWireframes": ["{module}-{section}"],
     "module": "{moduleCode}"
   },
   {
@@ -250,12 +273,38 @@ From `specification.wireframes[]` and `analysis.useCases[]` of the module:
 ]
 ```
 
-Include:
+**Wireframe Acceptance Criteria (ALL frontend pages):**
+> **MANDATORY** for every Page and DashboardPage task. These criteria ensure the BA mockups are respected.
+- Layout structure matches the validated ASCII/SVG wireframe from `specification.uiWireframes[]`
+- All `elements` listed in the wireframe are present in the generated component
+- All `actions` listed in the wireframe are implemented with correct permissions
+- Component mapping follows the wireframe-to-component table (see step-03 section 3b-bis)
+- If wireframe shows a DataGrid → implement with `SmartTable` or `EntityCard` grid
+- If wireframe shows FilterBar → implement with `SmartFilter`
+- If wireframe shows ActionButton → wrap in `RequirePermission`
+
+**Dashboard pages (type: DashboardPage):**
+- Generated from `specification.dashboards[]` entries
+- `dashboardRef` links to the dashboard code in specification.dashboards[]
+- `linkedWireframes` links to the dashboard wireframe in specification.uiWireframes[]
+- `instructions` MUST reference chart types, KPI definitions, and data sources
+- Acceptance criteria for DashboardPage tasks MUST include:
+  - Chart library (Recharts) installed in package.json
+  - Chart types matching specification.dashboards[].kpis[].visualization
+  - KPI cards for kpi-card type visualizations
+  - Filters functional (dateRange, select, etc.)
+  - CSS variables used (no hardcoded colors) - see ui-components/patterns/dashboard-chart.md
+  - Responsive layout (1-col mobile, 2-col tablet, 3-col desktop)
+  - **KPI card positions match wireframe layout** (e.g., 4 cards in a row if wireframe shows 4)
+  - **Chart placement matches wireframe** (e.g., 2-column grid if wireframe shows side-by-side)
+
+**Standard pages (type: Page):**
 - Pages for major use cases
 - Components for reusable UI elements
 - Custom hooks for business logic
 - Forms for data entry
 - List/Detail views
+- **ALL pages MUST reference their wireframe via `linkedWireframes`**
 
 #### 4.6 SeedData Files
 
@@ -620,7 +669,7 @@ options:
         "application": "Y tasks across services, DTOs, validators",
         "infrastructure": "Z tasks across repositories, persistence",
         "api": "A tasks across controllers, error handling",
-        "frontend": "B tasks across pages, components, hooks",
+        "frontend": "B tasks across pages, components, hooks (each with linkedWireframes)",
         "seedData": "5 CORE + C business seed data tasks",
         "tests": "D unit + E integration + F security tests",
         "i18n": "G i18n key implementations"
@@ -756,12 +805,13 @@ Generate `.ralph/progress.txt` as main task tracker:
     □ Implement error handling and validation responses
     Total: B tasks
 
-  [FRONTEND] UI Components & Pages
-    □ Create {ModuleName}Page for listing
-    □ Create {ModuleName}DetailPage for viewing
-    □ Create {ModuleName}Form component for creation/edit
+  [FRONTEND] UI Components & Pages (wireframe-driven)
+    □ Create {ModuleName}Page for listing [wireframe: {module}-list]
+    □ Create {ModuleName}DetailPage for viewing [wireframe: {module}-detail]
+    □ Create {ModuleName}Form component for creation/edit [wireframe: {module}-create]
     □ Create custom hook use{ModuleName}
     □ Implement pagination, filtering, sorting
+    □ Validate all pages match their wireframe layout
     Total: C tasks
 
   [I18N] Internationalization Keys
@@ -1088,11 +1138,14 @@ Before presenting handoff to user:
 - [ ] Implementation strategy selected or defaulted
 - [ ] Complexity calculated for each module and overall
 - [ ] filesToCreate: 7 categories complete, no free text
+- [ ] **WIREFRAME TRACEABILITY:** Every frontend Page/DashboardPage has `linkedWireframes[]` referencing specification.uiWireframes[].screen
+- [ ] **WIREFRAME ACCEPTANCE:** Every frontend Page/DashboardPage has `wireframeAcceptanceCriteria` describing expected layout
 - [ ] brToCodeMapping: All business rules from analysis.businessRules[] mapped
 - [ ] apiEndpointSummary: Exact copy from specification.apiEndpoints[]
 - [ ] prd.json: Derived from feature.json, not independently generated
 - [ ] prd.json: Includes all UCs, FRs, BRs, entities, API endpoints from source
 - [ ] progress.txt: Hierarchical, all modules in topological order, 5 CORE SeedData per module
+- [ ] progress.txt: Frontend tasks reference wireframe identifiers [wireframe: {screen}]
 - [ ] Module order: Follows topological dependency graph
 - [ ] feature.json updated: handoff section + status "handed-off"
 - [ ] All paths use project namespace from .smartstack/config.json

package/templates/skills/business-analyse/templates/tpl-frd.md

@@ -6,7 +6,7 @@
 ---
 
 ```markdown
-# FRD - {FEAT-XXX} {Feature Name}
+# Specification fonctionnelle - {FEAT-XXX} {Feature Name}
 
 > **Module:** business/{application}/{module}
 > **Version:** 1.0

package/templates/skills/business-analyse/templates-frd.md

@@ -1,6 +1,6 @@
-# Templates FRD - Business Analysis
+# Templates Specification - Business Analysis
 
-> **Usage:** Templates for functional specification documents (FRD)
+> **Usage:** Templates for functional specification documents
 > **Context:** Business > Application > Module > Section
 
 ---
@@ -76,10 +76,10 @@
 
 ---
 
-## Template 2-brd.md (Business Requirements Document)
+## Template 2-brd.md (Exigences metier)
 
 ```markdown
-# BRD - {FEAT-XXX} {Feature Name}
+# Exigences metier - {FEAT-XXX} {Feature Name}
 
 > **Module:** business/{application}/{module}
 > **Version:** 1.0
@@ -171,10 +171,10 @@
 
 ---
 
-## Template 3-frd.md (Functional Requirements Document)
+## Template 3-frd.md (Specification fonctionnelle)
 
 ```markdown
-# FRD - {FEAT-XXX} {Feature Name}
+# Specification fonctionnelle - {FEAT-XXX} {Feature Name}
 
 > **Module:** business/{application}/{module}
 > **Version:** 1.0
@@ -352,7 +352,7 @@ Feature: {FEAT-XXX} {Feature Name}
 
 > **Module:** business/{application}/{module}
 > **Version:** 1.0
-> **Validated Specs:** FRD v1.0 (validation.json)
+> **Validated Specs:** Specification v1.0 (validation.json)
 > **Implementation:** `/ralph-loop -r` (iterative) | `/feature-full business/{app}/{module}` (one-shot)
 
 ## DEVELOPER INSTRUCTIONS
@@ -456,7 +456,7 @@ FRONTEND:
 - [ ] EF Core migration created if entity
 - [ ] Permissions added in PermissionConfiguration.cs
 - [ ] i18n complete (4 languages)
-- [ ] Documentation generated: `/business-analyse:7-doc-html FEAT-XXX`
+- [ ] Documentation generated: `/documentation user {module_name}`
 
 ---
 

package/templates/skills/business-analyse/templates-react.md

@@ -1,6 +1,6 @@
-# Templates React - FRD Documentation
+# Templates React - Documentation Module
 
-> **Usage:** Templates for generating HTML (React) documentation of functional specifications
+> **Usage:** Templates for generating HTML (React) documentation of module specifications
 > **Output:** `web/smartstack-web/src/pages/docs/business/{app}/{module}/`
 > **Context7:** Use for up-to-date React code generation
 
@@ -30,10 +30,10 @@
 
 ---
 
-## Template FrdDocPage.tsx
+## Template DocPage.tsx
 
 ```tsx
-// web/smartstack-web/src/pages/docs/business/{app}/{module}/FrdDocPage.tsx
+// web/smartstack-web/src/pages/docs/business/{app}/{module}/DocPage.tsx
 // GENERATE WITH: use context7 with /facebook/react
 
 import { Link } from 'react-router-dom';
@@ -51,7 +51,7 @@ import {
   Database
 } from 'lucide-react';
 
-// Types for FRD data
+// Types for documentation data
 interface UseCase {
   id: string;
   name: string;
@@ -73,7 +73,7 @@ interface Permission {
   roles: string[];
 }
 
-interface FrdData {
+interface DocData {
   featureId: string;
   moduleName: string;
   applicationName: string;
@@ -83,8 +83,8 @@ interface FrdData {
   permissions: Permission[];
 }
 
-// Data loaded from FRD (to be generated dynamically)
-const frdData: FrdData = {
+// Data loaded from feature.json (to be generated dynamically)
+const docData: DocData = {
   featureId: 'FEAT-XXX',
   moduleName: '{ModuleName}',
   applicationName: '{ApplicationName}',
@@ -162,7 +162,7 @@ function NumberedSection({
   );
 }
 
-export function {ModuleName}FrdDocPage() {
+export function {ModuleName}DocPage() {
   const { t } = useTranslation('docs-business');
 
   return (
@@ -177,29 +177,29 @@ export function {ModuleName}FrdDocPage() {
           {t('breadcrumb.business')}
         </Link>
         <span>/</span>
-        <Link to={`/docs/business/${frdData.applicationName.toLowerCase()}`} className="hover:text-[var(--color-primary-600)]">
-          {t(`apps.${frdData.applicationName.toLowerCase()}.name`)}
+        <Link to={`/docs/business/${docData.applicationName.toLowerCase()}`} className="hover:text-[var(--color-primary-600)]">
+          {t(`apps.${docData.applicationName.toLowerCase()}.name`)}
         </Link>
         <span>/</span>
-        <span>{t(`modules.${frdData.moduleName.toLowerCase()}.name`)}</span>
+        <span>{t(`modules.${docData.moduleName.toLowerCase()}.name`)}</span>
       </nav>
 
       {/* Header */}
       <header>
         <div className="flex items-center gap-2 mb-2">
           <span className="px-2 py-0.5 rounded bg-[var(--color-primary-600)]/10 text-[var(--color-primary-600)] text-xs font-medium">
-            {frdData.featureId}
+            {docData.featureId}
           </span>
           <span className="px-2 py-0.5 rounded bg-green-500/10 text-green-600 text-xs font-medium">
-            v{frdData.version}
+            v{docData.version}
           </span>
         </div>
         <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
           <FileText className="w-8 h-8 text-[var(--color-primary-600)]" />
-          {t(`modules.${frdData.moduleName.toLowerCase()}.title`)}
+          {t(`modules.${docData.moduleName.toLowerCase()}.title`)}
         </h1>
         <p className="text-lg text-[var(--text-secondary)]">
-          {t(`modules.${frdData.moduleName.toLowerCase()}.subtitle`)}
+          {t(`modules.${docData.moduleName.toLowerCase()}.subtitle`)}
         </p>
       </header>
 
@@ -226,24 +226,24 @@ export function {ModuleName}FrdDocPage() {
       {/* Section 1: Overview */}
       <NumberedSection number={1} title={t('sections.overview')} icon={Layout}>
         <p className="text-[var(--text-secondary)] mb-4">
-          {t(`modules.${frdData.moduleName.toLowerCase()}.overview`)}
+          {t(`modules.${docData.moduleName.toLowerCase()}.overview`)}
         </p>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
           <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
             <div className="text-2xl font-bold text-[var(--color-primary-600)]">
-              {frdData.useCases.length}
+              {docData.useCases.length}
             </div>
             <div className="text-sm text-[var(--text-secondary)]">{t('stats.useCases')}</div>
           </div>
           <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
             <div className="text-2xl font-bold text-[var(--color-primary-600)]">
-              {frdData.businessRules.length}
+              {docData.businessRules.length}
             </div>
             <div className="text-sm text-[var(--text-secondary)]">{t('stats.businessRules')}</div>
           </div>
           <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
             <div className="text-2xl font-bold text-[var(--color-primary-600)]">
-              {frdData.permissions.length}
+              {docData.permissions.length}
             </div>
             <div className="text-sm text-[var(--text-secondary)]">{t('stats.permissions')}</div>
           </div>
@@ -253,7 +253,7 @@ export function {ModuleName}FrdDocPage() {
       {/* Section 2: Use Cases */}
       <NumberedSection number={2} title={t('sections.useCases')} icon={Users}>
         <div className="space-y-4">
-          {frdData.useCases.map((uc) => (
+          {docData.useCases.map((uc) => (
             <div key={uc.id} className="border border-[var(--border-color)] rounded-lg p-4">
               <div className="flex items-center justify-between mb-2">
                 <h3 className="font-semibold flex items-center gap-2">
@@ -289,7 +289,7 @@ export function {ModuleName}FrdDocPage() {
               </tr>
             </thead>
             <tbody>
-              {frdData.businessRules.map((br, idx) => (
+              {docData.businessRules.map((br, idx) => (
                 <tr key={br.id} className={idx % 2 === 1 ? 'bg-[var(--bg-secondary)]/50' : ''}>
                   <td className="py-2 px-3 font-mono text-[var(--color-primary-600)]">{br.id}</td>
                   <td className="py-2 px-3">{br.rule}</td>
@@ -305,7 +305,7 @@ export function {ModuleName}FrdDocPage() {
       {/* Section 4: Permissions */}
       <NumberedSection number={4} title={t('sections.permissions')} icon={Shield}>
         <div className="space-y-3">
-          {frdData.permissions.map((perm) => (
+          {docData.permissions.map((perm) => (
             <div key={perm.path} className="flex items-center justify-between p-3 rounded-lg bg-[var(--bg-secondary)]">
               <div>
                 <code className="text-sm font-mono text-[var(--color-primary-600)]">{perm.path}</code>
@@ -398,7 +398,7 @@ export function {ModuleName}FrdDocPage() {
       {/* Navigation Footer */}
       <div className="flex justify-between pt-6 border-t border-[var(--border-color)]">
         <Link
-          to={`/docs/business/${frdData.applicationName.toLowerCase()}`}
+          to={`/docs/business/${docData.applicationName.toLowerCase()}`}
           className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]"
         >
           <ArrowRight className="w-4 h-4 rotate-180" />
@@ -571,10 +571,10 @@ export function {App}DocsIndexPage() {
 
 ## Generation Checklist
 
-When generating with `/business-analyse:7-doc-html`:
+When generating documentation:
 
 - [ ] Use Context7 for current React patterns
-- [ ] Generate `FrdDocPage.tsx` with FRD data
+- [ ] Generate `DocPage.tsx` with module documentation data
 - [ ] Create/update `docs-business.json` (4 languages)
 - [ ] Add route in `App.tsx`
 - [ ] Update parent index if new module

package/templates/skills/documentation/SKILL.md

@@ -40,11 +40,11 @@ Claude automatically invokes this skill when it detects:
 
 | Type | Description | Output |
 |------|-------------|--------|
-| `user` | User module (data-driven) | `docs/business/{app}/{module}/frd-data.ts` + `index.tsx` |
+| `user` | User module (data-driven) | `docs/business/{app}/{module}/doc-data.ts` + `index.tsx` |
 | `developer` | Development tool guide | `docs/developer/tools/{Tool}Page.tsx` |
 | `database` | Schema with ERD diagram | `docs/developer/database/{Schema}SchemaPage.tsx` |
 | `testing` | Testing tool | `docs/developer/testing/{Tool}TestingPage.tsx` |
-| `update` | Update existing documentation | Updates `frd-data.ts` + i18n FR |
+| `update` | Update existing documentation | Updates `doc-data.ts` + i18n FR |
 
 ### Available Developer tools
 
@@ -86,8 +86,8 @@ Identify the specific name:
 Follow the data-driven workflow from [templates.md](templates.md):
 
 ```
-1. Read source data (FRD, BRD, code patterns)
-2. Generate frd-data.ts (data file, ~50 lines)
+1. Read source data (feature.json, code patterns)
+2. Generate doc-data.ts (data file, ~50 lines)
 3. Generate index.tsx (page wrapper, ~10 lines)
 4. Generate i18n FR file (source language only)
 5. Update docs-manifest.json
@@ -101,7 +101,7 @@ Follow the data-driven workflow from [templates.md](templates.md):
 2. Invoke docs-context-reader agent → get current doc state
 3. Identify code changes since last doc update (git diff)
 4. Map changes to documentation sections (see data-schema.md)
-5. Update frd-data.ts with new/modified data
+5. Update doc-data.ts with new/modified data
 6. Update i18n FR file if labels changed
 7. Update docs-manifest.json timestamps
 ```
@@ -166,7 +166,7 @@ Follow the data-driven workflow from [templates.md](templates.md):
 
 - **React Templates:** [templates.md](templates.md)
 - **Data Schema:** [data-schema.md](data-schema.md)
-- **FrdDocRenderer:** `web/smartstack-web/src/components/docs/FrdDocRenderer.tsx`
+- **DocRenderer:** `web/smartstack-web/src/components/docs/DocRenderer.tsx`
 - **Types:** `web/smartstack-web/src/components/docs/types.ts`
 - **Manifest Schema:** `_resources/docs-manifest-schema.md`
 - **Complete Command:** `.claude/commands/documentation-module.md`