reversa-visor

Extract screen states, interface elements, and navigation flow from screenshots into Markdown and Mermaid files.

Updated May 13, 2026
One-click install
npx skills add https://github.com/cliffthelin/AXiomEngine --skill reversa-visor-cliffthelin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: reversa-visor
Source: https://github.com/cliffthelin/AXiomEngine/tree/main/skills/reversa/reversa-visor
Command: npx skills add https://github.com/cliffthelin/AXiomEngine --skill reversa-visor-cliffthelin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reversa-visor helps you document a legacy application's user interface from screenshots so you can extract screen structure, components, and navigation without needing the system to be running.

Core Features & Use Cases

  • Screen inventory from images: Captures each screen’s purpose, state (loading/empty/error/etc.), and how the user reached it.
  • Interface element extraction: Documents forms (fields, validations, buttons), tables (columns, row actions, pagination/filters), and feedback UI (messages, modals, confirmations, tooltips).
  • Navigation flow mapping: Reconstructs main and alternative routes between screens and builds a unit-traversing flow output for later design/implementation.
  • Unit mapping by configuration: Assigns each screen to the most appropriate unit using granularity rules sourced from .reversa/config.toml and optional .reversa/config.user.toml, then writes per-unit screens.md plus global inventory.md and flow.md.

Quick Start

Provide the relevant screenshots of the application screens and flows, and tell the Visor to document the interface and map each screen into units based on your .reversa configuration.

Frequently Asked Questions about reversa-visor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I document a legacy application's UI from screenshots when the system cannot be run?

You can document a legacy application's UI from screenshots by extracting screen states, interface elements, and navigation flow. This process builds audit-defensible Context-as-Code outputs directly from visual evidence without needing the live system.

What is the best way to map navigation flow and screen inventory from existing application images?

Mapping navigation flow from images involves reconstructing main and alternative routes between screens. The process produces a global inventory file and a Mermaid flow diagram to visualize the unit-traversing flow for later design.

Can I extract interface elements like form fields and table columns directly from UI screenshots?

Yes, you can extract interface elements from UI screenshots. The documentation process captures form fields, validations, buttons, table columns, row actions, pagination, and feedback UI like modals and tooltips directly from the provided images.

Do I need a configuration file to organize extracted screens into units for modernization workflows?

Yes, you need a configuration file to organize extracted screens into units. Screen assignment uses granularity rules sourced from a `.reversa/config.toml` file, optionally overridden by `.reversa/config.user.toml`, to generate per-unit documentation.

How does the tool handle ambiguous screen mappings or existing files during UI documentation?

The tool handles ambiguous screen mappings by requesting clarification on unclear unit assignments. It preserves existing existing files during generation, ensuring no data is overwritten while appending new screen documentation, inventory, and flow outputs.