@bovinphang/frontend-craft 2.8.0 → 2.9.0

package/skills/fec-code-smells/references/smell-to-refactoring-map.md

@@ -0,0 +1,265 @@
+# Smell-to-Refactoring Map
+
+Candidate techniques are advisory. Select by observed cause, preconditions, risk, and the smallest safe transformation; never reduce diagnosis to keyword lookup.
+
+## SMELL-MYSTERIOUS-NAME — Mysterious Name
+
+**Primary/Supporting Candidates**
+- `RF-CHANGE-FUNCTION-DECLARATION`
+- `RF-RENAME-VARIABLE`
+- `RF-RENAME-FIELD`
+
+**Selection Note**
+- Confirm the diagnosed cause of Mysterious Name and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-DUPLICATED-CODE — Duplicated Code
+
+**Primary/Supporting Candidates**
+- `RF-EXTRACT-FUNCTION`
+- `RF-SLIDE-STATEMENTS`
+- `RF-PULL-UP-METHOD`
+
+**Selection Note**
+- Confirm the diagnosed cause of Duplicated Code and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-LONG-FUNCTION — Long Function
+
+**Primary/Supporting Candidates**
+- `RF-EXTRACT-FUNCTION`
+- `RF-REPLACE-TEMP-WITH-QUERY`
+- `RF-INTRODUCE-PARAMETER-OBJECT`
+- `RF-PRESERVE-WHOLE-OBJECT`
+- `RF-REPLACE-FUNCTION-WITH-COMMAND`
+- `RF-DECOMPOSE-CONDITIONAL`
+- `RF-REPLACE-CONDITIONAL-WITH-POLYMORPHISM`
+- `RF-SPLIT-LOOP`
+
+**Selection Note**
+- Confirm the diagnosed cause of Long Function and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-LONG-PARAMETER-LIST — Long Parameter List
+
+**Primary/Supporting Candidates**
+- `RF-REPLACE-PARAMETER-WITH-QUERY`
+- `RF-PRESERVE-WHOLE-OBJECT`
+- `RF-INTRODUCE-PARAMETER-OBJECT`
+- `RF-REMOVE-FLAG-ARGUMENT`
+- `RF-COMBINE-FUNCTIONS-INTO-CLASS`
+
+**Selection Note**
+- Confirm the diagnosed cause of Long Parameter List and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-GLOBAL-DATA — Global Data
+
+**Primary/Supporting Candidates**
+- `RF-ENCAPSULATE-VARIABLE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Global Data and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-MUTABLE-DATA — Mutable Data
+
+**Primary/Supporting Candidates**
+- `RF-ENCAPSULATE-VARIABLE`
+- `RF-SPLIT-VARIABLE`
+- `RF-SLIDE-STATEMENTS`
+- `RF-EXTRACT-FUNCTION`
+- `RF-SEPARATE-QUERY-FROM-MODIFIER`
+- `RF-REMOVE-SETTING-METHOD`
+- `RF-REPLACE-DERIVED-VARIABLE-WITH-QUERY`
+- `RF-COMBINE-FUNCTIONS-INTO-CLASS`
+- `RF-COMBINE-FUNCTIONS-INTO-TRANSFORM`
+- `RF-CHANGE-REFERENCE-TO-VALUE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Mutable Data and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-DIVERGENT-CHANGE — Divergent Change
+
+**Primary/Supporting Candidates**
+- `RF-SPLIT-PHASE`
+- `RF-MOVE-FUNCTION`
+- `RF-EXTRACT-FUNCTION`
+- `RF-EXTRACT-CLASS`
+
+**Selection Note**
+- Confirm the diagnosed cause of Divergent Change and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-SHOTGUN-SURGERY — Shotgun Surgery
+
+**Primary/Supporting Candidates**
+- `RF-MOVE-FUNCTION`
+- `RF-MOVE-FIELD`
+- `RF-COMBINE-FUNCTIONS-INTO-CLASS`
+- `RF-COMBINE-FUNCTIONS-INTO-TRANSFORM`
+- `RF-SPLIT-PHASE`
+- `RF-INLINE-FUNCTION`
+- `RF-INLINE-CLASS`
+
+**Selection Note**
+- Confirm the diagnosed cause of Shotgun Surgery and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-FEATURE-ENVY — Feature Envy
+
+**Primary/Supporting Candidates**
+- `RF-MOVE-FUNCTION`
+- `RF-EXTRACT-FUNCTION`
+
+**Selection Note**
+- Confirm the diagnosed cause of Feature Envy and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-DATA-CLUMPS — Data Clumps
+
+**Primary/Supporting Candidates**
+- `RF-EXTRACT-CLASS`
+- `RF-INTRODUCE-PARAMETER-OBJECT`
+- `RF-PRESERVE-WHOLE-OBJECT`
+
+**Selection Note**
+- Confirm the diagnosed cause of Data Clumps and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-PRIMITIVE-OBSESSION — Primitive Obsession
+
+**Primary/Supporting Candidates**
+- `RF-REPLACE-PRIMITIVE-WITH-OBJECT`
+- `RF-REPLACE-TYPE-CODE-WITH-SUBCLASSES`
+- `RF-REPLACE-CONDITIONAL-WITH-POLYMORPHISM`
+- `RF-EXTRACT-CLASS`
+- `RF-INTRODUCE-PARAMETER-OBJECT`
+
+**Selection Note**
+- Confirm the diagnosed cause of Primitive Obsession and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-REPEATED-SWITCHES — Repeated Switches
+
+**Primary/Supporting Candidates**
+- `RF-REPLACE-CONDITIONAL-WITH-POLYMORPHISM`
+
+**Selection Note**
+- Confirm the diagnosed cause of Repeated Switches and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-LOOPS — Loops
+
+**Primary/Supporting Candidates**
+- `RF-REPLACE-LOOP-WITH-PIPELINE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Loops and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-LAZY-ELEMENT — Lazy Element
+
+**Primary/Supporting Candidates**
+- `RF-INLINE-FUNCTION`
+- `RF-INLINE-CLASS`
+- `RF-COLLAPSE-HIERARCHY`
+
+**Selection Note**
+- Confirm the diagnosed cause of Lazy Element and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-SPECULATIVE-GENERALITY — Speculative Generality
+
+**Primary/Supporting Candidates**
+- `RF-COLLAPSE-HIERARCHY`
+- `RF-INLINE-FUNCTION`
+- `RF-INLINE-CLASS`
+- `RF-CHANGE-FUNCTION-DECLARATION`
+- `RF-REMOVE-DEAD-CODE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Speculative Generality and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-TEMPORARY-FIELD — Temporary Field
+
+**Primary/Supporting Candidates**
+- `RF-EXTRACT-CLASS`
+- `RF-MOVE-FUNCTION`
+- `RF-INTRODUCE-SPECIAL-CASE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Temporary Field and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-MESSAGE-CHAINS — Message Chains
+
+**Primary/Supporting Candidates**
+- `RF-HIDE-DELEGATE`
+- `RF-EXTRACT-FUNCTION`
+- `RF-MOVE-FUNCTION`
+
+**Selection Note**
+- Confirm the diagnosed cause of Message Chains and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-MIDDLE-MAN — Middle Man
+
+**Primary/Supporting Candidates**
+- `RF-REMOVE-MIDDLE-MAN`
+- `RF-INLINE-FUNCTION`
+- `RF-REPLACE-SUPERCLASS-WITH-DELEGATE`
+- `RF-REPLACE-SUBCLASS-WITH-DELEGATE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Middle Man and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-INSIDER-TRADING — Insider Trading
+
+**Primary/Supporting Candidates**
+- `RF-MOVE-FUNCTION`
+- `RF-MOVE-FIELD`
+- `RF-HIDE-DELEGATE`
+- `RF-REPLACE-SUBCLASS-WITH-DELEGATE`
+- `RF-REPLACE-SUPERCLASS-WITH-DELEGATE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Insider Trading and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-LARGE-CLASS — Large Class
+
+**Primary/Supporting Candidates**
+- `RF-EXTRACT-CLASS`
+- `RF-EXTRACT-SUPERCLASS`
+- `RF-REPLACE-TYPE-CODE-WITH-SUBCLASSES`
+
+**Selection Note**
+- Confirm the diagnosed cause of Large Class and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-ALTERNATIVE-CLASSES-DIFFERENT-INTERFACES — Alternative Classes with Different Interfaces
+
+**Primary/Supporting Candidates**
+- `RF-CHANGE-FUNCTION-DECLARATION`
+- `RF-MOVE-FUNCTION`
+- `RF-EXTRACT-SUPERCLASS`
+
+**Selection Note**
+- Confirm the diagnosed cause of Alternative Classes with Different Interfaces and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-DATA-CLASS — Data Class
+
+**Primary/Supporting Candidates**
+- `RF-ENCAPSULATE-RECORD`
+- `RF-REMOVE-SETTING-METHOD`
+- `RF-MOVE-FUNCTION`
+- `RF-EXTRACT-FUNCTION`
+- `RF-SPLIT-PHASE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Data Class and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-REFUSED-BEQUEST — Refused Bequest
+
+**Primary/Supporting Candidates**
+- `RF-PUSH-DOWN-METHOD`
+- `RF-PUSH-DOWN-FIELD`
+- `RF-REPLACE-SUBCLASS-WITH-DELEGATE`
+- `RF-REPLACE-SUPERCLASS-WITH-DELEGATE`
+
+**Selection Note**
+- Confirm the diagnosed cause of Refused Bequest and choose only a technique whose preconditions fit the current ownership and behavior contract.
+
+## SMELL-COMMENTS — Comments
+
+**Primary/Supporting Candidates**
+- `RF-EXTRACT-FUNCTION`
+- `RF-CHANGE-FUNCTION-DECLARATION`
+- `RF-INTRODUCE-ASSERTION`
+
+**Selection Note**
+- Confirm the diagnosed cause of Comments and choose only a technique whose preconditions fit the current ownership and behavior contract.

