---
name: step-06-doc-html
description: Documentation phase - Generate React documentation page
model: sonnet
prev_step: steps/step-05-handoff.md
next_step: null
---

<objective>
Generate React documentation page integrated into SmartStack web app.
Create i18n translations in 4 languages (FR, EN, IT, DE).
</objective>

<context7>
CONTEXT7 REQUIRED for React generation:

```
Use context7 with /facebook/react and /i18next/react-i18next
to generate documentation components following SmartStack patterns
```

Libraries to reference:
- /facebook/react - React 19 patterns
- /i18next/react-i18next - Internationalization
- /remix-run/react-router - React Router v7
- /lucide-icons/lucide-react - Icons
</context7>

## EXECUTION SEQUENCE

### 1. Read Current State

Read `{output_dir}/00-context.md` for state variables.
Read FRD: `{output_dir}/3-functional-specification.md`

Update progress: `06-doc-html` -> "In Progress"

---

### 2. Load React Templates (Progressive)

```
Read: react/components.md     # ~250 lines (React components)
Read: react/schema.md         # ~100 lines (TypeScript interfaces)
```

**NOT loaded:** Full templates-react.md (580 lines)
**Savings:** ~230 lines (40% reduction)

---

### 3. Extract FRD Data

Parse FRD to create structured data object:

```typescript
interface FrdData {
  featureId: string;          // From state
  moduleName: string;         // From state
  applicationName: string;    // From state
  version: string;            // "1.0"
  useCases: UseCase[];        // From FRD section 2
  businessRules: BusinessRule[]; // From BRD section 3
  permissions: Permission[];  // From FRD section 6
}
```

---

### 4. Generate React Component

Using `react/components.md` template, generate:

**File:** `web/smartstack-web/src/pages/docs/business/{app}/{module}/FrdDocPage.tsx`

Key sections:
- Breadcrumb navigation
- Header with feature ID and version
- Table of contents
- Section 1: Overview with stats
- Section 2: Use Cases cards
- Section 3: Business Rules table
- Section 4: Permissions list
- Section 5: Wireframe preview
- Section 6: API Endpoints table
- Footer navigation

**Use Context7** for:
- Latest React patterns
- Proper hook usage
- TypeScript typing

---

### 5. Generate i18n Translations

**Create 4 language files:**

| Language | File |
|----------|------|
| FR | `web/smartstack-web/src/i18n/locales/fr/docs-{app}-{module}.json` |
| EN | `web/smartstack-web/src/i18n/locales/en/docs-{app}-{module}.json` |
| IT | `web/smartstack-web/src/i18n/locales/it/docs-{app}-{module}.json` |
| DE | `web/smartstack-web/src/i18n/locales/de/docs-{app}-{module}.json` |

**Structure:**

```json
{
  "breadcrumb": {
    "docs": "Documentation",
    "business": "Business"
  },
  "common": {
    "tableOfContents": "Table of Contents",
    "wireframePreview": "Wireframe Preview"
  },
  "sections": {
    "overview": "Overview",
    "useCases": "Use Cases",
    "businessRules": "Business Rules",
    "permissions": "Permissions",
    "wireframes": "Wireframes",
    "api": "API Endpoints"
  },
  "labels": {
    "actor": "Actor",
    "rule": "Rule",
    "category": "Category",
    "priority": "Priority"
  },
  "stats": {
    "useCases": "Use Cases",
    "businessRules": "Business Rules",
    "permissions": "Permissions"
  },
  "warnings": {
    "permissionCheck": "Permission Check Required",
    "permissionCheckDescription": "Ensure all permissions are registered before deployment."
  },
  "nav": {
    "backToApp": "Back to Application",
    "allModules": "All Modules"
  },
  "apps": {
    "{app}": {
      "name": "{Application Name}",
      "description": "{Application description}"
    }
  },
  "modules": {
    "{module}": {
      "name": "{Module Name}",
      "title": "{Module Title}",
      "subtitle": "{Module subtitle}",
      "overview": "{Module overview from FRD}"
    }
  }
}
```

**Translation strategy:**
- FR: Source language (from FRD)
- EN: Translate from FR
- IT: Translate from FR
- DE: Translate from FR

---

### 6. Update Routing

**Add route to App.tsx or routes config:**

```tsx
{
  path: '/docs/business/{app}/{module}',
  element: <{Module}FrdDocPage />,
  handle: {
    permission: 'docs.read' // Public or minimal permission
  }
}
```

---

### 7. Update Index Page (if needed)

If this is a new module in existing application:

Update `web/smartstack-web/src/pages/docs/business/{app}/index.tsx`:

```tsx
const modules: ModuleLink[] = [
  // ... existing modules
  {
    id: '{module}',
    name: '{Module Name}',
    description: '{Module description}',
    features: {feature_count},
    path: '/docs/business/{app}/{module}'
  }
];
```

---

### 8. Save Outputs

**Files created:**

| File | Purpose |
|------|---------|
| `FrdDocPage.tsx` | React documentation component |
| `fr/docs-{app}-{module}.json` | French translations |
| `en/docs-{app}-{module}.json` | English translations |
| `it/docs-{app}-{module}.json` | Italian translations |
| `de/docs-{app}-{module}.json` | German translations |

Update `00-context.md`:
- Progress: `06-doc-html` -> "Complete"

---

### 9. Display Final Summary

```
DOCUMENTATION - {feature_id}
├── Status: Complete
├── React page: FrdDocPage.tsx
├── i18n: 4 languages created
├── Route: /docs/business/{app}/{module}
└── BA WORKFLOW COMPLETE

Summary:
├── Discovery: {output_dir}/1-discovery.md
├── BRD: {output_dir}/2-business-requirements.md
├── FRD: {output_dir}/3-functional-specification.md
├── Validation: {output_dir}/validation.json (APPROVED)
├── Handoff: {output_dir}/4-development-handoff.md
└── Documentation: web/.../FrdDocPage.tsx

Next steps:
1. Review generated documentation at /docs/business/{app}/{module}
2. Execute /implement {feature_id} to start development
3. Run tests after implementation

Thank you for using Business Analysis skill!
Contact: support@atlshub.ch
```

---

## OUTPUT

This step produces:
- React documentation page
- 4 i18n translation files
- Updated routing
- Final BA summary

**BA Workflow Complete.**
