joao-aires/visual-communication
HTML architecture diagrams and presentations.
Build responsive, theme-aware HTML architecture diagrams using CSS grid/flexbox and CSS variables. Use when the user asks to: create a system architecture diagram, map out microservices, visualize cloud infrastructure, draw a sequence diagram, model data flows, build a deployment diagram, create a state machine visualization, design a pipeline or DevOps flow, map network topology, show integration between systems, create any kind of technical diagram or visual system map. This skill should be used any time the user wants to visualize how software components, services, infrastructure, or data relate to each other — even if they don't explicitly say 'architecture diagram'. Covers structural diagrams (system, application, cloud, network, deployment), behavioral diagrams (sequence, data flow, state, pipeline), and operational diagrams (resilience, availability).
Build single-file HTML presentations with a dark theme, scroll-driven slides, responsive card grids, and reveal animations. Optional addons extend the base with features like a vertical timeline navigation. Use when the user asks to: create a presentation, build a slide deck, add or edit slides, fix slide layout or overflow issues, add timeline events, create card grids, add reveal animations, embed images or tweets, fix fullscreen rendering, or any task involving HTML presentation creation and refinement.