package/skills/fec-data-fetching/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: fec-data-fetching
-description: Use when implementing or reviewing frontend server-state flows: typed queries, request caching, invalidation, mutations, optimistic updates, infinite queries, prefetch, SSR hydration, or API-layer integration. Do not use for local UI state or Service Worker caching; Chinese triggers include data fetch, cache, optimistic updates.
+description: "Use when implementing or reviewing frontend server-state flows: typed queries, request caching, invalidation, mutations, optimistic updates, infinite queries, prefetch, SSR hydration, or API-layer integration. Do not use for local UI state or Service Worker caching; Chinese triggers include data fetch, cache, optimistic updates."
 ---
 
 # Server State data acquisition

package/skills/fec-image-generation/SKILL.md

@@ -14,7 +14,7 @@ Generate or edit diagrams, visual assets, and image workflows, and perform revie
 1. Determine product type
    - When accuracy of text, structure, and connections is a priority, use Mermaid, SVG, HTML/CSS, canvas, or a graphics library to generate editable sources and then export as PNG.
    - Use HTML technical diagrams when the user needs a browser-ready single file with dark/light theme support for system blueprints, architecture, deployment topology, agent runtime, memory flow, before-after architecture, workflow, sequence, data-flow, lifecycle, runbook, state-machine, or PII/data-lineage diagrams.
