c4-architecture
Generate architecture documentation using C4 model Mermaid diagrams.
Skill by ZiadNagar
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/ziadnagar-c4-architecture
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: documents, frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions: not checked yet.
What's inside
- Skill name
c4-architecture- Description
- Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".
- License
- unknown
- Metadata
- authors: Ziad Elnagar
- Instructions
- 292 lines in SKILL.md · view on GitHub
Files (5)
- README.md
- SKILL.md
- advanced-patterns.md · references/
- c4-syntax.md · references/
- common-mistakes.md · references/
The license isn't open source, so the instructions aren't shown here. Read SKILL.md on GitHub
More from ZiadNagar/zeVillage-AI-Toolkit
- 0.474score
astro
ZiadNagar
Skill for building with the Astro web framework.
SkillCFreshness: CClaude Code +9 - 0.469score
animation-systems
ZiadNagar
Use this skill when designing a motion design system — defining duration scales, easing tokens, choreography patterns, performance budgets, and reduced-motion…
SkillCFreshness: CClaude Code +9 - 0.469score
copywriting
ZiadNagar
Use this skill when writing conversion-focused web copy — headlines, subheadlines, CTAs, body copy, microcopy, email sequences, product descriptions, and…
SkillCFreshness: CClaude Code +9 - 0.469score
css-alpha-masking
ZiadNagar
Use this skill when creating content fade effects, vignettes, or scroll indicators using CSS mask-image with linear-gradient alpha masking.
SkillCFreshness: CClaude Code +9 - 0.469score
animejs
ZiadNagar
Use this skill when building web animations with Anime.js v4 — tweens, timelines, stagger effects, scroll-driven animation, SVG line drawing, and draggable…
SkillCFreshness: CClaude Code +9 - 0.469score
css-border-gradient
ZiadNagar
Use this skill when creating gradient borders on elements using the pseudo-element mask technique or border-image approach in CSS.
SkillCFreshness: CClaude Code +9 - 0.469score
cobejs-globe
ZiadNagar
Use this skill when building lightweight interactive WebGL globe visualizations with cobe.js — marker placement, auto-rotation, responsive sizing, and…
SkillCFreshness: CClaude Code +9 - 0.469score
design-system-patterns
ZiadNagar
Use this skill when building design system architecture, defining token hierarchies, implementing theme switching, or creating variant-based component APIs.
SkillCFreshness: CClaude Code +9 - 0.461score
analytics-tracking
ZiadNagar
Use this skill when implementing analytics and tracking — GA4 setup, event taxonomy, conversion tracking, Google Tag Manager, dataLayer, UTM strategies…
SkillCFreshness: CClaude Code +9 - 0.445score
canvas-design
ZiadNagar
Create beautiful visual art in .png and .pdf documents using design philosophy.
SkillCFreshness: CClaude Code +9 - 0.445score
algorithmic-art
ZiadNagar
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.
SkillCFreshness: CClaude Code +9 - 0.445score
api-design
ZiadNagar
Use this skill when the user asks to design a REST API, create API endpoints, write an OpenAPI/Swagger specification, design a GraphQL schema, plan API…
SkillCFreshness: CClaude Code +9
Signals
- Stars
- 0
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Apr 30, 2026 (6 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- License unknown
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
Same skill elsewhere
Copies of this SKILL.md published by others; search shows only one of them.
- 0.555score
c4-architecture
manu14357
Generate architecture documentation using C4 model Mermaid diagrams.
SkillCFreshness: C★ 16Claude Code +9 - 0.339score
c4-architecture
dushyantkhosla
Generate architecture documentation using C4 model Mermaid diagrams.
SkillAFreshness: AClaude Code +9 - 0.278score
c4-architecture
Microck
Generate architecture documentation using C4 model Mermaid diagrams.
SkillDFreshness: D★ 5Claude Code +9 - 0.269score
c4-architecture
RamonsDka
Generate architecture documentation using C4 model Mermaid diagrams.
SkillDFreshness: D★ 2Claude Code +9 - 0.266score
c4-architecture
fefogarcia
Generate architecture documentation using C4 model Mermaid diagrams.
SkillDFreshness: D★ 2Claude Code +9
More from ZiadNagar
- 0.474score
astro
ZiadNagar
Skill for building with the Astro web framework.
SkillCFreshness: CClaude Code +9 - 0.469score
animation-systems
ZiadNagar
Use this skill when designing a motion design system — defining duration scales, easing tokens, choreography patterns, performance budgets, and reduced-motion…
SkillCFreshness: CClaude Code +9 - 0.469score
animejs
ZiadNagar
Use this skill when building web animations with Anime.js v4 — tweens, timelines, stagger effects, scroll-driven animation, SVG line drawing, and draggable…
SkillCFreshness: CClaude Code +9 - 0.469score
cobejs-globe
ZiadNagar
Use this skill when building lightweight interactive WebGL globe visualizations with cobe.js — marker placement, auto-rotation, responsive sizing, and…
SkillCFreshness: CClaude Code +9 - 0.469score
copywriting
ZiadNagar
Use this skill when writing conversion-focused web copy — headlines, subheadlines, CTAs, body copy, microcopy, email sequences, product descriptions, and…
SkillCFreshness: CClaude Code +9 - 0.469score
css-alpha-masking
ZiadNagar
Use this skill when creating content fade effects, vignettes, or scroll indicators using CSS mask-image with linear-gradient alpha masking.
SkillCFreshness: CClaude Code +9
Cite this page
c4-architecture skill. Agent Mart. https://agentmart.dev/skills/ziadnagar-c4-architecture (last updated 2026-10-24)