diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f73b626..45c4c34 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -26,6 +26,9 @@ jobs: with: python-version: "3.11" + - name: Verify accessible SVG contract + run: python3 scripts/test-lint-a11y.py + - name: Run skin linter run: python3 scripts/lint-skin.py --all --baseline diff --git a/README.md b/README.md index fb0acc0..c56e453 100644 --- a/README.md +++ b/README.md @@ -166,6 +166,10 @@ Every new diagram now uses your colors. Your website's paper color becomes the d Before writing tokens, the skill verifies WCAG AA contrast on `ink` over `paper`. If your site has a color that fails contrast at diagram sizes (9–12px), it proposes an adjusted value and explains why. +### Accessible by default + +Every diagram template gives the inline SVG an accessible name and description: `role="img"`, a resolving `aria-labelledby`, and first-child `` / `<desc>` slots. IDs are prefixed per diagram and variant, so multiple SVG exports can be safely inlined on one page without duplicate accessible-name IDs. Decorative specimen icons are hidden from assistive technology instead. + ### Manual override Prefer to set tokens by hand? Open [`skills/diagram-design/references/style-guide.md`](skills/diagram-design/references/style-guide.md) and edit the table. Everything downstream reads from there — all 27 diagrams, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#eb6c36`). @@ -336,6 +340,8 @@ This keeps the agent's working context tight (only load what you need) and makes Before submitting a new example, run `python3 scripts/lint-skin.py <your-new-example.html>`. The repository-wide check `python3 scripts/lint-skin.py --all --baseline` must stay green. +The linter's `a11y` category rejects diagram SVGs without a resolving accessible name, +an empty or misplaced title/description, or unsafe bare `title` / `desc` IDs. If you touch the draw.io import path, `python3 scripts/verify-drawio-import.py` must also pass — it drives the real extractor against `scripts/fixtures/sample-architecture.drawio` in all four container formats and checks the references stay in sync. diff --git a/scripts/build-icons.py b/scripts/build-icons.py index 1da01fc..b191b2a 100644 --- a/scripts/build-icons.py +++ b/scripts/build-icons.py @@ -218,7 +218,7 @@ def normalize_tabler(raw: str) -> str: body = re.sub(r'<path\s+stroke="none"[^/]*?/>', "", body) body = re.sub(r"\s+", " ", body).strip() return ( - '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" ' + '<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" ' 'stroke="currentColor" stroke-width="1.5" stroke-linecap="round" ' f'stroke-linejoin="round">{body}</svg>' ) @@ -232,7 +232,7 @@ def normalize_simple(raw: str) -> str: body = inner.group(1).strip() body = re.sub(r"\s+", " ", body).strip() return ( - '<svg width="24" height="24" viewBox="0 0 24 24" ' + '<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" ' f'fill="currentColor">{body}</svg>' ) @@ -284,7 +284,7 @@ def normalize_url(raw: str) -> str: body = re.sub(r'\bfill="none"', '', body) body = re.sub(r"\s+", " ", body).strip() return ( - f'<svg width="24" height="24" viewBox="{viewbox}" ' + f'<svg aria-hidden="true" width="24" height="24" viewBox="{viewbox}" ' f'fill="currentColor">{body}</svg>' ) @@ -303,7 +303,7 @@ def normalize_devicon(raw: str) -> str: body = re.sub(r'\bclass="[^"]*"', 'fill="currentColor"', body) body = re.sub(r"\s+", " ", body).strip() return ( - '<svg width="24" height="24" viewBox="0 0 128 128" ' + '<svg aria-hidden="true" width="24" height="24" viewBox="0 0 128 128" ' f'fill="currentColor">{body}</svg>' ) @@ -320,7 +320,7 @@ def normalize_logz(raw: str) -> str: body = re.sub(r'\bfill="#[0-9a-fA-F]{3,8}"', 'fill="currentColor"', body) body = re.sub(r"\s+", " ", body).strip() return ( - '<svg width="24" height="24" viewBox="0 0 100 100" ' + '<svg aria-hidden="true" width="24" height="24" viewBox="0 0 100 100" ' f'fill="currentColor">{body}</svg>' ) diff --git a/scripts/lint-skin.py b/scripts/lint-skin.py index 1662501..c2c3154 100644 --- a/scripts/lint-skin.py +++ b/scripts/lint-skin.py @@ -8,6 +8,8 @@ skin. Use ``--all --baseline`` to skip those documented legacy files. import argparse import re import sys +from dataclasses import dataclass, field +from html.parser import HTMLParser from pathlib import Path @@ -50,6 +52,244 @@ ALLOWED_FONTS = { CSS_FONT_KEYWORDS = {"inherit", "initial", "revert", "revert-layer", "unset"} +@dataclass +class SvgTextElement: + tag: str + element_id: str | None + line: int + offset: int + text: list[str] = field(default_factory=list) + + +@dataclass +class SvgElement: + attrs: dict[str, str | None] + line: int + offset: int + content_depth: int + first_child: str | None = None + ids: set[str] = field(default_factory=set) + bare_id_locations: list[tuple[int, int]] = field(default_factory=list) + titles: list[SvgTextElement] = field(default_factory=list) + descriptions: list[SvgTextElement] = field(default_factory=list) + + +class AccessibleSvgParser(HTMLParser): + """Collect accessible-name data without rendering or executing HTML. + + Trust boundary: input files are untrusted source text. ``HTMLParser`` only + tokenizes that text; this linter never evaluates scripts, fetches URLs, or + opens referenced resources. + """ + + def __init__(self, text): + super().__init__(convert_charrefs=True) + self.line_offsets = [0] + self.line_offsets.extend( + match.end() for match in re.finditer(r"\n", text) + ) + self.element_stack = [] + self.svg_stack = [] + self.svgs = [] + self.open_text = [] + self.id_locations = {} + + def source_offset(self): + line, column = self.getpos() + return self.line_offsets[line - 1] + column + + def handle_starttag(self, tag, attrs): + tag = tag.casefold() + attr_map = {name.casefold(): value for name, value in attrs} + offset = self.source_offset() + line, _column = self.getpos() + element_id = attr_map.get("id") + if element_id: + self.id_locations.setdefault(element_id, []).append((line, offset)) + + if self.svg_stack: + parent = self.svg_stack[-1] + if len(self.element_stack) == parent.content_depth: + if parent.first_child is None: + parent.first_child = tag + if element_id: + for svg in self.svg_stack: + svg.ids.add(element_id) + if element_id in {"title", "desc"}: + svg.bare_id_locations.append((line, offset)) + + if tag == "svg": + svg = SvgElement( + attrs=attr_map, + line=line, + offset=offset, + content_depth=len(self.element_stack) + 1, + ) + self.svgs.append(svg) + self.svg_stack.append(svg) + elif tag in {"title", "desc"} and self.svg_stack: + svg = self.svg_stack[-1] + if len(self.element_stack) == svg.content_depth: + element = SvgTextElement( + tag=tag, + element_id=attr_map.get("id"), + line=line, + offset=offset, + ) + if tag == "title": + svg.titles.append(element) + else: + svg.descriptions.append(element) + self.open_text.append(element) + + self.element_stack.append(tag) + + def handle_startendtag(self, tag, attrs): + self.handle_starttag(tag, attrs) + self.handle_endtag(tag) + + def handle_endtag(self, tag): + tag = tag.casefold() + for index in range(len(self.open_text) - 1, -1, -1): + if self.open_text[index].tag == tag: + del self.open_text[index] + break + + if tag == "svg" and self.svg_stack: + self.svg_stack.pop() + + for index in range(len(self.element_stack) - 1, -1, -1): + if self.element_stack[index] == tag: + del self.element_stack[index:] + break + + def handle_data(self, data): + for element in self.open_text: + element.text.append(data) + + +def lint_accessible_svgs(text, expected_slug): + parser = AccessibleSvgParser(text) + parser.feed(text) + parser.close() + findings = [] + + def add(line, offset, message): + findings.append((line, offset, "a11y", message)) + + naming_ids = { + element.element_id + for svg in parser.svgs + if (svg.attrs.get("aria-hidden") or "").casefold() != "true" + for element in svg.titles + svg.descriptions + if element.element_id + } + for element_id in sorted(naming_ids): + locations = parser.id_locations[element_id] + if len(locations) > 1: + line, offset = locations[1] + add(line, offset, f'duplicate accessible-name id="{element_id}" is not allowed') + + for svg in parser.svgs: + aria_hidden = (svg.attrs.get("aria-hidden") or "").casefold() + if aria_hidden == "true": + continue + + if (svg.attrs.get("role") or "").casefold() != "img": + add(svg.line, svg.offset, 'diagram <svg> must carry role="img"') + + labelled_by = (svg.attrs.get("aria-labelledby") or "").split() + accessible_name_ids = labelled_by + [ + element.element_id + for element in svg.titles + svg.descriptions + if element.element_id + ] + placeholder_ids = list( + dict.fromkeys( + element_id + for element_id in accessible_name_ids + if "[" in element_id or "]" in element_id + ) + ) + if placeholder_ids: + add( + svg.line, + svg.offset, + "accessible-name IDs contain unresolved placeholder(s): " + + ", ".join(placeholder_ids), + ) + if not labelled_by: + add( + svg.line, + svg.offset, + "aria-labelledby must name the <title> and <desc>", + ) + else: + missing_ids = [ + element_id for element_id in labelled_by if element_id not in svg.ids + ] + if missing_ids: + add( + svg.line, + svg.offset, + "aria-labelledby references missing id(s): " + + ", ".join(missing_ids), + ) + + title = svg.titles[0] if svg.titles else None + description = svg.descriptions[0] if svg.descriptions else None + if title is None: + add(svg.line, svg.offset, "diagram <svg> must contain a <title>") + else: + if svg.first_child != "title": + add( + title.line, + title.offset, + "<title> must be the first child element of <svg>", + ) + if not "".join(title.text).strip(): + add(title.line, title.offset, "<title> must not be empty") + + if description is None: + add(svg.line, svg.offset, "diagram <svg> must contain a <desc>") + elif not "".join(description.text).strip(): + add(description.line, description.offset, "<desc> must not be empty") + + title_id = title.element_id if title else None + description_id = description.element_id if description else None + if svg.bare_id_locations: + line, offset = svg.bare_id_locations[0] + add( + line, + offset, + 'bare id="title" and id="desc" are not allowed', + ) + + expected_title_id = f"{expected_slug}-title" + expected_description_id = f"{expected_slug}-desc" + if not placeholder_ids and ( + title_id != expected_title_id or description_id != expected_description_id + ): + add( + svg.line, + svg.offset, + f'accessible-name IDs must match file slug "{expected_slug}": ' + f'expected "{expected_title_id}" / "{expected_description_id}"', + ) + + if ( + labelled_by + and (title_id not in labelled_by or description_id not in labelled_by) + ): + add( + svg.line, + svg.offset, + "aria-labelledby must name the <title> and <desc> IDs", + ) + + return findings + + def normalize_hex(value): value = value.lower() if len(value) == 4: @@ -102,6 +342,10 @@ def display_path(path): return str(path) +def diagram_slug(path): + return path.stem.removeprefix("example-") + + def named_families(value): families = [] for raw_family in value.split(","): @@ -114,8 +358,8 @@ def named_families(value): return families -def lint_text(text, colors, rgb_triplets): - findings = [] +def lint_text(text, colors, rgb_triplets, expected_slug): + findings = lint_accessible_svgs(text, expected_slug) def add(offset, category, message): findings.append((line_number(text, offset), offset, category, message)) @@ -228,18 +472,15 @@ def main(): colors, rgb_triplets = allowed_colors() skipped = 0 + baseline = set() if args.all: paths = sorted(ASSET_DIR.glob("example-*.html")) if args.baseline: baseline = load_baseline() - selected = [] for path in paths: relative = display_path(path) if path.name in baseline or relative in baseline: skipped += 1 - else: - selected.append(path) - paths = selected else: paths = args.files @@ -247,7 +488,12 @@ def main(): for path in paths: try: text = path.read_text(encoding="utf-8") - findings = lint_text(text, colors, rgb_triplets) + relative = display_path(path) + expected_slug = diagram_slug(path) + if args.baseline and (path.name in baseline or relative in baseline): + findings = lint_accessible_svgs(text, expected_slug) + else: + findings = lint_text(text, colors, rgb_triplets, expected_slug) except OSError as error: findings = [(0, 0, "read-error", str(error))] diff --git a/scripts/test-lint-a11y.py b/scripts/test-lint-a11y.py new file mode 100644 index 0000000..e7a7e4b --- /dev/null +++ b/scripts/test-lint-a11y.py @@ -0,0 +1,229 @@ +#!/usr/bin/env python3 +"""Adversarial tests for lint-skin.py's accessible-SVG contract.""" + +from __future__ import annotations + +import importlib.util +import shutil +import subprocess +import sys +import tempfile +from pathlib import Path + + +ROOT = Path(__file__).resolve().parent.parent +LINTER = ROOT / "scripts/lint-skin.py" +BUILD_ICONS = ROOT / "scripts/build-icons.py" + +VALID_SVG = """\ +<svg xmlns="http://www.w3.org/2000/svg" role="img" + aria-labelledby="fixture-title fixture-desc"> + <title id="fixture-title">Fixture diagram + Diagram showing a fixture connected to a result. + + +""" + + +def run_linter(path: Path) -> subprocess.CompletedProcess[str]: + return subprocess.run( + [sys.executable, str(LINTER), str(path)], + capture_output=True, + text=True, + check=False, + ) + + +def require_failure(name: str, html: str, expected: str, directory: Path) -> None: + path = directory / f"{name}.html" + path.write_text(html, encoding="utf-8") + result = run_linter(path) + if result.returncode != 1: + raise AssertionError( + f"{name}: expected exit 1, got {result.returncode}\n{result.stdout}{result.stderr}" + ) + if f"a11y: {expected}" not in result.stdout: + raise AssertionError( + f"{name}: missing expected a11y finding {expected!r}\n{result.stdout}" + ) + print(f"OK: {name} rejected — {expected}") + + +def require_pass(name: str, html: str, directory: Path) -> None: + path = directory / f"{name}.html" + path.write_text(html, encoding="utf-8") + result = run_linter(path) + if result.returncode != 0: + raise AssertionError( + f"{name}: expected exit 0, got {result.returncode}\n{result.stdout}{result.stderr}" + ) + if "a11y:" in result.stdout: + raise AssertionError(f"{name}: unexpected a11y finding\n{result.stdout}") + print(f"OK: {name} accepted") + + +def main() -> int: + with tempfile.TemporaryDirectory(prefix="lint-a11y-") as temp_dir: + directory = Path(temp_dir) + + require_failure( + "missing-role", + VALID_SVG.replace(' role="img"', ""), + 'diagram must carry role="img"', + directory, + ) + require_failure( + "unresolved-labelled-by", + VALID_SVG.replace( + 'aria-labelledby="fixture-title fixture-desc"', + 'aria-labelledby="absent-title absent-desc"', + ), + "aria-labelledby references missing id(s): absent-title, absent-desc", + directory, + ) + require_failure( + "labels-unrelated-elements", + VALID_SVG.replace(' id="fixture-title"', "") + .replace(' id="fixture-desc"', "") + .replace( + ' ', + ' \n' + ' \n' + ' ', + ), + "aria-labelledby must name the and IDs", + directory, + ) + require_failure( + "late-title", + VALID_SVG.replace( + ' Fixture diagram\n \n Fixture diagram\n must be the first child element of ", + directory, + ) + require_failure( + "empty-desc", + VALID_SVG.replace( + "Diagram showing a fixture connected to a result.", " " + ), + " must not be empty", + directory, + ) + require_failure( + "bare-ids", + VALID_SVG.replace("fixture-title", "title").replace( + "fixture-desc", "desc" + ), + 'bare id="title" and id="desc" are not allowed', + directory, + ) + require_failure( + "wrong-file-slug", + VALID_SVG, + 'accessible-name IDs must match file slug "wrong-file-slug": ' + 'expected "wrong-file-slug-title" / "wrong-file-slug-desc"', + directory, + ) + require_failure( + "placeholder-ids", + VALID_SVG.replace("fixture-title", "[diagram-slug]-title").replace( + "fixture-desc", "[diagram-slug]-desc" + ), + "accessible-name IDs contain unresolved placeholder(s): " + "[diagram-slug]-title, [diagram-slug]-desc", + directory, + ) + require_failure( + "duplicate-naming-ids", + VALID_SVG + VALID_SVG, + 'duplicate accessible-name id="fixture-desc" is not allowed', + directory, + ) + require_pass( + "decorative", + '\n', + directory, + ) + + spec = importlib.util.spec_from_file_location("build_icons", BUILD_ICONS) + if spec is None or spec.loader is None: + raise AssertionError("generated-icons: could not load build-icons.py") + build_icons = importlib.util.module_from_spec(spec) + previous_bytecode_setting = sys.dont_write_bytecode + sys.dont_write_bytecode = True + try: + spec.loader.exec_module(build_icons) + finally: + sys.dont_write_bytecode = previous_bytecode_setting + generated_icons = { + "tabler": build_icons.normalize_tabler(""), + "simple": build_icons.normalize_simple(""), + "url": build_icons.normalize_url( + '' + ), + "devicon": build_icons.normalize_devicon(""), + "logz": build_icons.normalize_logz(""), + } + for source, icon in generated_icons.items(): + slug = f"generated-{source}-icon" + require_pass( + slug, + VALID_SVG.replace("fixture-title", f"{slug}-title") + .replace("fixture-desc", f"{slug}-desc") + .replace("", f" {icon}\n"), + directory, + ) + + project = directory / "baseline-project" + (project / "scripts").mkdir(parents=True) + (project / "skills/diagram-design/assets").mkdir(parents=True) + (project / "skills/diagram-design/references").mkdir(parents=True) + shutil.copy2(LINTER, project / "scripts/lint-skin.py") + shutil.copy2( + ROOT / "skills/diagram-design/references/style-guide.md", + project / "skills/diagram-design/references/style-guide.md", + ) + (project / "scripts/lint-skin-baseline.txt").write_text( + "example-baseline.html\n", encoding="utf-8" + ) + (project / "skills/diagram-design/assets/example-baseline.html").write_text( + '\n', encoding="utf-8" + ) + baseline_result = subprocess.run( + [ + sys.executable, + str(project / "scripts/lint-skin.py"), + "--all", + "--baseline", + ], + capture_output=True, + text=True, + check=False, + ) + if baseline_result.returncode != 1: + raise AssertionError( + "baseline-a11y: expected exit 1, got " + f"{baseline_result.returncode}\n" + f"{baseline_result.stdout}{baseline_result.stderr}" + ) + if "a11y: diagram must carry role=\"img\"" not in baseline_result.stdout: + raise AssertionError( + "baseline-a11y: missing expected accessibility finding\n" + f"{baseline_result.stdout}" + ) + if "color:" in baseline_result.stdout: + raise AssertionError( + "baseline-a11y: legacy visual finding was not exempted\n" + f"{baseline_result.stdout}" + ) + print("OK: baseline file receives a11y checks but keeps visual exemptions") + + print("All accessible-SVG lint cases passed.") + return 0 + + +if __name__ == "__main__": + sys.exit(main()) diff --git a/skills/diagram-design/SKILL.md b/skills/diagram-design/SKILL.md index ca6f8b1..13fa9c0 100644 --- a/skills/diagram-design/SKILL.md +++ b/skills/diagram-design/SKILL.md @@ -429,6 +429,9 @@ Run before producing any diagram. **Technical:** +- [ ] Diagram `` has `role="img"` and `aria-labelledby` resolving to its `` and ``? +- [ ] `` is the first child of `<svg>` (before `<defs>`) and both `<title>` and `<desc>` are filled in? +- [ ] `<title>` / `<desc>` IDs are prefixed for this diagram and variant — never bare `title` / `desc`? - [ ] Arrows drawn before boxes? - [ ] **Every connector between off-axis nodes uses a rounded right-angle elbow (`r=8`)? No diagonal `<line>` slants?** - [ ] **Every arrow label has a visible 6–10px gap above its connector? (Mask rect not touching the stroke.)** @@ -470,7 +473,7 @@ Every diagram ships in three variants (see `assets/`): 1. Copy the variant closest to what you want (`template.html` for minimal, `template-full.html` for cards). 2. Load the matching `references/type-<name>.md` for layout conventions. -3. Replace the eyebrow, h1, and SVG body. +3. Replace the eyebrow, h1, and SVG body. Replace `[diagram-slug]` with the file's diagram/variant slug, fill the copied `<title>` / `<desc>` placeholders, and do not delete them. 4. Run the §9 taste gate. --- @@ -516,6 +519,17 @@ Always produce a single self-contained `.html` file: Renders correctly in any modern browser. +### Accessible SVG contract + +Every diagram is an accessible figure by default: + +1. Its `<svg>` carries `role="img"` and `aria-labelledby` naming the diagram's `<title>` and `<desc>`. +2. `<title>` is the first child of `<svg>`, before `<defs>`. Assistive technology may ignore a title placed later. +3. The IDs are prefixed per diagram and variant: `<slug>-title` / `<slug>-desc`, where the slug matches the file (`loop`, `loop-dark`, `loop-full`). Bare `title` / `desc` IDs are banned because two inline diagrams would create duplicate IDs and the second could be announced with the first diagram's name. +4. `<title>` is the short name of the subject — roughly the page `<h1>`, and about 60 characters or fewer. +5. `<desc>` is one sentence stating what the diagram shows in terms a reader needs without the image. Describe the content, not the geometry: “Org chart showing a command center routing work to specialist agents and escalation owners,” not “A box at the top with five boxes below it.” A shape-by-shape narration is worse than no useful description. +6. Decorative-only SVG, such as the specimen glyphs in `assets/icons.html`, carries `aria-hidden="true"` instead. Giving decorative marks accessible names adds noise. + ### Exporting to PNG / SVG When the user asks to export, save, rasterize, or convert a generated diagram to `.png` or `.svg`, load [`references/export.md`](references/export.md) and follow the procedure there. Both formats deliver the diagram only (the `<svg>` node) — editorial wrappers like cards and headers are dropped by design. Export is **manual** — never produce export files unprompted. diff --git a/skills/diagram-design/assets/example-architecture-dark.html b/skills/diagram-design/assets/example-architecture-dark.html index 186d97a..ad3e4fa 100644 --- a/skills/diagram-design/assets/example-architecture-dark.html +++ b/skills/diagram-design/assets/example-architecture-dark.html @@ -58,7 +58,9 @@ <p class="eyebrow">Architecture · Diagram Design</p> <h1>Content site in production</h1> - <svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg"> + <svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="architecture-dark-title architecture-dark-desc"> + <title id="architecture-dark-title">Content site in production + Architecture diagram showing reader requests moving through Cloudflare to an Astro origin, MDX bundle, and content CMS. diff --git a/skills/diagram-design/assets/example-architecture-full.html b/skills/diagram-design/assets/example-architecture-full.html index 6b89738..2ed4663 100644 --- a/skills/diagram-design/assets/example-architecture-full.html +++ b/skills/diagram-design/assets/example-architecture-full.html @@ -48,7 +48,9 @@
- + + Content site in production + Architecture diagram showing reader requests moving through Cloudflare to an Astro origin, MDX bundle, and content CMS. diff --git a/skills/diagram-design/assets/example-architecture.html b/skills/diagram-design/assets/example-architecture.html index 506a625..5f3e5e3 100644 --- a/skills/diagram-design/assets/example-architecture.html +++ b/skills/diagram-design/assets/example-architecture.html @@ -58,7 +58,9 @@

Architecture · Diagram Design

Content site in production

- + + Content site in production + Architecture diagram showing reader requests moving through Cloudflare to an Astro origin, MDX bundle, and content CMS. diff --git a/skills/diagram-design/assets/example-bar-dark.html b/skills/diagram-design/assets/example-bar-dark.html index b140ef4..0d9aa66 100644 --- a/skills/diagram-design/assets/example-bar-dark.html +++ b/skills/diagram-design/assets/example-bar-dark.html @@ -28,7 +28,9 @@

Bar · Diagram Design

Sprint velocity · 8-sprint view

- + + Sprint velocity · 8-sprint view + Bar chart showing story points delivered across sprints S1 through S8, with Sprint 5 as the record high. diff --git a/skills/diagram-design/assets/example-bar-full.html b/skills/diagram-design/assets/example-bar-full.html index 1763d82..04b7663 100644 --- a/skills/diagram-design/assets/example-bar-full.html +++ b/skills/diagram-design/assets/example-bar-full.html @@ -36,7 +36,9 @@

Story points delivered per two-week sprint over one product cycle. Sprint 5 is the standout — a focused scope and no mid-sprint scope additions.

- + + Sprint velocity · 8-sprint view + Bar chart showing story points delivered across sprints S1 through S8, with Sprint 5 as the record high. diff --git a/skills/diagram-design/assets/example-bar.html b/skills/diagram-design/assets/example-bar.html index 3e08381..3c440f0 100644 --- a/skills/diagram-design/assets/example-bar.html +++ b/skills/diagram-design/assets/example-bar.html @@ -28,7 +28,9 @@

Bar · Diagram Design

Sprint velocity · 8-sprint view

- + + Sprint velocity · 8-sprint view + Bar chart showing story points delivered across sprints S1 through S8, with Sprint 5 as the record high. diff --git a/skills/diagram-design/assets/example-data-flow-dark.html b/skills/diagram-design/assets/example-data-flow-dark.html index 87d3801..cd0ab3e 100644 --- a/skills/diagram-design/assets/example-data-flow-dark.html +++ b/skills/diagram-design/assets/example-data-flow-dark.html @@ -38,9 +38,9 @@

Data flow · Diagram Design

Role-scoped analytics pipeline

- - Role-scoped analytics data flow - A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. + + Role-scoped analytics data flow + A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. diff --git a/skills/diagram-design/assets/example-data-flow-full.html b/skills/diagram-design/assets/example-data-flow-full.html index 88da459..194dbf1 100644 --- a/skills/diagram-design/assets/example-data-flow-full.html +++ b/skills/diagram-design/assets/example-data-flow-full.html @@ -58,9 +58,9 @@
- - Role-scoped analytics data flow - A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. + + Role-scoped analytics data flow + A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. diff --git a/skills/diagram-design/assets/example-data-flow.html b/skills/diagram-design/assets/example-data-flow.html index f8f2b75..1be90d4 100644 --- a/skills/diagram-design/assets/example-data-flow.html +++ b/skills/diagram-design/assets/example-data-flow.html @@ -38,9 +38,9 @@

Data flow · Diagram Design

Role-scoped analytics pipeline

- - Role-scoped analytics data flow - A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. + + Role-scoped analytics data flow + A Data Engineer ingests and stores commerce data, a Data Scientist transforms and analyzes it, and an Analyst publishes a dashboard. diff --git a/skills/diagram-design/assets/example-datalake-dark.html b/skills/diagram-design/assets/example-datalake-dark.html index 137974d..efb017a 100644 --- a/skills/diagram-design/assets/example-datalake-dark.html +++ b/skills/diagram-design/assets/example-datalake-dark.html @@ -52,7 +52,9 @@

Architecture · Diagram Design

Open data lake · End-to-end stack

- + + Open data lake · End-to-end stack + Data lake architecture showing app servers and databases flowing through Apache NiFi into MinIO, then Trino, StarRocks, Superset, JupyterLab, and Python. @@ -106,7 +108,7 @@ EXT - +
- + + Open data lake · End-to-end stack + Data lake architecture showing app servers and databases flowing through Apache NiFi into MinIO, then Trino, StarRocks, Superset, JupyterLab, and Python. @@ -91,7 +93,7 @@ EXT - +

Architecture · Diagram Design

Open data lake · End-to-end stack

- + + Open data lake · End-to-end stack + Data lake architecture showing app servers and databases flowing through Apache NiFi into MinIO, then Trino, StarRocks, Superset, JupyterLab, and Python. @@ -129,7 +131,7 @@ EXT - +

DP Integration · Diagram Design

Generic data platform integration topology

- + + Generic data platform integration topology + Integration topology showing CRM, POS exports, and an event stream landing in object storage for query, notebooks, dashboards, and a partner API. diff --git a/skills/diagram-design/assets/example-dp-integration-full.html b/skills/diagram-design/assets/example-dp-integration-full.html index 8f2e3db..50218f1 100644 --- a/skills/diagram-design/assets/example-dp-integration-full.html +++ b/skills/diagram-design/assets/example-dp-integration-full.html @@ -18,7 +18,9 @@

Generic data platform integration topology

Three source patterns land in shared object storage, a query surface serves three consumer modes, and platform-wide services remain visibly cross-cutting.

- + + Generic data platform integration topology + Integration topology showing CRM, POS exports, and an event stream landing in object storage for query, notebooks, dashboards, and a partner API. diff --git a/skills/diagram-design/assets/example-dp-integration.html b/skills/diagram-design/assets/example-dp-integration.html index 1e3b1be..62d2830 100644 --- a/skills/diagram-design/assets/example-dp-integration.html +++ b/skills/diagram-design/assets/example-dp-integration.html @@ -15,7 +15,9 @@

DP Integration · Diagram Design

Generic data platform integration topology

- + + Generic data platform integration topology + Integration topology showing CRM, POS exports, and an event stream landing in object storage for query, notebooks, dashboards, and a partner API. diff --git a/skills/diagram-design/assets/example-dp-security-matrix-dark.html b/skills/diagram-design/assets/example-dp-security-matrix-dark.html index bf56ebc..670b439 100644 --- a/skills/diagram-design/assets/example-dp-security-matrix-dark.html +++ b/skills/diagram-design/assets/example-dp-security-matrix-dark.html @@ -16,8 +16,8 @@

DP security matrix · Diagram Design

Data platform access matrix

Five operating roles × five platform components, expressed as admin, write, read, or none.

- - Data platform access matrixA five by five permission matrix for platform roles and components. + + Data platform access matrixA five by five permission matrix for platform roles and components. Componentvs. AD group Data EngineerGRP-DATA-ENGData ScientistGRP-DATA-SCIAnalystGRP-ANALYSTAdministratorGRP-ADMINExternal PartnerGRP-PARTNER Object storageS3WriteReadNoneAdminNone diff --git a/skills/diagram-design/assets/example-dp-security-matrix-full.html b/skills/diagram-design/assets/example-dp-security-matrix-full.html index c84f82e..9b9abc2 100644 --- a/skills/diagram-design/assets/example-dp-security-matrix-full.html +++ b/skills/diagram-design/assets/example-dp-security-matrix-full.html @@ -14,8 +14,8 @@

DP security matrix · Diagram Design

Data platform access matrix

A compact policy view for five human roles across storage, query, analysis, reporting, and orchestration. Each intersection resolves to one explicit permission level.

- - Data platform access matrixA five by five permission matrix for platform roles and components. + + Data platform access matrixA five by five permission matrix for platform roles and components. Componentvs. AD group Data EngineerGRP-DATA-ENGData ScientistGRP-DATA-SCIAnalystGRP-ANALYSTAdministratorGRP-ADMINExternal PartnerGRP-PARTNER Object storageS3WriteReadNoneAdminNone diff --git a/skills/diagram-design/assets/example-dp-security-matrix.html b/skills/diagram-design/assets/example-dp-security-matrix.html index c296051..2b80330 100644 --- a/skills/diagram-design/assets/example-dp-security-matrix.html +++ b/skills/diagram-design/assets/example-dp-security-matrix.html @@ -26,8 +26,8 @@

DP security matrix · Diagram Design

Data platform access matrix

Five operating roles × five platform components, expressed as admin, write, read, or none.

- - Data platform access matrixA five by five permission matrix for platform roles and components. + + Data platform access matrixA five by five permission matrix for platform roles and components. diff --git a/skills/diagram-design/assets/example-er-dark.html b/skills/diagram-design/assets/example-er-dark.html index 4fd0d72..a21c32e 100644 --- a/skills/diagram-design/assets/example-er-dark.html +++ b/skills/diagram-design/assets/example-er-dark.html @@ -58,7 +58,9 @@

ER · Diagram Design

Content platform · data model

- + + Content platform · data model + Entity-relationship diagram showing authors writing articles and articles connecting to tags and categories. diff --git a/skills/diagram-design/assets/example-er-full.html b/skills/diagram-design/assets/example-er-full.html index 3a4be82..5c8ac99 100644 --- a/skills/diagram-design/assets/example-er-full.html +++ b/skills/diagram-design/assets/example-er-full.html @@ -39,7 +39,9 @@
- + + Content platform · data model + Entity-relationship diagram showing authors writing articles and articles connecting to tags and categories. diff --git a/skills/diagram-design/assets/example-er.html b/skills/diagram-design/assets/example-er.html index b31cd5e..e802c37 100644 --- a/skills/diagram-design/assets/example-er.html +++ b/skills/diagram-design/assets/example-er.html @@ -58,7 +58,9 @@

ER · Diagram Design

Content platform · data model

- + + Content platform · data model + Entity-relationship diagram showing authors writing articles and articles connecting to tags and categories. diff --git a/skills/diagram-design/assets/example-flowchart-dark.html b/skills/diagram-design/assets/example-flowchart-dark.html index 1751a51..bd6fec0 100644 --- a/skills/diagram-design/assets/example-flowchart-dark.html +++ b/skills/diagram-design/assets/example-flowchart-dark.html @@ -58,7 +58,9 @@

Flowchart · Diagram Design

Should you write this as a skill?

- + + Should you write this as a skill? + Flowchart showing when a new workflow should stay manual, become a project note, or be written as a reusable skill. diff --git a/skills/diagram-design/assets/example-flowchart-full.html b/skills/diagram-design/assets/example-flowchart-full.html index 90e7e0b..4a6d029 100644 --- a/skills/diagram-design/assets/example-flowchart-full.html +++ b/skills/diagram-design/assets/example-flowchart-full.html @@ -39,7 +39,9 @@
- + + Should you write this as a skill? + Flowchart showing when a new workflow should stay manual, become a project note, or be written as a reusable skill. diff --git a/skills/diagram-design/assets/example-flowchart.html b/skills/diagram-design/assets/example-flowchart.html index 0e3096a..bcaa172 100644 --- a/skills/diagram-design/assets/example-flowchart.html +++ b/skills/diagram-design/assets/example-flowchart.html @@ -58,7 +58,9 @@

Flowchart · Diagram Design

Should you write this as a skill?

- + + Should you write this as a skill? + Flowchart showing when a new workflow should stay manual, become a project note, or be written as a reusable skill. diff --git a/skills/diagram-design/assets/example-gantt-dark.html b/skills/diagram-design/assets/example-gantt-dark.html index a4e5360..5e195f1 100644 --- a/skills/diagram-design/assets/example-gantt-dark.html +++ b/skills/diagram-design/assets/example-gantt-dark.html @@ -24,7 +24,9 @@ - + + Q2 product launch · 12-week plan + Gantt chart showing a twelve-week product launch from market research and interviews through design review, development, beta testing, and launch. diff --git a/skills/diagram-design/assets/example-gantt-full.html b/skills/diagram-design/assets/example-gantt-full.html index 1beedf6..50a019a 100644 --- a/skills/diagram-design/assets/example-gantt-full.html +++ b/skills/diagram-design/assets/example-gantt-full.html @@ -36,7 +36,9 @@

Three phases from research through launch. Design review in week 8 is the critical gate — development doesn't continue until sign-off.

- + + Q2 product launch · 12-week plan + Gantt chart showing a twelve-week product launch from market research and interviews through design review, development, beta testing, and launch. diff --git a/skills/diagram-design/assets/example-gantt.html b/skills/diagram-design/assets/example-gantt.html index 9d3c6cc..71569e2 100644 --- a/skills/diagram-design/assets/example-gantt.html +++ b/skills/diagram-design/assets/example-gantt.html @@ -24,7 +24,9 @@ - + + Q2 product launch · 12-week plan + Gantt chart showing a twelve-week product launch from market research and interviews through design review, development, beta testing, and launch. diff --git a/skills/diagram-design/assets/example-high-level-dark.html b/skills/diagram-design/assets/example-high-level-dark.html index b963042..95c1705 100644 --- a/skills/diagram-design/assets/example-high-level-dark.html +++ b/skills/diagram-design/assets/example-high-level-dark.html @@ -52,7 +52,9 @@

Architecture · Diagram Design

High-level architecture · End-to-end stack

- + + High-level architecture · End-to-end stack + Architecture diagram showing data sources moving through Apache NiFi and MinIO into Trino, data modeling, and Superset dashboards, with Airflow orchestration. @@ -110,7 +112,7 @@ EXT - +
- + + High-level architecture · End-to-end stack + Architecture diagram showing data sources moving through Apache NiFi and MinIO into Trino, data modeling, and Superset dashboards, with Airflow orchestration. @@ -98,34 +100,34 @@ EXT - + WEB Census · Survey · Admin EXT - + FTP Census · Business EXT - + DB Connection CDC · SQL · API EXT - + Legacy System Trade data - + Orchestration / Workflow Automation (Apache Airflow) @@ -133,7 +135,7 @@ COLL - + Apache NiFi Collect · route · transform @@ -141,7 +143,7 @@ VIRT - + Trino SQL · data virtualization @@ -149,7 +151,7 @@ STORE - + MinIO / S3 Object store · S3-API @@ -157,7 +159,7 @@ ANLZ - + Data Modeling Notebook · Python · R @@ -165,16 +167,16 @@ DASH - + Dashboards Superset · reports - + Kubernetes - + Identity Manager (Active Directory) diff --git a/skills/diagram-design/assets/example-high-level-vertical-dark.html b/skills/diagram-design/assets/example-high-level-vertical-dark.html index 5c67efe..7b7e8c1 100644 --- a/skills/diagram-design/assets/example-high-level-vertical-dark.html +++ b/skills/diagram-design/assets/example-high-level-vertical-dark.html @@ -52,7 +52,9 @@

Architecture · Diagram Design · Parametric

High-level architecture · Vertical Orchestration + Security

- + + High-level architecture · Vertical Orchestration + Security + Architecture diagram showing data sources moving through ingestion, storage, transformation, and visualization alongside orchestration, security, and observability. @@ -122,7 +124,7 @@ EXT - +
- + + High-level architecture · Vertical Orchestration + Security + Architecture diagram showing data sources moving through ingestion, storage, transformation, and visualization alongside orchestration, security, and observability. @@ -99,34 +101,34 @@ EXT - + PostgreSQL CDC · SQL · API EXT - + SFTP drop Batch · landing EXT - + Web forms Survey · admin EXT - + Legacy system Trade · mainframe - + Orchestration / Workflow Automation (Apache Airflow) @@ -134,50 +136,50 @@ COLL - + Apache NiFi Collect · route · transform VIRT - + Trino SQL · data virtualization STORE - + MinIO / S3 Object store · S3-API ANLZ - + Notebooks Jupyter · Python · R DASH - + Superset Dashboards · reports - + Kubernetes - + Identity Manager (Keycloak · LDAP · OIDC) - + Monitoring & Observability (Prometheus · Grafana · Loki) diff --git a/skills/diagram-design/assets/example-high-level-vertical.html b/skills/diagram-design/assets/example-high-level-vertical.html index 9541d4e..3b23830 100644 --- a/skills/diagram-design/assets/example-high-level-vertical.html +++ b/skills/diagram-design/assets/example-high-level-vertical.html @@ -52,7 +52,9 @@

Architecture · Diagram Design · Parametric

High-level architecture · Vertical Orchestration + Security

- + + High-level architecture · Vertical Orchestration + Security + Architecture diagram showing data sources moving through ingestion, storage, transformation, and visualization alongside orchestration, security, and observability. @@ -155,7 +157,7 @@ EXT - +

Architecture · Diagram Design

High-level architecture · End-to-end stack

- + + High-level architecture · End-to-end stack + Architecture diagram showing data sources moving through Apache NiFi and MinIO into Trino, data modeling, and Superset dashboards, with Airflow orchestration. @@ -144,7 +146,7 @@ EXT - +

Architecture · Imported from draw.io · doc-inline · balanced

Order platform — request path

- + + Order platform — request path + Architecture diagram showing web and mobile clients entering through an API Gateway, then reaching authentication, orders, Postgres, object storage, and Redis. diff --git a/skills/diagram-design/assets/example-it-state-dark.html b/skills/diagram-design/assets/example-it-state-dark.html index 09b4af4..5b4000b 100644 --- a/skills/diagram-design/assets/example-it-state-dark.html +++ b/skills/diagram-design/assets/example-it-state-dark.html @@ -34,8 +34,8 @@

Legacy retail reporting landscape

File exports, desktop spreadsheets, and manual publication before a shared data platform.

- - Northwind Retail current IT landscapeThree zones show collection, processing, and dissemination through manual file handoffs. + + Northwind Retail current IT landscapeThree zones show collection, processing, and dissemination through manual file handoffs. diff --git a/skills/diagram-design/assets/example-it-state-full.html b/skills/diagram-design/assets/example-it-state-full.html index 4e59355..564596b 100644 --- a/skills/diagram-design/assets/example-it-state-full.html +++ b/skills/diagram-design/assets/example-it-state-full.html @@ -34,8 +34,8 @@

IT current-state · Northwind Retail

Legacy retail reporting landscape

Sales and supplier files converge on a shared drive, move through desktop workbooks, and reach regional teams through a manually refreshed portal and emailed report packs.

- - Northwind Retail current IT landscapeThree zones show collection, processing, and dissemination through manual file handoffs. + + Northwind Retail current IT landscapeThree zones show collection, processing, and dissemination through manual file handoffs. diff --git a/skills/diagram-design/assets/example-it-state.html b/skills/diagram-design/assets/example-it-state.html index 4476f94..daefd48 100644 --- a/skills/diagram-design/assets/example-it-state.html +++ b/skills/diagram-design/assets/example-it-state.html @@ -44,9 +44,9 @@

Legacy retail reporting landscape

File exports, desktop spreadsheets, and manual publication before a shared data platform.

- - Northwind Retail current IT landscape - Three zones show collection, processing, and dissemination through manual file handoffs. + + Northwind Retail current IT landscape + Three zones show collection, processing, and dissemination through manual file handoffs. diff --git a/skills/diagram-design/assets/example-layers-dark.html b/skills/diagram-design/assets/example-layers-dark.html index d42cead..c03f897 100644 --- a/skills/diagram-design/assets/example-layers-dark.html +++ b/skills/diagram-design/assets/example-layers-dark.html @@ -58,7 +58,9 @@

Layer stack · Diagram Design

AI app stack · Where the work actually happens

- + + AI app stack · Where the work actually happens + Layer stack showing model weights, SDK, prompts, agent harness, and UI surface, with the agent harness highlighted as the focal layer. diff --git a/skills/diagram-design/assets/example-layers-full.html b/skills/diagram-design/assets/example-layers-full.html index 9590245..4e1753b 100644 --- a/skills/diagram-design/assets/example-layers-full.html +++ b/skills/diagram-design/assets/example-layers-full.html @@ -39,7 +39,9 @@
- + + AI app stack · Where the work actually happens + Layer stack showing model weights, SDK, prompts, agent harness, and UI surface, with the agent harness highlighted as the focal layer. diff --git a/skills/diagram-design/assets/example-layers.html b/skills/diagram-design/assets/example-layers.html index 71451d6..5212a1c 100644 --- a/skills/diagram-design/assets/example-layers.html +++ b/skills/diagram-design/assets/example-layers.html @@ -58,7 +58,9 @@

Layer stack · Diagram Design

AI app stack · Where the work actually happens

- + + AI app stack · Where the work actually happens + Layer stack showing model weights, SDK, prompts, agent harness, and UI surface, with the agent harness highlighted as the focal layer. diff --git a/skills/diagram-design/assets/example-line-dark.html b/skills/diagram-design/assets/example-line-dark.html index a5a7859..6ac8044 100644 --- a/skills/diagram-design/assets/example-line-dark.html +++ b/skills/diagram-design/assets/example-line-dark.html @@ -20,7 +20,9 @@

Line · Diagram Design

Weekly signups · Organic leads the growth

- + + Weekly signups · Organic leads the growth + Line chart showing weekly signups from organic, direct, and referral channels across weeks W1 through W8. diff --git a/skills/diagram-design/assets/example-line-full.html b/skills/diagram-design/assets/example-line-full.html index 5535184..9c50242 100644 --- a/skills/diagram-design/assets/example-line-full.html +++ b/skills/diagram-design/assets/example-line-full.html @@ -36,7 +36,9 @@

Signup volume by acquisition channel over eight weeks. Organic search is both the largest and fastest-growing channel; Direct is the stable baseline.

- + + Weekly signups · Organic leads the growth + Line chart showing weekly signups from organic, direct, and referral channels across weeks W1 through W8. diff --git a/skills/diagram-design/assets/example-line.html b/skills/diagram-design/assets/example-line.html index b74d8e5..e5efa6d 100644 --- a/skills/diagram-design/assets/example-line.html +++ b/skills/diagram-design/assets/example-line.html @@ -20,7 +20,9 @@

Line · Diagram Design

Weekly signups · Organic leads the growth

- + + Weekly signups · Organic leads the growth + Line chart showing weekly signups from organic, direct, and referral channels across weeks W1 through W8. diff --git a/skills/diagram-design/assets/example-loop-dark.html b/skills/diagram-design/assets/example-loop-dark.html index d73bdf6..42e7ecf 100644 --- a/skills/diagram-design/assets/example-loop-dark.html +++ b/skills/diagram-design/assets/example-loop-dark.html @@ -36,9 +36,9 @@

Loop · Diagram Design

The self-improving loop

- - The self-improving loop - Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate. + + The self-improving loop + Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate. diff --git a/skills/diagram-design/assets/example-loop-full.html b/skills/diagram-design/assets/example-loop-full.html index 37f3f7f..98701a4 100644 --- a/skills/diagram-design/assets/example-loop-full.html +++ b/skills/diagram-design/assets/example-loop-full.html @@ -56,9 +56,9 @@
- - The self-improving loop - Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate. + + The self-improving loop + Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate. diff --git a/skills/diagram-design/assets/example-loop-terminal.html b/skills/diagram-design/assets/example-loop-terminal.html index 391a952..2e22273 100644 --- a/skills/diagram-design/assets/example-loop-terminal.html +++ b/skills/diagram-design/assets/example-loop-terminal.html @@ -173,10 +173,10 @@ viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" - aria-labelledby="loop-title loop-desc" + aria-labelledby="loop-terminal-title loop-terminal-desc" > - The self-improving loop - + The self-improving loop + Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate. diff --git a/skills/diagram-design/assets/example-medallion-dark.html b/skills/diagram-design/assets/example-medallion-dark.html index 05a250e..01b56b2 100644 --- a/skills/diagram-design/assets/example-medallion-dark.html +++ b/skills/diagram-design/assets/example-medallion-dark.html @@ -37,9 +37,9 @@

Medallion · Diagram Design

Five-tier e-commerce analytics storage

- - Five-tier e-commerce analytics medallion - Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving. + + Five-tier e-commerce analytics medallion + Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving. diff --git a/skills/diagram-design/assets/example-medallion-full.html b/skills/diagram-design/assets/example-medallion-full.html index e8858b5..c1b9388 100644 --- a/skills/diagram-design/assets/example-medallion-full.html +++ b/skills/diagram-design/assets/example-medallion-full.html @@ -57,9 +57,9 @@
- - Five-tier e-commerce analytics medallion - Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving. + + Five-tier e-commerce analytics medallion + Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving. diff --git a/skills/diagram-design/assets/example-nested-dark.html b/skills/diagram-design/assets/example-nested-dark.html index 5d0822c..1334842 100644 --- a/skills/diagram-design/assets/example-nested-dark.html +++ b/skills/diagram-design/assets/example-nested-dark.html @@ -58,7 +58,9 @@

Nested · Diagram Design

The CLAUDE.md Hierarchy

- + + The CLAUDE.md Hierarchy + Nested diagram showing how project CLAUDE.md instructions inherit broader scopes from the global, vault, business, and marketing levels. diff --git a/skills/diagram-design/assets/example-nested-full.html b/skills/diagram-design/assets/example-nested-full.html index 668734f..3e0081e 100644 --- a/skills/diagram-design/assets/example-nested-full.html +++ b/skills/diagram-design/assets/example-nested-full.html @@ -39,7 +39,9 @@
- + + The CLAUDE.md Hierarchy + Nested diagram showing how project CLAUDE.md instructions inherit broader scopes from the global, vault, business, and marketing levels. diff --git a/skills/diagram-design/assets/example-nested.html b/skills/diagram-design/assets/example-nested.html index def5d0a..2feb24a 100644 --- a/skills/diagram-design/assets/example-nested.html +++ b/skills/diagram-design/assets/example-nested.html @@ -58,7 +58,9 @@

Nested · Diagram Design

The CLAUDE.md Hierarchy

- + + The CLAUDE.md Hierarchy + Nested diagram showing how project CLAUDE.md instructions inherit broader scopes from the global, vault, business, and marketing levels. diff --git a/skills/diagram-design/assets/example-org-chart-dark.html b/skills/diagram-design/assets/example-org-chart-dark.html index 6fa2cde..a2adff5 100644 --- a/skills/diagram-design/assets/example-org-chart-dark.html +++ b/skills/diagram-design/assets/example-org-chart-dark.html @@ -3,8 +3,8 @@ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{--paper:#2d3142;--paper-2:#393e53;--ink:#f5f5f5;--muted:#bfc0c0;--soft:#8e98ac;--rule:rgba(245,245,245,.12);--accent:#f08a59;--accent-tint:rgba(240,138,89,.10);--link:#6a95d8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace} body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}} -

Org chart · Diagram Design

Agent team responsibility map

A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.

-Agent team org chartOrg chart showing a command center routing work to specialist agents and escalation owners. +

Org chart · Diagram Design

Agent team responsibility map

A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.

+Agent team org chartOrg chart showing a command center routing work to specialist agents and escalation owners. COMMAND CENTER @@ -42,4 +42,4 @@ body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height Setup gaps stay visible:specialists without Slack bots · approval gates · backend name mismatches LEGENDfront doorpod / ownerneeds setup / gap -
\ No newline at end of file +
diff --git a/skills/diagram-design/assets/example-org-chart-full.html b/skills/diagram-design/assets/example-org-chart-full.html index 6c75250..5845b71 100644 --- a/skills/diagram-design/assets/example-org-chart-full.html +++ b/skills/diagram-design/assets/example-org-chart-full.html @@ -3,8 +3,8 @@ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#7a8399;--rule:rgba(45,49,66,.12);--accent:#eb6c36;--accent-tint:rgba(235,108,54,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace} body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}} -

Org chart · Diagram Design

Agent team responsibility map

A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.

-Agent team org chartOrg chart showing a command center routing work to specialist agents and escalation owners. +

Org chart · Diagram Design

Agent team responsibility map

A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.

+Agent team org chartOrg chart showing a command center routing work to specialist agents and escalation owners. COMMAND CENTER @@ -42,4 +42,4 @@ body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height Setup gaps stay visible:specialists without Slack bots · approval gates · backend name mismatches LEGENDfront doorpod / ownerneeds setup / gap -

Use when

The reader needs to know who owns what, where to route work, and which roles are active vs. still being wired.

Keep nodes short

Name, invocation path, and 2–4 scope words. Put detailed operating rules below the figure.

Show gaps

Unavailable owners and missing routes should be dashed, not hidden. They are operationally useful.

\ No newline at end of file +

Use when

The reader needs to know who owns what, where to route work, and which roles are active vs. still being wired.

Keep nodes short

Name, invocation path, and 2–4 scope words. Put detailed operating rules below the figure.

Show gaps

Unavailable owners and missing routes should be dashed, not hidden. They are operationally useful.

diff --git a/skills/diagram-design/assets/example-org-chart.html b/skills/diagram-design/assets/example-org-chart.html index 9230e35..247db26 100644 --- a/skills/diagram-design/assets/example-org-chart.html +++ b/skills/diagram-design/assets/example-org-chart.html @@ -3,8 +3,8 @@ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#7a8399;--rule:rgba(45,49,66,.12);--accent:#eb6c36;--accent-tint:rgba(235,108,54,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace} body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}} -

Org chart · Diagram Design

Agent team responsibility map

A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.

-Agent team org chartOrg chart showing a command center routing work to specialist agents and escalation owners. +

Org chart · Diagram Design

Agent team responsibility map

A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.

+Agent team org chartOrg chart showing a command center routing work to specialist agents and escalation owners. COMMAND CENTER @@ -42,4 +42,4 @@ body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height Setup gaps stay visible:specialists without Slack bots · approval gates · backend name mismatches LEGENDfront doorpod / ownerneeds setup / gap -
\ No newline at end of file +
diff --git a/skills/diagram-design/assets/example-process-dark.html b/skills/diagram-design/assets/example-process-dark.html index 7f00489..c2a12b2 100644 --- a/skills/diagram-design/assets/example-process-dark.html +++ b/skills/diagram-design/assets/example-process-dark.html @@ -17,7 +17,9 @@

Process · Diagram Design

Order fulfillment across four teams

- + + Order fulfillment across four teams + Process diagram showing an order moving through customer, support, warehouse, and finance ownership from placement to close. diff --git a/skills/diagram-design/assets/example-process-full.html b/skills/diagram-design/assets/example-process-full.html index 924c080..c72c22c 100644 --- a/skills/diagram-design/assets/example-process-full.html +++ b/skills/diagram-design/assets/example-process-full.html @@ -20,7 +20,9 @@

Order fulfillment across four teams

One order moves through customer, support, warehouse, and finance ownership, while the payload chips show what each handoff carries.

- + + Order fulfillment across four teams + Process diagram showing an order moving through customer, support, warehouse, and finance ownership from placement to close. diff --git a/skills/diagram-design/assets/example-process.html b/skills/diagram-design/assets/example-process.html index 3b4926e..fda8f06 100644 --- a/skills/diagram-design/assets/example-process.html +++ b/skills/diagram-design/assets/example-process.html @@ -17,7 +17,9 @@

Process · Diagram Design

Order fulfillment across four teams

- + + Order fulfillment across four teams + Process diagram showing an order moving through customer, support, warehouse, and finance ownership from placement to close. diff --git a/skills/diagram-design/assets/example-pyramid-dark.html b/skills/diagram-design/assets/example-pyramid-dark.html index 43da7d4..b86fb66 100644 --- a/skills/diagram-design/assets/example-pyramid-dark.html +++ b/skills/diagram-design/assets/example-pyramid-dark.html @@ -58,7 +58,9 @@

Pyramid · Diagram Design

Content pyramid · what compounds

- + + Content pyramid · what compounds + Content pyramid showing short posts, essays, long-form guides, and a flagship book ordered by shipping cadence and leverage. diff --git a/skills/diagram-design/assets/example-pyramid-full.html b/skills/diagram-design/assets/example-pyramid-full.html index 719c78d..d83098e 100644 --- a/skills/diagram-design/assets/example-pyramid-full.html +++ b/skills/diagram-design/assets/example-pyramid-full.html @@ -39,7 +39,9 @@
- + + Content pyramid · what compounds + Content pyramid showing short posts, essays, long-form guides, and a flagship book ordered by shipping cadence and leverage. diff --git a/skills/diagram-design/assets/example-pyramid.html b/skills/diagram-design/assets/example-pyramid.html index a63d234..fbf74eb 100644 --- a/skills/diagram-design/assets/example-pyramid.html +++ b/skills/diagram-design/assets/example-pyramid.html @@ -58,7 +58,9 @@

Pyramid · Diagram Design

Content pyramid · what compounds

- + + Content pyramid · what compounds + Content pyramid showing short posts, essays, long-form guides, and a flagship book ordered by shipping cadence and leverage. diff --git a/skills/diagram-design/assets/example-quadrant-consultant.html b/skills/diagram-design/assets/example-quadrant-consultant.html index c499f03..a69ec30 100644 --- a/skills/diagram-design/assets/example-quadrant-consultant.html +++ b/skills/diagram-design/assets/example-quadrant-consultant.html @@ -57,7 +57,9 @@
- + + Workplace 2030 · Remote × AI automation + Scenario matrix showing four workplace futures across remote-to-in-person and human-to-AI axes, with agent teams as the headline bet. diff --git a/skills/diagram-design/assets/example-quadrant-dark.html b/skills/diagram-design/assets/example-quadrant-dark.html index 6ef5035..0d600cf 100644 --- a/skills/diagram-design/assets/example-quadrant-dark.html +++ b/skills/diagram-design/assets/example-quadrant-dark.html @@ -58,7 +58,9 @@

Quadrant · Diagram Design

Content ideas · Impact × Effort

- + + Content ideas · Impact × Effort + Impact-effort matrix showing eight content projects across do first, major projects, quick wins, and avoid quadrants. diff --git a/skills/diagram-design/assets/example-quadrant-full.html b/skills/diagram-design/assets/example-quadrant-full.html index 92f7912..41737e9 100644 --- a/skills/diagram-design/assets/example-quadrant-full.html +++ b/skills/diagram-design/assets/example-quadrant-full.html @@ -39,7 +39,9 @@
- + + Content ideas · Impact × Effort + Impact-effort matrix showing eight content projects across do first, major projects, quick wins, and avoid quadrants. diff --git a/skills/diagram-design/assets/example-quadrant.html b/skills/diagram-design/assets/example-quadrant.html index adcfac4..28a68b7 100644 --- a/skills/diagram-design/assets/example-quadrant.html +++ b/skills/diagram-design/assets/example-quadrant.html @@ -58,7 +58,9 @@

Quadrant · Diagram Design

Content ideas · Impact × Effort

- + + Content ideas · Impact × Effort + Impact-effort matrix showing eight content projects across do first, major projects, quick wins, and avoid quadrants. diff --git a/skills/diagram-design/assets/example-radar-dark.html b/skills/diagram-design/assets/example-radar-dark.html index 16cba6b..9ad78d5 100644 --- a/skills/diagram-design/assets/example-radar-dark.html +++ b/skills/diagram-design/assets/example-radar-dark.html @@ -58,7 +58,9 @@

Radar · Diagram Design

Storage backends · Capability radar

- + + Storage backends · Capability radar + Radar chart comparing MinIO, Amazon S3, Ceph, and Google Cloud Storage across five storage capabilities. diff --git a/skills/diagram-design/assets/example-radar-full.html b/skills/diagram-design/assets/example-radar-full.html index 642b0a2..8a3bbce 100644 --- a/skills/diagram-design/assets/example-radar-full.html +++ b/skills/diagram-design/assets/example-radar-full.html @@ -41,7 +41,9 @@
- + + Storage backends · Capability radar + Radar chart comparing MinIO, Amazon S3, Ceph, and Google Cloud Storage across five storage capabilities. diff --git a/skills/diagram-design/assets/example-radar.html b/skills/diagram-design/assets/example-radar.html index 378ac52..fc18261 100644 --- a/skills/diagram-design/assets/example-radar.html +++ b/skills/diagram-design/assets/example-radar.html @@ -58,7 +58,9 @@

Radar · Diagram Design

Storage backends · Capability radar

- + + Storage backends · Capability radar + Radar chart comparing MinIO, Amazon S3, Ceph, and Google Cloud Storage across five storage capabilities. diff --git a/skills/diagram-design/assets/example-scatter-dark.html b/skills/diagram-design/assets/example-scatter-dark.html index cb601d3..46c395c 100644 --- a/skills/diagram-design/assets/example-scatter-dark.html +++ b/skills/diagram-design/assets/example-scatter-dark.html @@ -22,7 +22,9 @@ - + + Deploy frequency vs. lead time · 12 teams + Scatter plot showing twelve engineering teams by deploy frequency and lead time, with Platform in the best-performing quadrant. diff --git a/skills/diagram-design/assets/example-scatter-full.html b/skills/diagram-design/assets/example-scatter-full.html index 2f6f701..5a88795 100644 --- a/skills/diagram-design/assets/example-scatter-full.html +++ b/skills/diagram-design/assets/example-scatter-full.html @@ -36,7 +36,9 @@

Each point is an engineering team. Moving right means deploying more often; moving down means shipping faster. The Platform team occupies the lower-right — the ideal quadrant.

- + + Deploy frequency vs. lead time · 12 teams + Scatter plot showing twelve engineering teams by deploy frequency and lead time, with Platform in the best-performing quadrant. diff --git a/skills/diagram-design/assets/example-scatter.html b/skills/diagram-design/assets/example-scatter.html index 7b1012f..1208236 100644 --- a/skills/diagram-design/assets/example-scatter.html +++ b/skills/diagram-design/assets/example-scatter.html @@ -22,7 +22,9 @@ - + + Deploy frequency vs. lead time · 12 teams + Scatter plot showing twelve engineering teams by deploy frequency and lead time, with Platform in the best-performing quadrant. diff --git a/skills/diagram-design/assets/example-sequence-dark.html b/skills/diagram-design/assets/example-sequence-dark.html index 2cad97b..9c3b7da 100644 --- a/skills/diagram-design/assets/example-sequence-dark.html +++ b/skills/diagram-design/assets/example-sequence-dark.html @@ -58,7 +58,9 @@

Sequence · Diagram Design

Article request, cold cache

- + + Article request, cold cache + Sequence diagram showing a cold-cache article request moving from reader and browser through Cloudflare to an Astro origin and analytics beacon. diff --git a/skills/diagram-design/assets/example-sequence-full.html b/skills/diagram-design/assets/example-sequence-full.html index acbf7c1..89702af 100644 --- a/skills/diagram-design/assets/example-sequence-full.html +++ b/skills/diagram-design/assets/example-sequence-full.html @@ -183,7 +183,9 @@
- + + Article request, cold cache + Sequence diagram showing a cold-cache article request moving from reader and browser through Cloudflare to an Astro origin and analytics beacon. diff --git a/skills/diagram-design/assets/example-sequence-oauth-dark.html b/skills/diagram-design/assets/example-sequence-oauth-dark.html index bc0a132..bfa32ca 100644 --- a/skills/diagram-design/assets/example-sequence-oauth-dark.html +++ b/skills/diagram-design/assets/example-sequence-oauth-dark.html @@ -58,9 +58,9 @@

Sequence · Diagram Design · Special

Bearer call with refresh

- - Bearer call with refresh - Client calls API with a bearer token. An ALT fragment shows either a valid 200 response or a 401 path that refreshes via Auth and retries. + + Bearer call with refresh + Client calls API with a bearer token. An ALT fragment shows either a valid 200 response or a 401 path that refreshes via Auth and retries. diff --git a/skills/diagram-design/assets/example-sequence-oauth-full.html b/skills/diagram-design/assets/example-sequence-oauth-full.html index 4b5822a..1a48250 100644 --- a/skills/diagram-design/assets/example-sequence-oauth-full.html +++ b/skills/diagram-design/assets/example-sequence-oauth-full.html @@ -181,9 +181,9 @@
- - Bearer call with refresh - Client calls API with a bearer token. An ALT fragment shows either a valid 200 response or a 401 path that refreshes via Auth and retries. + + Bearer call with refresh + Client calls API with a bearer token. An ALT fragment shows either a valid 200 response or a 401 path that refreshes via Auth and retries. diff --git a/skills/diagram-design/assets/example-sequence-oauth.html b/skills/diagram-design/assets/example-sequence-oauth.html index 062eda3..bd0b235 100644 --- a/skills/diagram-design/assets/example-sequence-oauth.html +++ b/skills/diagram-design/assets/example-sequence-oauth.html @@ -58,9 +58,9 @@

Sequence · Diagram Design · Special

Bearer call with refresh

- - Bearer call with refresh - Client calls API with a bearer token. An ALT fragment shows either a valid 200 response or a 401 path that refreshes via Auth and retries. + + Bearer call with refresh + Client calls API with a bearer token. An ALT fragment shows either a valid 200 response or a 401 path that refreshes via Auth and retries. diff --git a/skills/diagram-design/assets/example-sequence.html b/skills/diagram-design/assets/example-sequence.html index 91c581e..9fa3f3f 100644 --- a/skills/diagram-design/assets/example-sequence.html +++ b/skills/diagram-design/assets/example-sequence.html @@ -58,7 +58,9 @@

Sequence · Diagram Design

Article request, cold cache

- + + Article request, cold cache + Sequence diagram showing a cold-cache article request moving from reader and browser through Cloudflare to an Astro origin and analytics beacon. diff --git a/skills/diagram-design/assets/example-state-dark.html b/skills/diagram-design/assets/example-state-dark.html index 72a9b73..3f9b023 100644 --- a/skills/diagram-design/assets/example-state-dark.html +++ b/skills/diagram-design/assets/example-state-dark.html @@ -58,7 +58,9 @@

State machine · Diagram Design

Article lifecycle

- + + Article lifecycle + State machine showing an article moving from Draft through In Review and Published to Archived, including rejection and revision. diff --git a/skills/diagram-design/assets/example-state-full.html b/skills/diagram-design/assets/example-state-full.html index fec25be..8c589bd 100644 --- a/skills/diagram-design/assets/example-state-full.html +++ b/skills/diagram-design/assets/example-state-full.html @@ -39,7 +39,9 @@
- + + Article lifecycle + State machine showing an article moving from Draft through In Review and Published to Archived, including rejection and revision. diff --git a/skills/diagram-design/assets/example-state.html b/skills/diagram-design/assets/example-state.html index f011b70..d00ddd5 100644 --- a/skills/diagram-design/assets/example-state.html +++ b/skills/diagram-design/assets/example-state.html @@ -58,7 +58,9 @@

State machine · Diagram Design

Article lifecycle

- + + Article lifecycle + State machine showing an article moving from Draft through In Review and Published to Archived, including rejection and revision. diff --git a/skills/diagram-design/assets/example-swimlane-dark.html b/skills/diagram-design/assets/example-swimlane-dark.html index 272203a..82f8551 100644 --- a/skills/diagram-design/assets/example-swimlane-dark.html +++ b/skills/diagram-design/assets/example-swimlane-dark.html @@ -58,7 +58,9 @@

Swimlane · Diagram Design

Publishing an article

- + + Publishing an article + Swimlane diagram showing an article moving from MDX draft through review, editing, approval, build, and Cloudflare Pages deployment. diff --git a/skills/diagram-design/assets/example-swimlane-full.html b/skills/diagram-design/assets/example-swimlane-full.html index ccab1f1..1ce55f7 100644 --- a/skills/diagram-design/assets/example-swimlane-full.html +++ b/skills/diagram-design/assets/example-swimlane-full.html @@ -39,7 +39,9 @@
- + + Publishing an article + Swimlane diagram showing an article moving from MDX draft through review, editing, approval, build, and Cloudflare Pages deployment. diff --git a/skills/diagram-design/assets/example-swimlane.html b/skills/diagram-design/assets/example-swimlane.html index 32ee268..c57ee86 100644 --- a/skills/diagram-design/assets/example-swimlane.html +++ b/skills/diagram-design/assets/example-swimlane.html @@ -58,7 +58,9 @@

Swimlane · Diagram Design

Publishing an article

- + + Publishing an article + Swimlane diagram showing an article moving from MDX draft through review, editing, approval, build, and Cloudflare Pages deployment. diff --git a/skills/diagram-design/assets/example-timeline-dark.html b/skills/diagram-design/assets/example-timeline-dark.html index 1fd7984..66905f4 100644 --- a/skills/diagram-design/assets/example-timeline-dark.html +++ b/skills/diagram-design/assets/example-timeline-dark.html @@ -58,7 +58,9 @@

Timeline · Diagram Design

Product launch · fourteen months

- + + Product launch · fourteen months + Timeline showing product milestones from the first post in February 2025 through three design versions and the schematic skill in April 2026. diff --git a/skills/diagram-design/assets/example-timeline-full.html b/skills/diagram-design/assets/example-timeline-full.html index 1d783ef..18f2957 100644 --- a/skills/diagram-design/assets/example-timeline-full.html +++ b/skills/diagram-design/assets/example-timeline-full.html @@ -39,7 +39,9 @@
- + + Product launch · fourteen months + Timeline showing product milestones from the first post in February 2025 through three design versions and the schematic skill in April 2026. diff --git a/skills/diagram-design/assets/example-timeline.html b/skills/diagram-design/assets/example-timeline.html index f3659c6..acad06f 100644 --- a/skills/diagram-design/assets/example-timeline.html +++ b/skills/diagram-design/assets/example-timeline.html @@ -58,7 +58,9 @@

Timeline · Diagram Design

Product launch · fourteen months

- + + Product launch · fourteen months + Timeline showing product milestones from the first post in February 2025 through three design versions and the schematic skill in April 2026. diff --git a/skills/diagram-design/assets/example-tree-dark.html b/skills/diagram-design/assets/example-tree-dark.html index d0e91a2..6cdbedd 100644 --- a/skills/diagram-design/assets/example-tree-dark.html +++ b/skills/diagram-design/assets/example-tree-dark.html @@ -58,7 +58,9 @@

Tree · Diagram Design

Claude Code skill taxonomy

- + + Claude Code skill taxonomy + Tree diagram showing a Skills root branching into Design, Engineering, and Research categories and their leaf skills. diff --git a/skills/diagram-design/assets/example-tree-full.html b/skills/diagram-design/assets/example-tree-full.html index e9ade68..93bebde 100644 --- a/skills/diagram-design/assets/example-tree-full.html +++ b/skills/diagram-design/assets/example-tree-full.html @@ -39,7 +39,9 @@
- + + Claude Code skill taxonomy + Tree diagram showing a Skills root branching into Design, Engineering, and Research categories and their leaf skills. diff --git a/skills/diagram-design/assets/example-tree.html b/skills/diagram-design/assets/example-tree.html index e391dee..c1ed447 100644 --- a/skills/diagram-design/assets/example-tree.html +++ b/skills/diagram-design/assets/example-tree.html @@ -58,7 +58,9 @@

Tree · Diagram Design

Claude Code skill taxonomy

- + + Claude Code skill taxonomy + Tree diagram showing a Skills root branching into Design, Engineering, and Research categories and their leaf skills. diff --git a/skills/diagram-design/assets/example-venn-dark.html b/skills/diagram-design/assets/example-venn-dark.html index a191deb..142c914 100644 --- a/skills/diagram-design/assets/example-venn-dark.html +++ b/skills/diagram-design/assets/example-venn-dark.html @@ -58,7 +58,9 @@

Venn · Diagram Design

Good design · Desirable × Feasible × Viable

- + + Good design · Desirable × Feasible × Viable + Venn diagram showing desirable, feasible, and viable product qualities intersecting at shippable. diff --git a/skills/diagram-design/assets/example-venn-full.html b/skills/diagram-design/assets/example-venn-full.html index 24aa5ce..8174008 100644 --- a/skills/diagram-design/assets/example-venn-full.html +++ b/skills/diagram-design/assets/example-venn-full.html @@ -39,7 +39,9 @@
- + + Good design · Desirable × Feasible × Viable + Venn diagram showing desirable, feasible, and viable product qualities intersecting at shippable. diff --git a/skills/diagram-design/assets/example-venn.html b/skills/diagram-design/assets/example-venn.html index a9314d0..e1bde58 100644 --- a/skills/diagram-design/assets/example-venn.html +++ b/skills/diagram-design/assets/example-venn.html @@ -58,7 +58,9 @@

Venn · Diagram Design

Good design · Desirable × Feasible × Viable

- + + Good design · Desirable × Feasible × Viable + Venn diagram showing desirable, feasible, and viable product qualities intersecting at shippable. diff --git a/skills/diagram-design/assets/icons.html b/skills/diagram-design/assets/icons.html index da8530f..d6567e8 100644 --- a/skills/diagram-design/assets/icons.html +++ b/skills/diagram-design/assets/icons.html @@ -112,115 +112,115 @@

A small, monochrome library for IT/cloud illustrations. Stroked icons from Tabler Icons (MIT); brand silhouettes from Simple Icons (CC0). Every icon uses currentColor so it inherits ink from its parent.

Compute

-
laptop
-
phone
-
desktop
-
server
-
container
-
vm
+
laptop
+
phone
+
desktop
+
server
+
container
+
vm

People

-
user
-
users
-
admin
-
robot
+
user
+
users
+
admin
+
robot

Network

-
cloud
-
internet
-
cdn
-
firewall
-
vpn
-
load-balancer
-
gateway
-
dns
+
cloud
+
internet
+
cdn
+
firewall
+
vpn
+
load-balancer
+
gateway
+
dns

Data

-
database
-
file
-
log
-
queue
-
cache
-
bucket
-
backup
-
search
+
database
+
file
+
log
+
queue
+
cache
+
bucket
+
backup
+
search

Kubernetes

-
pod
-
node
-
service
-
deployment
-
ingress
-
volume
+
pod
+
node
+
service
+
deployment
+
ingress
+
volume

Action

-
api
-
request
-
response
-
sync
-
lock
-
key
-
alert
+
api
+
request
+
response
+
sync
+
lock
+
key
+
alert

DevOps

-
git-branch
-
terminal
-
pipeline
-
bug
-
monitoring
-
test
+
git-branch
+
terminal
+
pipeline
+
bug
+
monitoring
+
test

Brand

-
docker
-
terraform
-
aws
-
azure
-
github
-
Kubernetes
kubernetes
-
Google Cloud
gcp
-
PostgreSQL
postgres
-
redis
-
NGINX
nginx
-
Gitea
gitea
-
Keycloak
keycloak
-
active-directory
-
MinIO
minio
-
mysql
-
Oracle
oracle
-
Microsoft SQL Server
sqlserver
-
SQLite
sqlite
-
Apache Hive
hive
-
starrocks
+
docker
+
terraform
+
aws
+
azure
+
github
+
kubernetes
+
gcp
+
postgres
+
redis
+
nginx
+
gitea
+
keycloak
+
active-directory
+
minio
+
mysql
+
oracle
+
sqlserver
+
sqlite
+
hive
+
starrocks

Data stack

-
Apache NiFi
nifi
-
Apache Airflow
airflow
-
image/svg+xml
hop
-
pentaho
-
dagster
-
Trino
trino
-
Apache Superset
superset
-
Redash
redash
-
Tableau
tableau
-
Power BI
powerbi
-
Jupyter
jupyter
+
nifi
+
airflow
+
hop
+
pentaho
+
dagster
+
trino
+
superset
+
redash
+
tableau
+
powerbi
+
jupyter

Language

-
Python
python
-
R
r
-
sql
+
python
+
r
+
sql

Statistical tools

-
spss
-
sas
-
stata
-
rstudio
-
QGIS
qgis
+
spss
+
sas
+
stata
+
rstudio
+
qgis

File formats

-
excel
-
csv
-
txt
+
excel
+
csv
+
txt