-   - Use the HTML `workflow` route for process maps, approvals, automation runs, exception paths, and cyclical operating flows that need readable start/end, decision, actor, numbered-step, and summary treatment without requiring diagrams.net.
+   - Use the compatible HTML `workflow` route when Mermaid is unavailable or browser-specific lane/style delivery is required for process maps, approvals, automation runs, exception paths, and cyclical operating flows that need readable start/end, decision, actor, numbered-step, and summary treatment without requiring diagrams.net.
    - Use themed HTML technical diagrams when a system, agent, memory, data, or tool-call map needs semantic node shapes, flow-aware arrows, and a browser-ready source that can still be exported and QA-checked.
    - Use the interactive live diagram route when the user benefits from watching nodes and edges appear incrementally in a local browser, or when they want to drag, relabel, remove, zoom, and export a quick diagram during the session.
    - When aesthetics, texture, photos, illustrations, comics, product images or brand atmosphere are priorities, use image generation or editing tools, and then save the final assets to the project or report directory.
@@ -79,3 +79,33 @@ Generate or edit diagrams, visual assets, and image workflows, and perform revie
 ## Expected Output
 
 Produce editable source, final PNG or edited image with generated routes and QA results. Diagrams should be clearly structured, with uncensored labels and uncluttered connections; visual assets should match purpose, size, brand tone, and delivery path.
