---
name: step-02-wireframes
description: Generate wireframes (ASCII/HTML mockups) for each screen defined in step-01
model: opus
next_step: steps/step-03-navigation.md
---

# Step 02 — Wireframes (Generate Mockups)

## Objective

Generate visual wireframes for each screen defined in screens.json. Each wireframe provides a concrete representation of the UI layout, component placement, and user interactions.

## Prerequisites

- Step 01 (screens) completed
- screens.json exists for each module with detailed section/resource specs

## Execution

### 1. Load Screen Specs

For each module, read screens.json via ba-reader.

### 2. Generate Wireframes per Resource

For each resource in each section, generate a wireframe object:

**SmartTable wireframe:**
```json
{
  "mockupFormat": "ascii",
  "mockup": "+----------------------------------------------------------+\n| [Departement v] [Statut v]        [+ Nouveau employe]    |\n+------+----------------+---------------+--------+---------+\n| Code | Nom complet    | Departement   | Statut | Actions |\n+------+----------------+---------------+--------+---------+\n| E001 | Dupont Marie   | RH            | Actif  | [E] [S] |\n| E002 | Martin Pierre  | IT            | Conge  | [E] [S] |\n+------+----------------+---------------+--------+---------+\n| << 1 2 3 ... 10 >>                           25 par page |\n+----------------------------------------------------------+",
  "elements": ["FilterBar", "DataGrid", "Pagination", "ActionButtons"],
  "actions": ["filter", "sort", "create", "edit", "delete", "export"],
  "componentMapping": [
    { "wireframeElement": "FilterBar", "reactComponent": "SmartFilter" },
    { "wireframeElement": "DataGrid", "reactComponent": "SmartTable" },
    { "wireframeElement": "Pagination", "reactComponent": "SmartPagination" },
    { "wireframeElement": "ActionButtons", "reactComponent": "SmartToolbar" }
  ],
  "layout": {
    "type": "vertical",
    "regions": ["filters", "grid", "pagination"]
  },
  "permissionsRequired": ["{AppCode}.{ModuleCode}.Read"]
}
```

**SmartForm wireframe:**
```json
{
  "mockupFormat": "ascii",
  "mockup": "+----------------------------------------------------------+\n| Fiche Employe                              [Sauvegarder] |\n+----------------------------------------------------------+\n| [Informations] [Contrats] [Documents]                    |\n+----------------------------------------------------------+\n| Prenom:      [_______________]  Nom: [_______________]   |\n| Email:       [_______________]  Tel: [_______________]   |\n| Departement: [Selectionnez v ]  Poste: [_____________]   |\n| Date embauche: [__ /__ /____]   Statut: [Actif      v]  |\n+----------------------------------------------------------+",
  "elements": ["TabBar", "FormFields", "SaveButton"],
  "actions": ["save", "cancel", "tab-switch"],
  "componentMapping": [
    { "wireframeElement": "TabBar", "reactComponent": "SmartTabs" },
    { "wireframeElement": "FormFields", "reactComponent": "SmartForm" },
    { "wireframeElement": "SaveButton", "reactComponent": "SmartButton" }
  ],
  "layout": {
    "type": "vertical",
    "regions": ["header", "tabs", "form-body", "actions"]
  },
  "permissionsRequired": ["{AppCode}.{ModuleCode}.Update"]
}
```

**SmartDashboard wireframe:**
```json
{
  "mockupFormat": "ascii",
  "mockup": "+----------------------------------------------------------+\n| Tableau de bord RH                                       |\n+-------------+-------------+-------------+----------------+\n| Total actifs| En conge    | Nouveaux    | Taux rotation  |\n|    156      |     12      |      8      |    3.2%        |\n+-------------+-------------+-------------+----------------+\n| [Repartition par dept (pie)]  [Evolution effectifs (bar)]|\n+----------------------------------------------------------+",
  "elements": ["KPICards", "PieChart", "BarChart"],
  "actions": ["filter-period", "export-report"],
  "componentMapping": [
    { "wireframeElement": "KPICards", "reactComponent": "SmartKPI" },
    { "wireframeElement": "PieChart", "reactComponent": "SmartChart" },
    { "wireframeElement": "BarChart", "reactComponent": "SmartChart" }
  ],
  "layout": {
    "type": "grid",
    "regions": ["kpi-row", "charts-row"]
  },
  "permissionsRequired": ["{AppCode}.{ModuleCode}.Read"]
}
```

### 3. Enrich screens.json with Wireframes

For each module, update screens.json to embed wireframes at the resource level:

```json
{
  "sections": [
    {
      "sectionCode": "list",
      "sectionLabel": "Liste des employes",
      "resources": [
        {
          "code": "employees-grid",
          "type": "SmartTable",
          "columns": [ /* ... */ ],
          "wireframe": {
            "mockupFormat": "ascii",
            "mockup": "...",
            "elements": [...],
            "componentMapping": [...],
            "layout": {...}
          }
        }
      ]
    }
  ]
}
```

### 4. Write Updated screens.json

Write via ba-writer for each module. Update index.json hashes.

## Consumer Contract (wireframe field names)

> **IMPORTANT:** Downstream consumers (`/business-analyse-html`) depend on these EXACT field names.
> Any rename requires updating `business-analyse-html/steps/step-02-build-data.md` (wireframe mapping).

| Field | Type | Description |
|-------|------|-------------|
| `mockupFormat` | `"ascii"` \| `"html"` | Wireframe rendering format |
| `mockup` | string | Wireframe content (ASCII art or HTML) |
| `elements` | string[] | UI element names |
| `componentMapping` | object[] | Wireframe element → React component mapping |
| `layout` | object | Layout type and regions |
| `permissionsRequired` | string[] | Permission paths needed |

> **INTERDICTION:** `componentMapping` MUST use the canonical object format:
> ```json
> [{ "wireframeElement": "FilterBar", "reactComponent": "SmartFilter" }]
> ```
> The shorthand `[{ "FilterBar": "SmartFilter" }]` is **NOT valid** and will break downstream consumers.
> Each entry MUST have both `wireframeElement` and `reactComponent` keys.

## Validation

- [ ] Every resource has a wireframe object
- [ ] Every wireframe has a non-empty `mockup` field
- [ ] Every wireframe has `elements[]` and `componentMapping[]`
- [ ] Wireframe `permissionsRequired` references valid permission paths
- [ ] All wireframes have `mockupFormat` set ("ascii" or "html")
- [ ] Every `componentMapping` entry uses canonical format (`wireframeElement` + `reactComponent` keys, no shorthand)

## Transition

-> Step 03 (navigation) — Define the complete navigation tree
