architecture

The architecture skill generates layered system architecture diagrams using embedded HTML and CSS templates directly within Markdown documents. It is designed to help users visualize complex software systems, technology stacks, microservices topologies, and multi-tier application architectures in a structured and visually organized way. By combining semantic layer organization, grid-based layouts, and flexible column structures, the skill enables clear communication of technical systems without relying on external diagramming tools. The approach focuses on producing diagrams that remain portable, editable, and compatible with Markdown-based workflows.

The skill supports multiple layout strategies, including single-column, two-column, and three-column structures depending on system complexity. It emphasizes semantic organization through dedicated layers such as User, Application, AI/Logic, Data, and Infrastructure, each with consistent visual meaning and color coding. Additional guidance includes direct HTML embedding rules, continuous HTML structures without empty lines, and incremental diagram construction to reduce parsing issues and improve maintainability. The skill also provides multiple visual styles, such as Steel Blue, Neon Dark, Ocean Teal, and Dusk Glow, allowing users to adapt the diagram appearance to different audiences, industries, or presentation contexts.

This skill is well suited for software architects, technical writers, engineering teams, consultants, and developers who need to communicate system designs in documentation, proposals, technical reports, or presentations. Common use cases include illustrating cloud infrastructure, mapping enterprise application layers, documenting microservices environments, and presenting platform architectures for stakeholders. It is especially useful in environments where Markdown-based documentation and embedded HTML rendering are already part of the workflow.