+
+
+## Technical diagram quality and tool routing
+
+Prefer locally installed Mermaid for standard sequence diagrams and flowcharts. Reuse fec-drawio-studio for architecture that needs long-term manual editing; local Graphviz is optional for dense topology. Record unavailable tools and fall back to the compatible JSON/HTML route without installation, downloads or CDN. Preserve complete text and every node/relationship; do not silently rearrange explicit sizes, coordinates or waypoints.
+
+```sh
+node skills/fec-image-generation/scripts/mermaid-render.mjs --input sequence.mmd --output sequence.svg --report sequence.render.json
+node skills/fec-image-generation/scripts/export-diagram.mjs --input diagram.html --format png --output diagram.png --theme light --scale 2 --manifest diagram.layout.json --output-manifest diagram.actual.json
+node skills/fec-image-generation/scripts/png-qa.mjs --png diagram.png --manifest diagram.actual.json --format json
+```
+
+Use the exported actual manifest for PNG QA. The source manifest has SVG coordinates and estimated bounds and cannot be reused unchanged at 2x. Browser export waits for fonts and measures real text bounds; standalone SVG embeds theme styles. Successful rendering, estimates and passing automation do not prove visual acceptance. Inspect the final PNG and record tool versions, theme, scale, repair rounds, unresolved issues and partial acceptance. Higher resolution cannot repair truncated text or layout collisions.
+
+Bundled internal modules and reproducible fixtures:
+- [mermaid-render.mjs](scripts/mermaid-render.mjs)
+- [diagram-layout.mjs](scripts/diagram-layout.mjs)
+- [diagram-browser.mjs](scripts/diagram-browser.mjs)
+- [quality examples](assets/quality-examples/README.md)
+- [sequence.json](assets/quality-examples/sequence.json)
+- [workflow.json](assets/quality-examples/workflow.json)
+- [architecture.json](assets/quality-examples/architecture.json)
+- [sequence.mmd](assets/quality-examples/sequence.mmd)
+- [workflow.mmd](assets/quality-examples/workflow.mmd)
+
+The built-in sequence route supports participants and ordered messages. Use Mermaid for activations, alt/loop/par fragments and complex async semantics; never silently simplify them into plain messages. Enable optional ELK only when the installed Mermaid version supports it, otherwise use its compatible default layout.
+
+- [invalid-explicit.json](assets/quality-examples/invalid-explicit.json)
+
+- [png-qa.mjs](scripts/png-qa.mjs)

package/skills/fec-image-generation/assets/quality-examples/README.md

@@ -0,0 +1,14 @@
+# Diagram quality examples
+
+The JSON fixtures cover sequence self calls, workflow decisions and loops, and architecture groups with reverse/data/async edges. The Mermaid sources are equivalent text-first examples for standard sequence/workflow rendering. Preserve their labels and relationships when changing layout.
+
+```sh
+node skills/fec-image-generation/scripts/tech-diagram-render.mjs --input skills/fec-image-generation/assets/quality-examples/workflow.json --type workflow --output workflow.html --manifest workflow.layout.json
+node skills/fec-image-generation/scripts/export-diagram.mjs --input workflow.html --format png --output workflow.png --theme light --scale 2 --manifest workflow.layout.json --output-manifest workflow.actual.json
+node skills/fec-image-generation/scripts/png-qa.mjs --png workflow.png --manifest workflow.actual.json --format json
+node skills/fec-image-generation/scripts/mermaid-render.mjs --input skills/fec-image-generation/assets/quality-examples/sequence.mmd --output sequence.svg --report sequence.render.json
+```
+
+Use a local Chromium browser for PNG; set FEC_BROWSER_PATH to its executable when detection fails. Mermaid needs an already installed mmdc; no automatic install or CDN is used. Missing Mermaid must be recorded as unavailable and the HTML route selected. Architecture editing uses the existing fec-drawio-studio skill when available, otherwise the JSON/HTML fixture. Graphviz is optional for dense topology and is not installed automatically.
+
+Inspect final PNGs at intended reading size. Check node text against shape interiors, edge labels against arrowheads, branch/return directions, loop visibility, group boundaries and light/dark contrast. Run at 1x and 2x and inspect both. Geometry QA is evidence, not a substitute for visual review. Small explicit node sizes, overlapping explicit coordinates or obstructed explicit waypoints are reported; change the source with user intent preserved. Limit automatic source repairs to two rounds (five only when requested), and report partial acceptance if unresolved.

