ci
Generate a CI/CD pipeline — build, test, security scan, deploy. Supports GitHub Actions, GitLab CI, Bitbucket Pipelines.
@khaitrang1995Install SkillDevelopment
Skill
/architecture
Generate system architecture .drawio diagrams — client, service, database, external systems with standard icons and clear connections.
Claude Code
$ npx -y skills add KhaiTrang1995/agentic-awesome-kits --skill architecture --agent claude-code
Codex
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill architecture -a codex -y
Cursor
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill architecture -a cursor -y
Gemini CLI
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill architecture -a gemini-cli -y
GitHub Copilot
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill architecture -a github-copilot -y
OpenCode
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill architecture -a opencode -y
Windsurf
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill architecture -a windsurf -y
SKILL.md
architecture.SKILL.mdname: architecture
description: Generate system architecture .drawio diagrams — client, service, database, external systems with standard icons and clear connections.
user-invocable: true
argument-hint: "<system description> [--cloud aws|azure|gcp|generic]"
/architecture — Generate Architecture Diagram (draw.io)
When to use
Visualize system architecture (microservice, layered architecture, network topology) for design docs, ADRs, or stakeholder presentations.
Input examples
/architecture TOPO system: Angular SPA → API Gateway → 3 microservices (Container, Booking, Auth) → SQL Server
/architecture --cloud azure deploy architecture: App Service, Azure SQL, Blob Storage, Front Door
/architecture integration flow with Customs system via REST API
Workflow
Phase 1 — Identify components & trust boundaries
List components by group:
- **Client**: web app, mobile app, external user (actor)
- **Edge**: load balancer, API gateway, CDN
- **Service**: backend service/microservice (process box)
- **Data**: database, cache, message queue (cylinder/tape)
- **External**: third-party system (cloud shape)
Identify trust boundaries (internet ↔ DMZ ↔ internal) — draw with container boxes `dashed=1;fillColor=none;`.
Phase 2 — Layout (L3 preview)
Print a block diagram as table/ASCII before generating XML — confirm which groups sit inside which boundaries and the data-flow direction.
Phase 3 — Generate XML
Use `_templates/architecture.drawio` as the frame:
- Default to **core shapes** (`ellipse+shape=cloud`, `shape=cylinder3`, `shape=umlActor`, `rounded=1`) — opens on any machine.
- If `--cloud aws|azure|gcp`: add matching stencils (`shape=mxgraph.aws4.*`, `shape=mxgraph.azure.*`) and **note clearly in the output** that the user must enable that shape library in draw.io.
- Group by trust boundary with surrounding container boxes.
- Primary data flow left→right or top→bottom, orthogonal arrows.
Phase 4 — Approval L1 → Write
Mandatory rules
- Every external system/3rd-party MUST be visually distinct with gray (`fillColor=#f5f5f5;strokeColor=#666666;`).
- Databases always use `shape=cylinder3` — NEVER use a rounded rectangle for storage.
- If there are > 10 components, group by layer/boundary with container boxes for readability instead of leaving all at the same level.
- Small legend in the lower corner if using > 3 color types, explaining each color.
Output
`docs/diagrams/{feature}/architecture-{slug}.drawio`
See also
Need real vendor icons (AWS/Azure/GCP, not core shapes), auto-layout for >15 components, draw from real Terraform/K8s/docker-compose, or export PNG/SVG/PDF → use `/diagram` (more powerful, requires draw.io desktop CLI).
References
- @.claude/rules/drawio-conventions.md
- @.claude/rules/naming-conventions.md
- @.claude/rules/approval-gate.md
- @_templates/architecture.drawio
- Brain: `DRAWIO-BRAIN.md`
Read more
name: architecture description: Generate system architecture .drawio diagrams — client, service, database, external systems with standard icons and clear connections. user-invocable: true argument-hint: "<system description> [--cloud aws|azure|gcp|generic]"
/architecture — Generate Architecture Diagram (draw.io)
When to use
Visualize system architecture (microservice, layered architecture, network topology) for design docs, ADRs, or stakeholder presentations.
Input examples
/architecture TOPO system: Angular SPA → API Gateway → 3 microservices (Container, Booking, Auth) → SQL Server /architecture --cloud azure deploy architecture: App Service, Azure SQL, Blob Storage, Front Door /architecture integration flow with Customs system via REST API
Workflow
Phase 1 — Identify components & trust boundaries
List components by group:
- **Client**: web app, mobile app, external user (actor)
- **Edge**: load balancer, API gateway, CDN
- **Service**: backend service/microservice (process box)
- **Data**: database, cache, message queue (cylinder/tape)
- **External**: third-party system (cloud shape)
Identify trust boundaries (internet ↔ DMZ ↔ internal) — draw with container boxes `dashed=1;fillColor=none;`.
Phase 2 — Layout (L3 preview)
Print a block diagram as table/ASCII before generating XML — confirm which groups sit inside which boundaries and the data-flow direction.
Phase 3 — Generate XML
Use `_templates/architecture.drawio` as the frame:
- Default to **core shapes** (`ellipse+shape=cloud`, `shape=cylinder3`, `shape=umlActor`, `rounded=1`) — opens on any machine.
- If `--cloud aws|azure|gcp`: add matching stencils (`shape=mxgraph.aws4.*`, `shape=mxgraph.azure.*`) and **note clearly in the output** that the user must enable that shape library in draw.io.
- Group by trust boundary with surrounding container boxes.
- Primary data flow left→right or top→bottom, orthogonal arrows.
Phase 4 — Approval L1 → Write
Mandatory rules
- Every external system/3rd-party MUST be visually distinct with gray (`fillColor=#f5f5f5;strokeColor=#666666;`).
- Databases always use `shape=cylinder3` — NEVER use a rounded rectangle for storage.
- If there are > 10 components, group by layer/boundary with container boxes for readability instead of leaving all at the same level.
- Small legend in the lower corner if using > 3 color types, explaining each color.
Output
`docs/diagrams/{feature}/architecture-{slug}.drawio`
See also
Need real vendor icons (AWS/Azure/GCP, not core shapes), auto-layout for >15 components, draw from real Terraform/K8s/docker-compose, or export PNG/SVG/PDF → use `/diagram` (more powerful, requires draw.io desktop CLI).
References
- @.claude/rules/drawio-conventions.md
- @.claude/rules/naming-conventions.md
- @.claude/rules/approval-gate.md
- @_templates/architecture.drawio
- Brain: `DRAWIO-BRAIN.md`
Stats
10
Stars
5
Forks
Maintained
Maintenance
Python
Language
Last commit
Created
Ships withagentic-awesome-kits
Reusable AI Skill Kits for coding agents (Claude Code and any other subagent/slash-command-compatible tool).
1032 skills
Stars on GitHub
Momentum
- stars in total
- 10
Other skills on agentic-awesome-kits.
@khaitrang1995Install Skillcompose
Generate docker-compose.yml — multi-service, network, volumes, healthcheck.
@khaitrang1995Install Skilldockerfile
Generate an optimized Dockerfile — multi-stage build, security hardening, small image size.
@khaitrang1995Install Skillsecret
Generate Swarm secret/config management — external secret references, versioned rotation, config mounts.
@khaitrang1995Install Skillservice
Generate or update a single Swarm service definition — scaling, resource limits, rolling update policy, health check.
@khaitrang1995Install Skillstack
Generate a Docker Swarm stack file — services, deploy policy (replicas, placement, rolling update/rollback), overlay network.
@khaitrang1995Install SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about architecture.
- Which coding agents can use architecture?
- architecture installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.