> common-architecture-diagramming
Standards for creating clear, effective, and formalized software architecture diagrams (C4, UML). (triggers: ARCHITECTURE.md, **/*.mermaid, **/*.drawio, diagram, architecture, c4, system design, mermaid)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/common-architecture-diagramming?format=md"Architecture Diagramming Standard
Priority: P1 (Standard)
Guidelines
- Use C4 Model: Context->Container->Component->Code.
- Audience-Centric: Tailor abstraction (Execs vs. Devs).
- Select Type: Sequence (Protocol), ERD (Data), State (Lifecycle), Cloud (Infra). See Selection
- Explicit Labels: Label every arrow (e.g., "Uses", "HTTPS").
- Consistent Notation: Cylinders=DB, Rectangles=Systems, Dashed=Async.
- Metadata: Title, Date, Version, Author.
- Legend Mandatory: Define all shapes/colors/styles.
- Direction:
graph LR(Flow) orgraph TD(Hierarchy). - Deployment: Map containers to infrastructure.
- Governance: CRITICAL: Review best-practices.md before starting.
Anti-Patterns
- Mixed Levels: DB columns in System Context.
- Unlabeled Arrows: Ambiguous relations.
- Mystery Shapes: Undefined in Legend.
- Dead Ends: Unconnected nodes.
- Clutter: >20 nodes/diagram.
- Acronyms: Undefined abbreviations.
References
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)