package/skills/fec-image-generation/assets/quality-examples/architecture.json

@@ -0,0 +1,121 @@
+{
+  "schema_version": 1,
+  "diagram_type": "architecture",
+  "meta": {
+    "title": "Platform layers and trust boundaries"
+  },
+  "visual": {
+    "style": "minimal"
+  },
+  "groups": [
+    {
+      "id": "private",
+      "label": "Trusted network / business and data services",
+      "x": 360,
+      "y": 70,
+      "width": 920,
+      "height": 470,
+      "type": "security"
+    }
+  ],
+  "nodes": [
+    {
+      "id": "web",
+      "label": "Browser application",
+      "sublabel": "External entry",
+      "type": "browser",
+      "x": 70,
+      "y": 160,
+      "width": 200,
+      "height": 112
+    },
+    {
+      "id": "gateway",
+      "label": "Identity and request routing gateway",
+      "type": "gateway",
+      "x": 420,
+      "y": 150,
+      "width": 220,
+      "height": 112,
+      "group": "private"
+    },
+    {
+      "id": "service",
+      "label": "Order query and approval service",
+      "type": "backend",
+      "x": 760,
+      "y": 150,
+      "width": 220,
+      "height": 112,
+      "group": "private"
+    },
+    {
+      "id": "cache",
+      "label": "Short-lived query cache",
+      "type": "memory",
+      "x": 420,
+      "y": 370,
+      "width": 220,
+      "height": 112,
+      "group": "private"
+    },
+    {
+      "id": "db",
+      "label": "Order and approval database",
+      "type": "database",
+      "x": 760,
+      "y": 370,
+      "width": 220,
+      "height": 112,
+      "group": "private"
+    },
+    {
+      "id": "queue",
+      "label": "Async tasks and notification queue",
+      "type": "queue",
+      "x": 1060,
+      "y": 370,
+      "width": 180,
+      "height": 112,
+      "group": "private"
+    }
+  ],
+  "connections": [
+    {
+      "from": "web",
+      "to": "gateway",
+      "label": "Authentication request",
+      "flow": "control"
+    },
+    {
+      "from": "gateway",
+      "to": "service",
+      "label": "Validated request",
+      "flow": "control"
+    },
+    {
+      "from": "service",
+      "to": "gateway",
+      "label": "Query response",
+      "flow": "data"
+    },
+    {
+      "from": "service",
+      "to": "cache",
+      "label": "Read cache",
+      "flow": "read"
+    },
+    {
+      "from": "service",
+      "to": "db",
+      "label": "Query records",
+      "flow": "read"
+    },
+    {
+      "from": "service",
+      "to": "queue",
+      "label": "Submit notification task",
+      "flow": "async"
+    }
+  ]
+}

package/skills/fec-image-generation/assets/quality-examples/invalid-explicit.json

@@ -0,0 +1,41 @@
+{
+  "schema_version": 1,
+  "diagram_type": "architecture",
+  "meta": {
+    "title": "Expected diagnostics"
+  },
+  "nodes": [
+    {
+      "id": "tiny",
+      "label": "A complete long label that cannot fit explicit size",
+      "x": -12,
+      "y": 40,
+      "width": 48,
+      "height": 24
+    },
+    {
+      "id": "overlap",
+      "label": "Overlap",
+      "x": 20,
+      "y": 44,
+      "width": 100,
+      "height": 60
+    }
+  ],
+  "connections": [
+    {
+      "from": "tiny",
+      "to": "overlap",
+      "waypoints": [
+        [
+          30,
+          50
+        ],
+        [
+          800,
+          -20
+        ]
+      ]
+    }
+  ]
+}

package/skills/fec-image-generation/assets/quality-examples/sequence.json

