common-accessibility
Enforce WCAG 2.2 AA compliance with semantic HTML, ARIA roles, keyboard navigation, and color contrast standards for web UIs. Use…
Standardizes high-level design (HLD) and architecture documents for engineering managers, delivery managers, and client product owners. Governs section structure, decision ownership, dataflow arrow directions, top-to-bottom system topology, module boundaries, ETL option
Claude Code
$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill system-design-document --agent claude-code
Codex
$ npx skills add hoangnguyen0403/agent-skills-standard --skill system-design-document -a codex -y
Cursor
$ npx skills add hoangnguyen0403/agent-skills-standard --skill system-design-document -a cursor -y
Gemini CLI
$ npx skills add hoangnguyen0403/agent-skills-standard --skill system-design-document -a gemini-cli -y
GitHub Copilot
$ npx skills add hoangnguyen0403/agent-skills-standard --skill system-design-document -a github-copilot -y
OpenCode
$ npx skills add hoangnguyen0403/agent-skills-standard --skill system-design-document -a opencode -y
Windsurf
$ npx skills add hoangnguyen0403/agent-skills-standard --skill system-design-document -a windsurf -y
name: system-design-document
description: "Standardizes high-level design (HLD) and architecture documents for engineering managers, delivery managers, and client product owners. Governs section structure, decision ownership, dataflow arrow directions, top-to-bottom system topology, module boundaries, ETL option comparisons, sign-off criteria, and docx/pdf export rules. Use when writing, structuring, or revising an architecture document, HLD, or solution options comparison."
metadata:
triggers:
files:
- "docs/**/*-design.md"
- "docs/superpowers/specs/*.md"
keywords:
- hld
- high level design
- architecture document
- design document
- solution options
- option comparison
- etl options
- architecture review commentsSets the standard for HLD and architecture documents handed to reviewers (engineering manager, delivery manager, client PO). Complements [system-design-methodology](../system-design-methodology/SKILL.md) and [system-design-review](../system-design-review/SKILL.md).
1. **Resolved items leave the list**: Once an open question is answered, move it to Decisions (with evidence). The Open items / Sign-offs section keeps ONLY items needing a named person's agreement as "Agree that..." rows, never open questions. 2. **Declared decision owners**: "Made by" column uses ONLY declared parties (`Vendor`, `Client technical team`, `Client product owner team`, mapped to real names). NEVER "my call", "user", "AI", or role guesses. Credit Client only if decided in discussion; pending choices go to sign-offs. 3. **Data movement arrows**: Arrows show direction of data flow (`source -> job -> staging -> store`), never ownership or "who reads". Label every arrow. NEVER draw an arrow entering a system the design only reads from. 4. **Top-to-bottom HLD**: One top-to-bottom diagram: users -> frontend -> backend (one cross-cutting identity/access layer in front of business modules, then data stores) -> outside systems along the bottom. Maximum ~15 boxes; detail goes to separate diagrams. 5. **Module boundaries & single identity**: One module per capability; no catch-alls ("Schedule", "Common", "Manager"). Authentication and authorization form ONE identity & access layer drawn once in front of all modules, not duplicated. Include a screen/feature -> module table (1:1 mapping). 6. **Solution options parity**: Each option gets its own small diagram with the same shape (`sources -> job -> staging -> store`), a short note, and one unified comparison table sharing identical rows. Recommended option first; fallbacks in stated order with rationale. Include a "verified in repo vs assumed" evidence list. 7. **Configuration vs admin UI**: State explicitly whether settings are hardcoded vendor config files or admin screens; never leave administration implicit. 8. **Revision note**: Document header records version, date, and specific reviewer comments that prompted revisions. 9. **Export integrity (docx/pdf)**: Tables require explicit borders, fixed layout (`w:tblLayout`), content-based column widths fitting the longest word, repeat header row (`w:tblHeader`), and `w:cantSplit`. Blank line before every list in Markdown. Page break before architecture if diagram is tall. Keep Mermaid source beside exported PNG. Visually inspect rendered tables and diagrams before delivery. 10. **Canonical section order**: Follow the 13-section structure in [document template](references/document-template.md).
1. **Intake & Scope**: Capture intent (goals, non-goals, anti-goals), client prerequisites, and revision notes citing reviewer feedback. 2. **Options & Trade-offs**: Model data/ETL options with uniform diagram shapes and comparison criteria; record repo-verified vs assumed facts. 3. **Topology & Boundaries**: Draft top-to-bottom HLD (<=15 boxes), single identity layer, single-purpose modules, and 1:1 screen mapping. 4. **Decisions & Sign-offs**: Assign declared owners to decisions; phrase pending agreements as "Agree that..." rows. 5. **Format & Verify**: Apply export checklist, render docx/pdf, and inspect visual layout before delivery.
The portable standards layer for AI coding agents. Sync once, then work in your own runtime.
Enforce WCAG 2.2 AA compliance with semantic HTML, ARIA roles, keyboard navigation, and color contrast standards for web UIs. Use…
Define deterministic guardrails for agent tool calls — protected paths, test-file locks during bug fixes, post-edit formatters,…
Apply REST API conventions — HTTP semantics, status codes, versioning, pagination, and OpenAPI standards for any framework. Use…
Audit structural debt, logic leakage, and monolithic components across Web, Mobile, and Backend codebases. Use when reviewing…
Draws architecture diagrams as editable draw.io files with a fixed house style, C4 levels, evidence-tagged shapes, and optional…
Enforce SOLID principles, guard-clause style, function size limits, and intention-revealing naming across all languages. Use when…
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
Ask which skill or flow fits your situation. A router over the skills in this repo.