reversa-visor

Extract screens, states, and UI elements from screenshots into Reversa units.

1.5k|383|Updated Apr 26, 2026
One-click install
npx skills add https://github.com/sandeco/reversa --skill reversa-visor-sandeco
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: reversa-visor
Source: https://github.com/sandeco/reversa/tree/main/agents/reversa-visor
Command: npx skills add https://github.com/sandeco/reversa --skill reversa-visor-sandeco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts legacy system UI screenshots into usable, traceable operational specifications for AI agents, removing the need to run the system to understand its screens and flows.

Core Features & Use Cases

  • Screenshot-to-Spec Documentation: Extract screen purpose, states, UI elements (forms, tables, navigation, feedback), and map them into the Reversa unit structure.
  • Navigation & Flow Mapping: Identify entry/exit points and translate navigation paths across units into an inventory and Mermaid flow.
  • Granularity-Aware Unit Assignment: Map each screen to the correct unit based on granularity (module/endpoint/use-case/hybrid/feature/custom) using .reversa/state.json, .reversa/config*.toml, and .reversa/context/surface.json.

Quick Start

Use the reversa-visor to document your legacy app interface from screenshots by uploading the most important screens first (prioritize main flows).

Frequently Asked Questions about reversa-visor

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

FAQPage Schema
How do I extract UI specifications from legacy system screenshots?

To extract UI specifications from legacy screenshots, the tool documents screen purpose, states, UI elements, and maps each screen to the correct Reversa unit. It generates traceable inventory and Mermaid flow files for AI agents using visual evidence.

Can I generate navigation flow documentation without running the legacy application?

Yes, you can generate navigation flow documentation without running the application. The tool identifies entry and exit points from screenshots and translates navigation paths across units into a Mermaid flow.

What is reverse documentation for legacy modernization?

Reverse documentation for legacy modernization is the process of deriving operational contracts from visual evidence. It extracts screens, states, and navigation flows from UI screenshots to create agent-ready specifications.

How do I map UI screenshots to a specific module or feature unit?

To map UI screenshots to a specific module or feature unit, the tool reads configuration from .reversa/state.json and .reversa/context/surface.json. It assigns screens based on defined granularity levels.

Do I need .reversa configuration files to document legacy UI screens?

Yes, you need .reversa configuration files to document legacy UI screens. The tool reads mapping configuration from .reversa/config*.toml and state.json to correctly assign units and save screenshots non-destructively.

What is the best way to document legacy UI screens for AI agents?

The best way to document legacy UI screens for AI agents is uploading the most important screens first to prioritize main flows. The tool extracts operational contracts and generates inventory.md and flow.md for traceable discovery.