skills.rest
RLuf
RLufCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

reversa-visor

Documents legacy system interfaces from screenshots by extracting components, layouts, and navigation flows.

Updated Jun 26, 2026
Search Tags:#screenshots#mermaid#specification#reverse engineering#ui documentation#legacy system#navigation flow
One-click install
npx skills add https://github.com/RLuf/fzagent --skill reversa-visor-rluf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-visor
Source: https://github.com/RLuf/fzagent/tree/main/.agents/skills/reversa-visor
Command: npx skills add https://github.com/RLuf/fzagent --skill reversa-visor-rluf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Documenting the user interface of a legacy system is slow and error-prone when done manually, especially when the system cannot be run and only screenshots are available. This Skill turns screenshots into structured UI documentation without requiring a running system. ## Core Features & Use Cases - Screen Inventory: Catalogs each screenshot with its name, purpose, state (loading, empty, filled, error), and usage context. - UI Element Extraction: Identifies forms, tables, navigation menus, and feedback elements like modals and validation messages. - Navigation Flow Mapping: Produces a Mermaid diagram of navigation flows across screens and maps each screen to a specification unit based on configurable granularity. - Use Case: A team reverse-engineering a legacy ERP sends screenshots of its main screens; the Skill organizes them per module, writes detailed screen specs, and generates a global inventory and navigation flow document. ## Quick Start Send screenshots of the legacy system's main screens and ask the agent to document the interface, mapping each screen to its specification unit.

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

Send screenshots of the system's screens to the agent, one at a time or in batches, prioritizing main screens and key flows. The Skill inventories each screen, extracts forms, tables, and navigation elements, and writes structured Markdown specs per unit.

How to map screens to specification units automatically?▼

The Skill reads the granularity setting from the reversa config file and maps each screen to a unit by module, endpoint, use case, feature, or custom folder. When mapping is ambiguous, it asks the user before saving.

Does screenshot-based UI documentation require the system to be running?▼

No, the Skill works entirely from static screenshots and does not need the legacy system to be running. It does require an AI model with image support to analyze the captures.

What output files does the UI documentation generate?▼

It saves original screenshots per unit, a screens.md spec per unit, a global inventory.md listing all screens and their units, and a flow.md with a Mermaid navigation diagram. Existing files are never overwritten; duplicates get numeric suffixes.

What are the limitations of documenting UI from screenshots only?▼

Screenshot analysis cannot reveal dynamic behavior, API contracts, or business logic behind the interface. Ambiguous screens that belong to multiple units require user confirmation, and hidden states not captured in screenshots remain undocumented.

Related Skills

Explore More Software Engineering Skills→
AlexandrePontesjrAlexandrePontesjr

reversa-visor

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

Community
Intermediate
daemgodaemgo

requirements

Convert customer intelligence and communication artifacts into structured needs documents.

Official
Advanced
ArMaTeCArMaTeC

spec-miner

Extracts specifications and requirements from existing codebases using code analysis.

Community
Intermediate
Markson22Markson22

reversa-visor

Extract UI components, layouts, and navigation flows from screenshots.

Community
Intermediate