| 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:
gates.grilling: passed.- For code mode, every seam this change will touch is
harness: green.
- 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
- 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).
- 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.
- Cut the cruft. Remove features/inputs that accumulated over time and no longer
carry meaning (confirm against
requirements-grilling scope). Simplify screens for
directness.
- 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.
- 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.
- 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.
- 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>
