skills.rest
ricardops34
ricardops34COMMUNITY
Explore all skills by this author →
WebsiteGitHub

reversa-arquitetura-3d

Generate standalone HTML 3D architecture visualizations from JSON inputs using Three.js.

Updated May 16, 2026
Search Tags:#three.js#call graph#dependency graph#architecture visualization#reverse engineering#standalone html#layer violations
One-click install
npx skills add https://github.com/ricardops34/rcg-crm --skill reversa-arquitetura-3d
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reversa-arquitetura-3d
Source: https://github.com/ricardops34/rcg-crm/tree/main/.agents/skills/reversa-arquitetura-3d
Command: npx skills add https://github.com/ricardops34/rcg-crm --skill reversa-arquitetura-3d

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The skill turns complex software structure (modules, dependencies, layers, and call flows) into an interactive 3D visualization that you can explore to understand system architecture faster.

Core Features & Use Cases

  • Code City: represent each file as a “building” with height and footprint to show size and complexity distribution by folder.
  • Dependency Graph 3D: render an oriented dependency graph in 3D with force-directed layout to reveal central modules, coupling, and cycles.
  • Layer Stack 3D: stack architectural layers vertically and highlight inter-layer dependency violations (clean architecture style).
  • Call Graph 3D: visualize execution/call trees in depth (Z axis) with node types (sync/async/external) and optional flow animation.
  • Architecture Tour: create an animated camera walkthrough with narrative overlays and optional mode switching for stakeholder-friendly demos.

Quick Start

Use the skill to generate a standalone HTML 3D architecture view for your project by providing modules.json and deps.json (or only the one you have) and selecting the mode that matches your question.

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 in 3D to understand dependency structure and layer violations?▼

You can visualize software architecture in 3D by providing JSON inputs for modules and oriented dependency graphs to generate a standalone HTML file. This interactive visualization uses Three.js to map code size, dependency structure, and layer compliance for architectural exploration.

Can I generate an interactive dependency graph 3D model from JSON data?▼

Yes, you can generate an interactive dependency graph 3D model from JSON data. The tool renders an oriented dependency graph with a force-directed layout to reveal central modules, coupling, and cycles in a standalone HTML format.

What is the best way to detect clean architecture layer violations in a codebase?▼

The best way to detect clean architecture layer violations is by generating a Layer Stack 3D visualization. It stacks architectural layers vertically and explicitly highlights inter-layer dependency violations for immediate architectural compliance review.

Does this architecture visualization tool work offline without external web dependencies?▼

Yes, the architecture visualization works offline without external web dependencies. It uses Three.js with offline-first local vendor assets when available to generate a standalone HTML file that you can open directly in any browser.

How do I create a presentation-ready animated tour of my software architecture?▼

You can create a presentation-ready animated tour of your software architecture using the Architecture Tour mode. It generates an animated camera walkthrough with narrative overlays and optional mode switching for stakeholder-friendly demos.

What JSON format do I need to provide for mapping a call graph in 3D?▼

To map a call graph in 3D, you need to provide JSON inputs representing your modules and oriented dependency graphs. The tool then visualizes execution and call trees in depth along the Z axis with node types and optional flow animation.

Related Skills

Explore More Software Engineering Skills→
RdindaRdinda
1

reversa-arquitetura-3d

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

Community
Advanced
afsjrafsjr

reversa-arquitetura-3d

Generate standalone HTML 3D architecture visualizations from module and dependency JSON data.

Community
Advanced
bejranondabejranonda
27

code-analysis

Analyze code complexity and detect code smells in multi-language codebases.

Community
Basic
stribusstribus
1

reversa-especialista-d3

Generate standalone HTML visualizations from D3.js data models.

Community
Advanced