ux-modernization

name	ux-modernization
description	Use to modernize a legacy web UI/UX — collapse scroll/popup-heavy, multi-screen flows into a single coherent flow, remove accumulated dead features, and design a realtime operations dashboard. Requires the harness gate to be green before changing behavior.

UX Modernization

Turn a fragmented, scroll-and-popup legacy UI into clear single-flow experiences. Behavior changes here require a green behavior-harness, test-authoring, web-action-testing, and strict-code-review. Use figma-design-review as an optional human design-review path when the project requests Figma, visual sign-off, or an existing Figma baseline.

When to use

• After the harness gate passes, for frontend/UX work.
• Prefer invoking through renovate-orchestrator. If invoked directly, run the state check below first.

First action: verify renovation state

Before any code work, read plan.md and confirm:

1. gates.grilling: passed.
2. For code mode, every seam this change will touch is harness: green.
3. For UX code mode, requested/claimed Figma review is resolved: figma_design: approved when the change requests Figma review or claims a Figma URL/frame as an implementation baseline; figma_design: not_used is valid only when no Figma review was requested and no Figma baseline is claimed.

If a gate is unmet, stop and route to behavior-harness (or renovate-orchestrator). Design mode (flow mapping, wireframes, removed-feature analysis) may proceed after grilling without the harness; code mode (implementing the flow, deleting features) may not. Figma design work itself is design mode. It blocks implementation only for changes that explicitly request or claim a Figma baseline.

Method

1. Map the current flow (from legacy-discovery): count screen transitions and popups per task. Target the worst offenders (e.g. author → review → approve → result spread across separate screens).
2. Redesign to a single flow. Reconstruct the message author→approve→send→result journey as one continuous flow with inline context, not popups. Fewer transitions, fewer interruptions.
3. Cut the cruft. Remove features/inputs that accumulated over time and no longer carry meaning (confirm against requirements-grilling scope). Simplify screens for directness.
4. Design the operations dashboard. Realtime send-status + system state (process, session connections) in one view — replacing VM-console checks and after-the-fact statistics-only visibility.
5. Optionally get human design review in Figma. Invoke figma-design-review when the user asks for Figma, stakeholders require visual sign-off, or a Figma frame is the intended implementation baseline. Otherwise record figma_design: not_used.
6. Handoff code mode to frontend-code-implementation. That skill discovers the actual package/route/component boundaries, writes tests first, makes the focused code change, and records implementation evidence.
7. Validate with real browser actions. Invoke web-action-testing after each UX prototype/code slice to click through the actual flow, capture screenshots/traces, and feed Blocker/Major findings back into this skill before review.

Design artifacts

• docs/renovation/05-ux/ — flow diagrams (before/after), wireframes, component inventory, removed-feature log with rationale.

Staged goals (30 / 60 / 100)

• 30: UX redesign direction + single-flow design + dashboard concept (design only).
• 60: core single-flow (author→approve→result) implemented; dead features removed; realtime send-status data-link pilot wired into the UI.
• 100: full web modernization; integrated realtime + system-status ops dashboard.

Gates

• Requires: harness green.
• Produces code → invoke frontend-code-implementation, which requires test-authoring, then web-action-testing and strict-code-review.
• UX code mode → if Figma review is requested or a Figma baseline is claimed, open Blocker/Major Figma comments must be resolved or explicitly accepted before implementation. If Figma is not used, record figma_design: not_used.
• UX code mode → must pass web-action-testing before strict-code-review; Blocker and Major browser-action findings must be fixed or explicitly accepted.

Transition

Coordinate with strangler-backend for data/behavior it depends on; feed AI-surface touchpoints to ai-augmentation. For UX code mode, invoke frontend-code-implementation before web-action-testing, then loop through it until real browser action findings are closed. If browser-action results reveal problems against a Figma baseline, return to figma-design-review; otherwise return to ux-modernization. Then hand the change to strict-code-review.

Output template and helper script

• Korean template: OUTPUT_TEMPLATE.md
• Scaffold script: scripts/create-ux-doc.sh <repo-root> <target-name>