skills.rest
afsjr
afsjrCOMMUNITY
Explore all skills by this author →
GitHub

reversa-visor

Extract screens, UI components, navigation flows, and states from screenshots.

Updated Mar 31, 2026
Search Tags:#agent skills#reverse engineering#legacy systems#ui documentation#screenshot analysis#screen inventory#navigation mapping
One-click install
npx skills add https://github.com/afsjr/secretaria_escola_csm --skill reversa-visor-afsjr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-visor
Source: https://github.com/afsjr/secretaria_escola_csm/tree/main/.agents/skills/reversa-visor
Command: npx skills add https://github.com/afsjr/secretaria_escola_csm --skill reversa-visor-afsjr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of documenting a legacy system’s user interface when you cannot (or do not want to) run the system, by turning screenshots into a structured map of screens, components, navigation flows, and states.

Core Features & Use Cases

  • Screenshot-driven UI documentation: Inventories each provided screen with its purpose, state (loading/empty/filled/error/confirmation), and user entry context.
  • Component extraction: Identifies forms (fields, validations, buttons), tables/listings (columns, per-row actions, filters/pagination), navigation elements (menus, breadcrumbs, links), and feedback mechanisms (messages, modals, tooltips).
  • Navigation and state mapping: Produces navigation flow relationships across screens and distinguishes the same screen in different states; maps each screen to the appropriate unit using the configured granularity and feature/module/endpoints.
  • Output organization for discovery: Saves per-unit screenshots and generates screens.md plus global inventory.md and a Mermaid flow.md that links units.

Quick Start

Send screenshots of the system screens you want documented (start with the main screens and key navigation flows).

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 UI from screenshots without running the system?▼

You can document a legacy application UI from screenshots by extracting screens, components, and navigation flows directly from the images. This process builds a structured screen inventory without needing the system running.

What is the best way to map navigation flows and UI states from existing screenshots?▼

Mapping navigation flows and UI states from screenshots involves analyzing the images to identify relationships across screens and distinguish variations like loading, empty, or error states. This generates a visual flow map.

Can I extract forms and tables from legacy system screenshots for documentation?▼

Yes, you can extract forms and tables from legacy system screenshots. The process identifies form fields, validations, table columns, and per-row actions to produce a structured component inventory.

Do I need the application running to inventory UI components and states?▼

No, you do not need the application running to inventory UI components and states. The analysis reads directly from provided screenshots to reverse-engineer the interface without runtime access.

What output formats are generated when reverse engineering UI from screenshots?▼

Reverse engineering UI from screenshots generates per-unit screenshots, a screens.md file for detailed documentation, a global inventory.md, and a Mermaid flow.md linking the mapped units.

Related Skills

Explore More Design & Creative Skills→
AlexandrePontesjrAlexandrePontesjr

reversa-writer

Generate requirements, design, and tasks specifications from Reversa state and config files.

Community
Advanced
cliffthelincliffthelin

reversa-visor

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

Community
Intermediate
majesticlabs-devmajesticlabs-dev
47

mermaid-builder

Generate syntactically valid Mermaid diagrams for flowcharts, sequence, class, state, Gantt, ER, and data lineage.

Official
Advanced
hanzlahabibhanzlahabib
2

rcode-browser-verify

Verify live browser behavior and UI state using Chrome DevTools MCP.

Community
Advanced