skills.rest
tjsasakifln
tjsasakiflnCOMMUNITY
Explore all skills by this author →
GitHub

reversa-visor

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

1|Updated Jul 10, 2026
Search Tags:#screenshots#specification#reverse engineering#ui documentation#interface analysis#legacy system#navigation flow
One-click install
npx skills add https://github.com/tjsasakifln/extra-cli --skill reversa-visor-tjsasakifln
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-visor
Source: https://github.com/tjsasakifln/extra-cli/tree/main/.agents/skills/reversa-visor
Command: npx skills add https://github.com/tjsasakifln/extra-cli --skill reversa-visor-tjsasakifln

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Reverse-engineering a legacy system's UI normally requires running the application, which is often impossible. This Skill documents the interface purely from user-provided screenshots, producing structured specs without any live system access. ## Core Features & Use Cases - Screen Inventory: Catalogs each screenshot with its purpose, state (loading, empty, filled, error), and usage context. - UI Element Extraction: Captures forms, tables, navigation, and feedback elements from each screen image. - Flow Mapping: Builds a Mermaid navigation flow diagram across screens and maps each screen to a spec unit based on configured granularity. - Use Case: A team modernizing a legacy ERP sends screenshots of its main screens; the Skill produces per-unit screens.md specs, a global inventory.md, and a flow.md navigation diagram for the reverse-engineering documentation. ## Quick Start Send screenshots of the legacy system's main screens and ask the agent to document the interface and map each screen to its spec 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 without running it?▼

Provide screenshots of the system's screens to the agent, which inventories each screen, extracts forms, tables, navigation, and feedback elements, and writes per-unit screens.md specs plus a global inventory and Mermaid flow diagram.

What output files does screenshot-based UI documentation generate?▼

It saves original screenshots under each unit's screenshots folder, a screens.md spec per unit, plus global inventory.md and flow.md files in the ui folder of the configured output directory.

Does this Skill require the legacy system to be running?▼

No. It works entirely from static screenshots, so the legacy system does not need to be executed or even accessible. Image support in the model is required.

How are screens mapped to specification units?▼

Mapping follows the granularity setting in .reversa/config.toml: module, endpoint, use-case, hybrid, feature, or custom folders. Ambiguous mappings are confirmed with the user before saving.

What happens if I send the same screenshot twice?▼

The Skill is non-destructive: it never overwrites existing screenshots or specs. Duplicate screens are saved with a numeric suffix such as tela-2.png.

Related Skills

Explore More Software Engineering Skills→
lacsousalacsousa

reversa-visor

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

Community
Intermediate
Helcio-NogueiraHelcio-Nogueira

reversa-visor

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

Community
Intermediate
legioncodeinclegioncodeinc
72

mcp-tool-docs-stinger

Document MCP tools, TypeScript APIs, and CLI commands from source code.

Official
Advanced
FilenCloudDiensteFilenCloudDienste
34

argent-create-flow

Record and replay MCP tool call sequences as YAML flow files.

Official
Intermediate