Verified:GitHub

reversa-visor

Extract screens, components, and navigation flows from legacy system screenshots.

Updated May 5, 2026

Search Tags:#screenshots #ui documentation #navigation mapping #reversa #state documentation #layout extraction #legacy interface

Ready to run

npx skills add https://github.com/AlexandrePontesjr/calculadora-Juridica --skill reversa-visor-alexandrepontesjr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: reversa-visor
Source: https://github.com/AlexandrePontesjr/calculadora-Juridica/tree/main/.agents/skills/reversa-visor
Command: npx skills add https://github.com/AlexandrePontesjr/calculadora-Juridica --skill reversa-visor-alexandrepontesjr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns static screenshots of a legacy system into a structured, reusable documentation of the user interface, including screens, layout details, and navigation flows, without requiring the system to be running.

Core Features & Use Cases

Screenshot-driven UI inventory: Creates an inventory of screens, their purpose, and the state each screenshot represents (loading, empty, filled, error, confirmation).
Element-level documentation: Extracts and documents form fields, tables, list actions, navigation structure, and user feedback components (toasts, modals, tooltips).
Navigation and state mapping: Maps navigation routes between screens, identifies primary/alternative flows, and records state differences across the same screen when multiple screenshots are provided.

Quick Start

Send the first set of screenshots for the legacy system screens you want documented and let the skill build the UI specs and navigation map from them.

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 interface from screenshots without runtime access?▼

To document a legacy interface from screenshots without runtime access, you can extract screens, components, and navigation flows from static images. This builds structured UI specs and state documentation for later use without requiring the system to run.

Can I map navigation flows between screens using only static images?▼

Yes, you can map navigation flows using static images by identifying primary and alternative routes between documented screens. The process maps navigation routes and records state differences across the same screen when multiple screenshots are provided.

What is the best way to extract form fields and UI elements from legacy system screenshots?▼

The best way to extract form fields and UI elements from legacy screenshots is element-level documentation. This process extracts and documents form fields, tables, list actions, navigation structures, and user feedback components like toasts and modals.

Does UI documentation from screenshots require reading configuration files?▼

Yes, UI documentation from screenshots requires reading Reversa configuration files. These files determine the output folder and documentation granularity before producing per-unit screenshots storage, spec files, global inventory, and Mermaid flow outputs.

How do I track loading and error states for legacy UI documentation?▼

To track loading and error states for legacy UI documentation, capture multiple screenshots of the same screen. The process records the state each screenshot represents, including loading, empty, filled, error, and confirmation states.