Architecture Diagram Generator
Skill GeverifieerdCreate layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.
This skill provides a rich library of HTML/CSS templates and layout configurations for creating layered system architecture diagrams. It includes a wide variety of styles and structural options, catering to different complexity levels and aesthetic preferences for technology stacks and application designs.
Documentation
- warning:Configuration & parameter referenceWhile the SKILL.md provides a good overview of styles and layouts, it lacks explicit documentation for specific parameters or configuration options that might be used within the templates, such as how to customize colors or borders beyond the provided examples.
License
- warning:License usabilityThe license is stated as GPL-3.0 in the README.md, but there is no LICENSE file or SPDX identifier in the SKILL.md frontmatter or package.json. This makes the license less formally discoverable by tools.
Versioning
- warning:Release ManagementThere is no manifest version, release tags, or CHANGELOG present, making it difficult to track updates.
Practical Utility
- info:Edge casesWhile the skill provides many examples, it does not explicitly document potential failure modes or recovery steps for specific scenarios within the SKILL.md.
Installatie
npx skills add markdown-viewer/skillsVoert de Vercel skills CLI (skills.sh) uit via npx — vereist Node.js lokaal en minstens één geïnstalleerde skills-compatibele agent (Claude Code, Cursor, Codex, …). Gaat ervan uit dat de repo het agentskills.io-formaat volgt.
Vergelijkbare extensies
Frontend Design
99Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.
Frontend Design
98Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Data Analytics Diagram Generator
95Create data pipeline and analytics architecture diagrams using PlantUML syntax with database/analytics stencil icons. Best for ETL pipelines, data lakes, real-time streaming, data warehousing, and BI dashboard design.
Infographic
95Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
RevealJS Presenter
95Generate RevealJS HTML presentations with reliable layout, professional typography, and effective visual communication. Use when creating slide decks, pitch presentations, technical talks, or any reveal.js output.
shadcn/Tailwind Layouts
95Generate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout issues', 'debug CSS height problems', 'make scrolling work', or has issues with Tailwind flex/grid. Keywords: shadcn, Tailwind, layout, CSS, flex, grid, height, scroll, overflow.