@@ -0,0 +1,53 @@
+{
+  "schema_version": 1,
+  "diagram_type": "sequence",
+  "meta": {
+    "title": "Order query and cache refill"
+  },
+  "participants": [
+    {
+      "id": "client",
+      "label": "Browser client",
+      "type": "frontend"
+    },
+    {
+      "id": "api",
+      "label": "Order service API",
+      "type": "backend"
+    },
+    {
+      "id": "db",
+      "label": "Persistent database",
+      "type": "database"
+    }
+  ],
+  "messages": [
+    {
+      "from": "client",
+      "to": "api",
+      "label": "Query order details and current payment status"
+    },
+    {
+      "from": "api",
+      "to": "api",
+      "label": "Validate identity and order access"
+    },
+    {
+      "from": "api",
+      "to": "db",
+      "label": "Cache miss: read order records"
+    },
+    {
+      "from": "db",
+      "to": "api",
+      "label": "Return order records and payment status",
+      "variant": "return"
+    },
+    {
+      "from": "api",
+      "to": "client",
+      "label": "Return results and update the page",
+      "variant": "return"
+    }
+  ]
+}

package/skills/fec-image-generation/assets/quality-examples/sequence.mmd

@@ -0,0 +1,21 @@
+sequenceDiagram
+ participant Web as Browser client
+ participant API as Order service API
+ participant DB as Persistent database
+ Web->>API: Query order details and current payment status
+ API->>API: Validate identity and order access
+ API->>DB: Cache miss: read order records
+ DB-->>API: Return order records and payment status
+ API-->>Web: Return results and update the page
+
+ activate API
+ alt Cache hit
+ API-->>Web: Return cached result
+ else Cache miss
+ loop Retry failed query
+ API->>DB: Read records
+ DB-->>API: Return result
+ end
+ end
+ API-)Web: Async update notification
+ deactivate API

package/skills/fec-image-generation/assets/quality-examples/workflow.json

@@ -0,0 +1,98 @@
+{
+  "schema_version": 1,
+  "diagram_type": "workflow",
+  "meta": {
+    "title": "Order approval and recovery"
+  },
+  "lanes": [
+    {
+      "id": "user",
+      "label": "User submission"
+    },
+    {
+      "id": "ops",
+      "label": "Approval and handling"
+    },
+    {
+      "id": "sys",
+      "label": "System execution"
+    }
+  ],
+  "nodes": [
+    {
+      "id": "start",
+      "lane": "user",
+      "col": 0,
+      "label": "Submit order request",
+      "type": "start"
+    },
+    {
+      "id": "check",
+      "lane": "ops",
+      "col": 1,
+      "label": "Check order completeness and approval eligibility",
+      "type": "decision"
+    },
+    {
+      "id": "approve",
+      "lane": "ops",
+      "col": 2,
+      "label": "Review manually and record the decision",
+      "type": "backend"
+    },
+    {
+      "id": "retry",
+      "lane": "user",
+      "col": 1,
+      "label": "Add missing evidence and resubmit",
+      "type": "waiting"
+    },
+    {
+      "id": "save",
+      "lane": "sys",
+      "col": 3,
+      "label": "Save approval and notify the applicant asynchronously",
+      "type": "database"
+    },
+    {
+      "id": "done",
+      "lane": "sys",
+      "col": 4,
+      "label": "Completed",
+      "type": "success"
+    }
+  ],
+  "edges": [
+    {
+      "from": "start",
+      "to": "check",
+      "label": "Submit for review"
+    },
+    {
+      "from": "check",
+      "to": "approve",
+      "label": "Complete information"
+    },
+    {
+      "from": "check",
+      "to": "retry",
+      "label": "More evidence needed",
+      "variant": "dashed"
+    },
+    {
+      "from": "retry",
+      "to": "check",
+      "label": "Review again"
+    },
+    {
+      "from": "approve",
+      "to": "save",
+      "label": "Approved"
+    },
+    {
+      "from": "save",
+      "to": "done",
+      "label": "Notification sent"
+    }
+  ]
+}

package/skills/fec-image-generation/assets/quality-examples/workflow.mmd

@@ -0,0 +1,7 @@
+flowchart TD
+ A([Submit order request]) --> B{Check order completeness and approval eligibility}
+ B -->|Complete information| C[Review manually and record the decision]
+ B -->|More evidence needed| D[Add missing evidence and resubmit]
+ D -->|Review again| B
+ C -->|Approved| E[(Save approval and notify the applicant asynchronously)]
+ E -->|Notification sent| F([Completed])