@atlashub/smartstack-cli 3.39.0 → 3.40.0

package/templates/skills/business-analyse/references/wireframe-svg-style-guide.md

@@ -1,335 +1,335 @@
-# Wireframe SVG Style Guide
-
-> **Purpose:** Self-contained specification for generating professional SVG wireframes from ASCII art.
-> This document is sent as the FULL prompt to a Sonnet Task agent alongside the ASCII wireframe.
-> Referenced by: `validate-incremental-html.md` (Step 3-bis), `step-05b-deploy.md` (Section 7-bis)
-
-## Agent Prompt Template
-
-> **USAGE:** Read this section, replace `{placeholders}` with actual wireframe data, send as the complete prompt to a Task(sonnet) agent. The agent returns ONLY the SVG markup string.
-
----
-
-You are a professional UI wireframe designer. Convert the following ASCII wireframe into a high-quality SVG wireframe that looks like a modern web application mockup.
-
-### Input
-
-**Screen name:** `{screenName}`
-**Module:** `{moduleName}`
-**Section type:** `{sectionType}` (list|detail|create|dashboard|approve)
-**ASCII wireframe:**
-```
-{asciiContent}
-```
-
-**Element metadata (if available):**
-```json
-{elementsJson}
-```
-
-### Output Requirements
-
-Return ONLY the SVG markup as a single `<svg>` element. No explanation, no markdown, no code fences.
-The SVG must be self-contained (no external fonts, no external CSS, no `<image>` tags).
-
-### Visual Design System
-
-#### Viewport & Canvas
-- `viewBox="0 0 960 {dynamicHeight}"` — width fixed at 960, height adapts to content
-- Minimum height: 540 for list views, 720 for detail views, 480 for dashboards
-- Background: `#1e293b` (dark card background matching the HTML theme)
-- 24px padding on all sides
-- Root element: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 {height}">`
-
-#### Color Palette (MUST use these exact colors)
-
-| Role | Color | Usage |
-|------|-------|-------|
-| Background | `#1e293b` | Main canvas, card backgrounds |
-| Surface | `#0f172a` | Input fields, table cells, nested panels |
-| Border | `#334155` | All borders, dividers, table lines |
-| Border light | `#475569` | Hover states, active borders |
-| Primary | `#6366f1` | Primary buttons, active tabs, selected items |
-| Primary hover | `#4f46e5` | Button hover state accent |
-| Primary light | `#818cf8` | Links, column headers, highlighted text |
-| Accent | `#06b6d4` | Secondary actions, info badges |
-| Text bright | `#e2e8f0` | Headings, table header text, important labels |
-| Text | `#b8c4d1` | Body text, table cell content |
-| Text muted | `#8a9bb0` | Placeholders, secondary labels, pagination |
-| Success | `#22c55e` | Active/approved status badges |
-| Success bg | `rgba(34,197,94,0.15)` | Status badge background |
-| Warning | `#eab308` | Pending/draft status badges |
-| Warning bg | `rgba(234,179,8,0.15)` | Status badge background |
-| Error | `#ef4444` | Error states, delete buttons |
-| Gray | `#94a3b8` | Inactive/draft status |
-| Gray bg | `rgba(100,116,139,0.15)` | Status badge background |
-| Row hover | `rgba(99,102,241,0.05)` | Table row hover |
-| Shadow | `rgba(0,0,0,0.25)` | Drop shadow for cards |
-
-#### Typography (embedded via system fonts)
-
-- Font family: `'Inter', 'Segoe UI', system-ui, sans-serif` (use `font-family` attribute on EVERY `<text>`)
-- Page title: 18px, font-weight 600, color `#e2e8f0`
-- Section heading: 14px, font-weight 600, color `#e2e8f0`
-- Table header: 11px, font-weight 600, text-transform uppercase, letter-spacing 0.05em, color `#8a9bb0`
-- Body text / table cells: 13px, font-weight 400, color `#b8c4d1`
-- Button text: 13px, font-weight 500, color `#ffffff`
-- Small text / badges: 11px, font-weight 500
-- Placeholder text: 13px, font-weight 400, color `#8a9bb0`, font-style italic
-
----
-
-### Component Patterns
-
-#### Buttons (Primary)
-```xml
-<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="#6366f1"/>
-<text x="{x+w/2}" y="{y+22}" text-anchor="middle"
-      font-family="Inter,Segoe UI,system-ui,sans-serif" font-size="13"
-      font-weight="500" fill="#ffffff">{label}</text>
-```
-
-#### Buttons (Secondary/Ghost)
-```xml
-<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="none" stroke="#334155" stroke-width="1"/>
-<text x="{x+w/2}" y="{y+22}" text-anchor="middle"
-      font-family="Inter,Segoe UI,system-ui,sans-serif" font-size="13"
-      font-weight="500" fill="#b8c4d1">{label}</text>
-```
-
-#### Input Fields
-```xml
-<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
-<text x="{x+12}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="13" fill="#8a9bb0" font-style="italic">{placeholder}</text>
-```
-
-#### Search Bar (input with magnifying glass icon)
-```xml
-<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
-<circle cx="{x+22}" cy="{y+18}" r="7" fill="none" stroke="#8a9bb0" stroke-width="1.5"/>
-<line x1="{x+27}" y1="{y+23}" x2="{x+31}" y2="{y+27}" stroke="#8a9bb0" stroke-width="1.5" stroke-linecap="round"/>
-<text x="{x+40}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="13" fill="#8a9bb0" font-style="italic">Rechercher...</text>
-```
-
-#### Dropdown / Select
-```xml
-<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
-<text x="{x+12}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="13" fill="#b8c4d1">{selectedValue}</text>
-<path d="M{x+w-24},{y+16} l6,8 l6,-8" fill="#8a9bb0"/>
-```
-
-#### Data Table
-- Header row: background `#0f172a`, text uppercase 11px, color `#8a9bb0`, letter-spacing 0.05em
-- Data rows: alternating `#1e293b` and `rgba(15,23,42,0.5)`, height 44px
-- Row hover: one sample row with `rgba(99,102,241,0.05)` fill
-- Column dividers: `stroke="#334155"` at 0.5 opacity
-- Cell padding: 16px horizontal
-- Header height: 40px
-- Action column (rightmost): 3-dot vertical ellipsis menu icon
-
-#### Status Badges
-```xml
-<!-- Active/Approved (green) -->
-<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(34,197,94,0.15)"/>
-<circle cx="{x+10}" cy="{y+11}" r="3" fill="#4ade80"/>
-<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="11" font-weight="500" fill="#4ade80">{label}</text>
-
-<!-- Pending/Warning (yellow) -->
-<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(234,179,8,0.15)"/>
-<circle cx="{x+10}" cy="{y+11}" r="3" fill="#facc15"/>
-<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="11" font-weight="500" fill="#facc15">{label}</text>
-
-<!-- Inactive/Draft (gray) -->
-<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(100,116,139,0.15)"/>
-<circle cx="{x+10}" cy="{y+11}" r="3" fill="#94a3b8"/>
-<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="11" font-weight="500" fill="#94a3b8">{label}</text>
-```
-
-#### Cards / Panels
-```xml
-<defs>
-  <filter id="shadow" x="-2%" y="-2%" width="104%" height="104%">
-    <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000000" flood-opacity="0.25"/>
-  </filter>
-</defs>
-<rect x="{x}" y="{y}" width="{w}" height="{h}" rx="12" fill="#1e293b" stroke="#334155" stroke-width="1" filter="url(#shadow)"/>
-```
-
-#### Tabs
-```xml
-<!-- Active tab -->
-<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="#6366f1"/>
-<text x="{x+w/2}" y="{y+22}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="13" font-weight="500" fill="#ffffff">{label}</text>
-
-<!-- Inactive tab -->
-<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="transparent"/>
-<text x="{x+w/2}" y="{y+22}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="13" font-weight="400" fill="#8a9bb0">{label}</text>
-```
-
-#### Pagination
-```xml
-<text x="{x}" y="{y}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="12" fill="#8a9bb0">1-25 de 142</text>
-<!-- Active page -->
-<rect x="{px}" y="{py}" width="28" height="28" rx="6" fill="#6366f1"/>
-<text x="{px+14}" y="{py+18}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="12" font-weight="500" fill="#fff">1</text>
-<!-- Inactive page -->
-<rect x="{px+32}" y="{py}" width="28" height="28" rx="6" fill="none" stroke="#334155"/>
-<text x="{px+46}" y="{py+18}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="12" fill="#8a9bb0">2</text>
-```
-
-#### KPI Cards (Dashboard)
-```xml
-<rect x="{x}" y="{y}" width="{w}" height="80" rx="8" fill="#334155"/>
-<text x="{x+w/2}" y="{y+35}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="22" font-weight="700" fill="#e2e8f0">{value}</text>
-<text x="{x+w/2}" y="{y+55}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="11" fill="#8a9bb0">{label}</text>
-```
-
-#### Chart Placeholder (Dashboard)
-```xml
-<rect x="{x}" y="{y}" width="{w}" height="180" rx="8" fill="none"
-      stroke="#334155" stroke-dasharray="6,4"/>
-<text x="{x+w/2}" y="{y+90}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="13" fill="#8a9bb0">{chartLabel}</text>
-```
-
-#### Back Button / Navigation
-```xml
-<path d="M{x},{y+10} l-8,-10 l8,-10" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<text x="{x+8}" y="{y+5}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="13" font-weight="500" fill="#818cf8">Retour a la liste</text>
-```
-
-#### Form Layout (2-column)
-```xml
-<!-- Label -->
-<text x="{x}" y="{y}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="12" font-weight="500" fill="#8a9bb0">{fieldLabel}</text>
-<!-- Input below label (12px gap) -->
-<rect x="{x}" y="{y+8}" width="{colWidth}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
-<text x="{x+12}" y="{y+33}" font-family="Inter,Segoe UI,system-ui,sans-serif"
-      font-size="13" fill="#b8c4d1">{value or placeholder}</text>
-```
-
----
-
-### Section-Specific Layout Rules
-
-**List Page Layout:**
-1. Page header (title left + primary action button right) at y=24
-2. Filter bar below header (search + dropdowns) at y=72
-3. Data table occupying remaining space at y=128
-4. Pagination bar at bottom
-
-**Detail Page Layout:**
-1. Back button + breadcrumb at y=24
-2. Entity header (code + name + status badge + action buttons) at y=60
-3. Horizontal divider at y=100
-4. Tab bar at y=112
-5. Active tab content area at y=160
-
-**Create/Edit Form Layout:**
-1. Form title at y=24
-2. Two-column grid of form fields (label above input) starting at y=64
-3. Horizontal divider before actions
-4. Cancel + Submit buttons right-aligned at bottom
-
-**Dashboard Layout:**
-1. KPI cards in a 4-column grid at y=24
-2. 2-column grid of chart placeholders at y=128
-3. Optional filter bar above KPIs
-
----
-
-### Quality Rules (MANDATORY)
-
-1. **Every `<text>` element** MUST have the `font-family` attribute set
-2. **No external dependencies** — no `<use>`, no `<image>`, no `xlink:href`
-3. **All text must be readable** — contrast ratio >=4.5:1 on its background
-4. **Consistent spacing** — 24px margin, 16px padding, 12px gap between form fields
-5. **Rounded corners everywhere** — `rx="6"` minimum for interactive elements, `rx="12"` for cards
-6. **No `<style>` blocks** — all styling via inline attributes (inline SVG in HTML can conflict with host CSS)
-7. **viewBox only, no width/height on root `<svg>`** — let the container handle sizing
-8. **Use realistic but fictional data** — French locale, Swiss franc format (12'500.00 CHF), European dates (15.01.2026)
-9. **Match the ASCII structure exactly** — same number of columns, same sections, same buttons. Do not add or remove UI elements.
-10. **Ensure table columns match** — if ASCII shows 5 columns, SVG must show exactly 5 columns with the same headers
-
----
-
-### Fallback
-
-If you cannot produce a valid SVG (e.g., ASCII is too ambiguous or malformed), return EXACTLY the string:
-```
-FALLBACK_ASCII
-```
-This signals the system to use the ASCII wireframe instead.
-
----
-
-## Orchestration Instructions
-
-> **FOR the agent executing step-03d 11-bis or step-05b**: Follow this process to generate SVGs.
-
-### Step-by-step process:
-
-1. **Read** this file to get the prompt template (the "Agent Prompt Template" section above)
-
-2. **Collect** all wireframes that need SVG:
-```javascript
-const wireframesToProcess = [];
-for (const [moduleCode, wireframes] of Object.entries(EMBEDDED_ARTIFACTS.wireframes)) {
-  for (let i = 0; i < wireframes.length; i++) {
-    const wf = wireframes[i];
-    if (wf.content && !wf.svgContent) {
-      wireframesToProcess.push({ moduleCode, index: i, wf });
-    }
-  }
-}
-```
-
-3. **Spawn parallel Task(sonnet) agents** — ONE per wireframe, ALL in a single message:
-```
-FOR EACH { moduleCode, index, wf } in wireframesToProcess:
-  Task(sonnet) prompt = this file's prompt template with substitutions:
-    {screenName}  = wf.screen
-    {moduleName}  = moduleCode
-    {sectionType} = wf.section
-    {asciiContent} = wf.content
-    {elementsJson} = JSON.stringify(wf.elements || [])
-```
-
-4. **Collect and validate** results:
-```javascript
-FOR EACH result:
-  // Strip markdown code fences if agent wrapped output
-  let svg = result.trim();
-  if (svg.startsWith('```')) {
-    svg = svg.replace(/^```(?:xml|svg|html)?\n?/, '').replace(/\n?```$/, '').trim();
-  }
-
-  IF svg starts with "<svg" AND svg contains "</svg>":
-    EMBEDDED_ARTIFACTS.wireframes[moduleCode][index].svgContent = svg
-  ELSE:
-    // Graceful fallback: leave svgContent as null
-    // HTML renders ASCII automatically
-```
-
-5. **Display summary** (non-blocking):
-```
-SVG wireframes: {generated}/{total} generated successfully
-```
-
-> **CRITICAL:** SVG generation is NEVER blocking. If all generations fail, deployment
-> proceeds with ASCII-only wireframes. SVG is an enhancement, not a requirement.
+# Wireframe SVG Style Guide
+
+> **Purpose:** Self-contained specification for generating professional SVG wireframes from ASCII art.
+> This document is sent as the FULL prompt to a Sonnet Task agent alongside the ASCII wireframe.
+> Referenced by: `validate-incremental-html.md` (Step 3-bis), `step-05b-deploy.md` (Section 7-bis)
+
+## Agent Prompt Template
+
+> **USAGE:** Read this section, replace `{placeholders}` with actual wireframe data, send as the complete prompt to a Task(sonnet) agent. The agent returns ONLY the SVG markup string.
+
+---
+
+You are a professional UI wireframe designer. Convert the following ASCII wireframe into a high-quality SVG wireframe that looks like a modern web application mockup.
+
+### Input
+
+**Screen name:** `{screenName}`
+**Module:** `{moduleName}`
+**Section type:** `{sectionType}` (list|detail|create|dashboard|approve)
+**ASCII wireframe:**
+```
+{asciiContent}
+```
+
+**Element metadata (if available):**
+```json
+{elementsJson}
+```
+
+### Output Requirements
+
+Return ONLY the SVG markup as a single `<svg>` element. No explanation, no markdown, no code fences.
+The SVG must be self-contained (no external fonts, no external CSS, no `<image>` tags).
+
+### Visual Design System
+
+#### Viewport & Canvas
+- `viewBox="0 0 960 {dynamicHeight}"` — width fixed at 960, height adapts to content
+- Minimum height: 540 for list views, 720 for detail views, 480 for dashboards
+- Background: `#1e293b` (dark card background matching the HTML theme)
+- 24px padding on all sides
+- Root element: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 {height}">`
+
+#### Color Palette (MUST use these exact colors)
+
+| Role | Color | Usage |
+|------|-------|-------|
+| Background | `#1e293b` | Main canvas, card backgrounds |
+| Surface | `#0f172a` | Input fields, table cells, nested panels |
+| Border | `#334155` | All borders, dividers, table lines |
+| Border light | `#475569` | Hover states, active borders |
+| Primary | `#6366f1` | Primary buttons, active tabs, selected items |
+| Primary hover | `#4f46e5` | Button hover state accent |
+| Primary light | `#818cf8` | Links, column headers, highlighted text |
+| Accent | `#06b6d4` | Secondary actions, info badges |
+| Text bright | `#e2e8f0` | Headings, table header text, important labels |
+| Text | `#b8c4d1` | Body text, table cell content |
+| Text muted | `#8a9bb0` | Placeholders, secondary labels, pagination |
+| Success | `#22c55e` | Active/approved status badges |
+| Success bg | `rgba(34,197,94,0.15)` | Status badge background |
+| Warning | `#eab308` | Pending/draft status badges |
+| Warning bg | `rgba(234,179,8,0.15)` | Status badge background |
+| Error | `#ef4444` | Error states, delete buttons |
+| Gray | `#94a3b8` | Inactive/draft status |
+| Gray bg | `rgba(100,116,139,0.15)` | Status badge background |
+| Row hover | `rgba(99,102,241,0.05)` | Table row hover |
+| Shadow | `rgba(0,0,0,0.25)` | Drop shadow for cards |
+
+#### Typography (embedded via system fonts)
+
+- Font family: `'Inter', 'Segoe UI', system-ui, sans-serif` (use `font-family` attribute on EVERY `<text>`)
+- Page title: 18px, font-weight 600, color `#e2e8f0`
+- Section heading: 14px, font-weight 600, color `#e2e8f0`
+- Table header: 11px, font-weight 600, text-transform uppercase, letter-spacing 0.05em, color `#8a9bb0`
+- Body text / table cells: 13px, font-weight 400, color `#b8c4d1`
+- Button text: 13px, font-weight 500, color `#ffffff`
+- Small text / badges: 11px, font-weight 500
+- Placeholder text: 13px, font-weight 400, color `#8a9bb0`, font-style italic
+
+---
+
+### Component Patterns
+
+#### Buttons (Primary)
+```xml
+<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="#6366f1"/>
+<text x="{x+w/2}" y="{y+22}" text-anchor="middle"
+      font-family="Inter,Segoe UI,system-ui,sans-serif" font-size="13"
+      font-weight="500" fill="#ffffff">{label}</text>
+```
+
+#### Buttons (Secondary/Ghost)
+```xml
+<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="none" stroke="#334155" stroke-width="1"/>
+<text x="{x+w/2}" y="{y+22}" text-anchor="middle"
+      font-family="Inter,Segoe UI,system-ui,sans-serif" font-size="13"
+      font-weight="500" fill="#b8c4d1">{label}</text>
+```
+
+#### Input Fields
+```xml
+<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+<text x="{x+12}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="13" fill="#8a9bb0" font-style="italic">{placeholder}</text>
+```
+
+#### Search Bar (input with magnifying glass icon)
+```xml
+<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+<circle cx="{x+22}" cy="{y+18}" r="7" fill="none" stroke="#8a9bb0" stroke-width="1.5"/>
+<line x1="{x+27}" y1="{y+23}" x2="{x+31}" y2="{y+27}" stroke="#8a9bb0" stroke-width="1.5" stroke-linecap="round"/>
+<text x="{x+40}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="13" fill="#8a9bb0" font-style="italic">Rechercher...</text>
+```
+
+#### Dropdown / Select
+```xml
+<rect x="{x}" y="{y}" width="{w}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+<text x="{x+12}" y="{y+25}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="13" fill="#b8c4d1">{selectedValue}</text>
+<path d="M{x+w-24},{y+16} l6,8 l6,-8" fill="#8a9bb0"/>
+```
+
+#### Data Table
+- Header row: background `#0f172a`, text uppercase 11px, color `#8a9bb0`, letter-spacing 0.05em
+- Data rows: alternating `#1e293b` and `rgba(15,23,42,0.5)`, height 44px
+- Row hover: one sample row with `rgba(99,102,241,0.05)` fill
+- Column dividers: `stroke="#334155"` at 0.5 opacity
+- Cell padding: 16px horizontal
+- Header height: 40px
+- Action column (rightmost): 3-dot vertical ellipsis menu icon
+
+#### Status Badges
+```xml
+<!-- Active/Approved (green) -->
+<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(34,197,94,0.15)"/>
+<circle cx="{x+10}" cy="{y+11}" r="3" fill="#4ade80"/>
+<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="11" font-weight="500" fill="#4ade80">{label}</text>
+
+<!-- Pending/Warning (yellow) -->
+<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(234,179,8,0.15)"/>
+<circle cx="{x+10}" cy="{y+11}" r="3" fill="#facc15"/>
+<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="11" font-weight="500" fill="#facc15">{label}</text>
+
+<!-- Inactive/Draft (gray) -->
+<rect x="{x}" y="{y}" width="{w}" height="22" rx="11" fill="rgba(100,116,139,0.15)"/>
+<circle cx="{x+10}" cy="{y+11}" r="3" fill="#94a3b8"/>
+<text x="{x+18}" y="{y+15}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="11" font-weight="500" fill="#94a3b8">{label}</text>
+```
+
+#### Cards / Panels
+```xml
+<defs>
+  <filter id="shadow" x="-2%" y="-2%" width="104%" height="104%">
+    <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000000" flood-opacity="0.25"/>
+  </filter>
+</defs>
+<rect x="{x}" y="{y}" width="{w}" height="{h}" rx="12" fill="#1e293b" stroke="#334155" stroke-width="1" filter="url(#shadow)"/>
+```
+
+#### Tabs
+```xml
+<!-- Active tab -->
+<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="#6366f1"/>
+<text x="{x+w/2}" y="{y+22}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="13" font-weight="500" fill="#ffffff">{label}</text>
+
+<!-- Inactive tab -->
+<rect x="{x}" y="{y}" width="{w}" height="36" rx="6" fill="transparent"/>
+<text x="{x+w/2}" y="{y+22}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="13" font-weight="400" fill="#8a9bb0">{label}</text>
+```
+
+#### Pagination
+```xml
+<text x="{x}" y="{y}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="12" fill="#8a9bb0">1-25 de 142</text>
+<!-- Active page -->
+<rect x="{px}" y="{py}" width="28" height="28" rx="6" fill="#6366f1"/>
+<text x="{px+14}" y="{py+18}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="12" font-weight="500" fill="#fff">1</text>
+<!-- Inactive page -->
+<rect x="{px+32}" y="{py}" width="28" height="28" rx="6" fill="none" stroke="#334155"/>
+<text x="{px+46}" y="{py+18}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="12" fill="#8a9bb0">2</text>
+```
+
+#### KPI Cards (Dashboard)
+```xml
+<rect x="{x}" y="{y}" width="{w}" height="80" rx="8" fill="#334155"/>
+<text x="{x+w/2}" y="{y+35}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="22" font-weight="700" fill="#e2e8f0">{value}</text>
+<text x="{x+w/2}" y="{y+55}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="11" fill="#8a9bb0">{label}</text>
+```
+
+#### Chart Placeholder (Dashboard)
+```xml
+<rect x="{x}" y="{y}" width="{w}" height="180" rx="8" fill="none"
+      stroke="#334155" stroke-dasharray="6,4"/>
+<text x="{x+w/2}" y="{y+90}" text-anchor="middle" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="13" fill="#8a9bb0">{chartLabel}</text>
+```
+
+#### Back Button / Navigation
+```xml
+<path d="M{x},{y+10} l-8,-10 l8,-10" fill="none" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<text x="{x+8}" y="{y+5}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="13" font-weight="500" fill="#818cf8">Retour a la liste</text>
+```
+
+#### Form Layout (2-column)
+```xml
+<!-- Label -->
+<text x="{x}" y="{y}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="12" font-weight="500" fill="#8a9bb0">{fieldLabel}</text>
+<!-- Input below label (12px gap) -->
+<rect x="{x}" y="{y+8}" width="{colWidth}" height="40" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+<text x="{x+12}" y="{y+33}" font-family="Inter,Segoe UI,system-ui,sans-serif"
+      font-size="13" fill="#b8c4d1">{value or placeholder}</text>
+```
+
+---
+
+### Section-Specific Layout Rules
+
+**List Page Layout:**
+1. Page header (title left + primary action button right) at y=24
+2. Filter bar below header (search + dropdowns) at y=72
+3. Data table occupying remaining space at y=128
+4. Pagination bar at bottom
+
+**Detail Page Layout:**
+1. Back button + breadcrumb at y=24
+2. Entity header (code + name + status badge + action buttons) at y=60
+3. Horizontal divider at y=100
+4. Tab bar at y=112
+5. Active tab content area at y=160
+
+**Create/Edit Form Layout:**
+1. Form title at y=24
+2. Two-column grid of form fields (label above input) starting at y=64
+3. Horizontal divider before actions
+4. Cancel + Submit buttons right-aligned at bottom
+
+**Dashboard Layout:**
+1. KPI cards in a 4-column grid at y=24
+2. 2-column grid of chart placeholders at y=128
+3. Optional filter bar above KPIs
+
+---
+
+### Quality Rules (MANDATORY)
+
+1. **Every `<text>` element** MUST have the `font-family` attribute set
+2. **No external dependencies** — no `<use>`, no `<image>`, no `xlink:href`
+3. **All text must be readable** — contrast ratio >=4.5:1 on its background
+4. **Consistent spacing** — 24px margin, 16px padding, 12px gap between form fields
+5. **Rounded corners everywhere** — `rx="6"` minimum for interactive elements, `rx="12"` for cards
+6. **No `<style>` blocks** — all styling via inline attributes (inline SVG in HTML can conflict with host CSS)
+7. **viewBox only, no width/height on root `<svg>`** — let the container handle sizing
+8. **Use realistic but fictional data** — French locale, Swiss franc format (12'500.00 CHF), European dates (15.01.2026)
+9. **Match the ASCII structure exactly** — same number of columns, same sections, same buttons. Do not add or remove UI elements.
+10. **Ensure table columns match** — if ASCII shows 5 columns, SVG must show exactly 5 columns with the same headers
+
+---
+
+### Fallback
+
+If you cannot produce a valid SVG (e.g., ASCII is too ambiguous or malformed), return EXACTLY the string:
+```
+FALLBACK_ASCII
+```
+This signals the system to use the ASCII wireframe instead.
+
+---
+
+## Orchestration Instructions
+
+> **FOR the agent executing step-03d 11-bis or step-05b**: Follow this process to generate SVGs.
+
+### Step-by-step process:
+
+1. **Read** this file to get the prompt template (the "Agent Prompt Template" section above)
+
+2. **Collect** all wireframes that need SVG:
+```javascript
+const wireframesToProcess = [];
+for (const [moduleCode, wireframes] of Object.entries(EMBEDDED_ARTIFACTS.wireframes)) {
+  for (let i = 0; i < wireframes.length; i++) {
+    const wf = wireframes[i];
+    if (wf.content && !wf.svgContent) {
+      wireframesToProcess.push({ moduleCode, index: i, wf });
+    }
+  }
+}
+```
+
+3. **Spawn parallel Task(sonnet) agents** — ONE per wireframe, ALL in a single message:
+```
+FOR EACH { moduleCode, index, wf } in wireframesToProcess:
+  Task(sonnet) prompt = this file's prompt template with substitutions:
+    {screenName}  = wf.screen
+    {moduleName}  = moduleCode
+    {sectionType} = wf.section
+    {asciiContent} = wf.content
+    {elementsJson} = JSON.stringify(wf.elements || [])
+```
+
+4. **Collect and validate** results:
+```javascript
+FOR EACH result:
+  // Strip markdown code fences if agent wrapped output
+  let svg = result.trim();
+  if (svg.startsWith('```')) {
+    svg = svg.replace(/^```(?:xml|svg|html)?\n?/, '').replace(/\n?```$/, '').trim();
+  }
+
+  IF svg starts with "<svg" AND svg contains "</svg>":
+    EMBEDDED_ARTIFACTS.wireframes[moduleCode][index].svgContent = svg
+  ELSE:
+    // Graceful fallback: leave svgContent as null
+    // HTML renders ASCII automatically
+```
+
+5. **Display summary** (non-blocking):
+```
+SVG wireframes: {generated}/{total} generated successfully
+```
+
+> **CRITICAL:** SVG generation is NEVER blocking. If all generations fail, deployment
+> proceeds with ASCII-only wireframes. SVG is an enhancement, not a requirement.