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

reversa-arquitetura-3d

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ajuda a entender e comunicar a estrutura de um sistema de software tornando arquitetura e dependências visualmente exploráveis em 3D, reduzindo a dificuldade de interpretar módulos, camadas e fluxos complexos.

Core Features & Use Cases

  • Code City: visualização de arquivos como prédios por pastas, destacando tamanho (LOC), complexidade e hot paths.
  • Dependency Graph 3D: grafo orientado com simulação de força em 3D para revelar acoplamento, módulos centrais e ciclos.
  • Layer Stack: empilhamento vertical de camadas arquiteturais com detecção e destaque de violações entre camadas.
  • Call Graph 3D: árvore radial 3D de chamadas, permitindo investigar profundidade, assíncronos e recursão.
  • Architecture Tour: tour cinematográfico sobreposto a qualquer modo, com waypoints e overlay narrativo.

Quick Start

Use a skill reversa-arquitetura-3d para gerar um HTML standalone que visualize seu projeto como Code City, usando modules.json e deps.json fornecidos por você.

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 from JSON data?▼

3D architecture visualization maps module and dependency JSON data into interactive formats like Code City and dependency graphs using Three.js, making complex software structures visually explorable for analysis and stakeholder communication.

What is a Code City visualization and how does it show software dependencies?▼

A Code City visualization renders software files as 3D buildings grouped by folders, scaling them by size and complexity to highlight hot paths and structural coupling for architectural analysis.

Can I generate standalone HTML for 3D call graph visualization without an internet connection?▼

Yes, the generator produces standalone HTML for 3D call graph visualization using a local Three.js offline-first strategy, embedding all data inline to ensure the file works without an internet connection.

Does 3D layer stack visualization help detect architectural layer violations?▼

Yes, 3D layer stack visualization detects architectural layer violations by vertically stacking layers and automatically highlighting dependencies that incorrectly cross restricted architectural boundaries.

How do I render large dependency graphs in Three.js without performance issues?▼

To render large dependency graphs without performance issues, the visualization applies InstancedMesh and automatic grouping techniques, ensuring smooth interactivity while handling complex software structures.

What is the best way to communicate software architecture to stakeholders?▼

The best way to communicate software architecture to stakeholders is generating an interactive 3D visualization with a cinematic Architecture Tour overlay, using waypoints and narrative context to explain complex system structures.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-arquitetura-3d

Render interactive 3D software architecture visualizations from modules.json and deps.json.

Community
Advanced
ricardops34ricardops34

reversa-arquitetura-3d

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

Community
Advanced
CuriousLearnerCuriousLearner
27

complexity-analyzer

Measure code complexity metrics and identify high-complexity areas in software projects.

Community
Advanced
stribusstribus
1

reversa-especialista-d3

Generate standalone HTML visualizations from D3.js data models.

Community
Advanced