skills.rest
Rdinda
RdindaCOMMUNITY
Explore all skills by this author →
GitHub

reversa-arquitetura-3d

Generate standalone interactive 3D HTML visualizations of software architecture from module and dependency inputs.

1|Updated Dec 20, 2025
Search Tags:#three.js#software-architecture#layering#call-graph#dependency-graph#3d-visualization#standalone-html
One-click install
npx skills add https://github.com/Rdinda/FMA_Pontos --skill reversa-arquitetura-3d-rdinda
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-arquitetura-3d
Source: https://github.com/Rdinda/FMA_Pontos/tree/main/.agents/skills/reversa-arquitetura-3d
Command: npx skills add https://github.com/Rdinda/FMA_Pontos --skill reversa-arquitetura-3d-rdinda

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The skill turns complex software architecture and dependency structures into an interactive 3D view, making it easier to understand modules, layers, and call flows without reading large codebases.

Core Features & Use Cases

  • Code City: Visualize each file as a building (LOC and complexity drive height/shape) grouped by folders for an immediate size/structure overview.
  • Dependency Graph 3D: Render an oriented dependency graph with force-based 3D layout to reveal central modules, coupling, and cycles.
  • Layer Stack 3D: Stack architectural layers vertically (UI/Domain/Infra) and highlight cross-layer violations (e.g., lower importing higher).
  • Call Graph 3D: Explore function call trees in depth with node types (sync/async/external/recursive) and weighted edges (frequency).
  • Architecture Tour: Create a cinematic camera walkthrough with narrative overlays that can switch modes mid-tour.
  • Standalone HTML export: Always generates a complete offline-friendly HTML file for sharing and presentations.

Quick Start

Use reversa-arquitetura-3d to generate a standalone interactive 3D HTML visualization of your system by describing the desired mode (Code City, Dependency Graph, Layer Stack, Call Graph, or Architecture Tour) and providing modules.json and deps.json (or the tour waypoints).

Frequently Asked Questions about reversa-arquitetura-3d

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

FAQPage Schema
How do I visualize software architecture and module dependencies in 3D?▼

The Skill renders interactive 3D software architecture visualizations like Code City or dependency graphs using Three.js, mapping module hierarchy and coupling to spatial structures and outputting a standalone HTML file.

What is a Code City visualization and how does it show file complexity?▼

A Code City visualization represents files as 3D buildings grouped by folders, using lines of code and complexity metrics to determine building height and shape for an immediate structural overview of your codebase.

Can I generate a standalone offline HTML file for my 3D dependency graph?▼

Yes, the tool always outputs a complete standalone HTML file with pinned Three.js and local OrbitControls patterns, safely embedding input JSON data without local fetch so you can share and present the 3D visualization offline.

How do I detect layer violations in a 3D architectural stack?▼

You detect layer violations by rendering a Layer Stack 3D that stacks architectural layers vertically and visually highlights cross-layer violations where lower layers improperly import higher ones.

Does the 3D call graph visualization handle large codebases with many function calls?▼

Yes, it handles large graphs deterministically via instancing and grouping, rendering function call trees with node types like sync, async, or recursive, and weighted edges indicating call frequency.

What is the best way to present a system walkthrough using 3D architecture visualization?▼

The best way is to generate an Architecture Tour, which provides a cinematic camera walkthrough with narrative overlays that can switch visualization modes mid-tour to guide viewers through the system.

Related Skills

Explore More Software Engineering Skills→
manuelbrandner85manuelbrandner85

diagramming-code

Generate Mermaid diagrams from Trailmark code graphs.

Community
Intermediate
AnandaAnugrahHandyantoAnandaAnugrahHandyanto

p5js

Generate p5.js sketches from prompts and export them as HTML, PNG, GIF, MP4, or SVG.

Community
Advanced
mbwsimsmbwsims
71

hotspots

Identify high-risk files in a codebase using churn, complexity, and coupling.

Community
Intermediate
stribusstribus
1

reversa-especialista-d3

Generate standalone HTML visualizations from D3.js data models.

Community
Advanced