diagram-build-validate

Build and validate diagram-generator outputs. Use when changing renderers, shared primitives, deliverable SVGs, draw.io exports, compare pages, or any diagram slug that needs rebuild, sanitization, and focused output checks.

Ir a la instalación

Repositorio: canonical/diagram-generator
Última actividad en el origen: 13 de junio de 2026 a las 13:30
Idioma detectado de SKILL.md: inglés
Estrellas: 2
Forks: 1

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

npx skills add https://github.com/canonical/diagram-generator --skill diagram-build-validate

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

diagram-authoring-guard

Guard rails for writing or editing diagram YAML. Use before authoring a new diagram, changing frame structure, adding arrows, or adjusting spacing in diagrams/1.input/**. Routes to the derived-value register and to the corpus checks that will judge the work.

2026-08-23

diagram-redraw

Redraw rough sketches or inconsistent diagrams into on-brand SVG and draw.io outputs. Use when adding a new diagram slug, translating a rough source into generator code, picking local icons, wiring compare pages, or producing editable outputs.

2026-08-21

level-assignment

Assign correct frame levels in YAML when nesting > 0. Use when creating or modifying a frame YAML that contains containers (items with children). Ensures siblings share the same visual class.

2026-08-20

Ver todos los de este repositorio

Diagram build and validate

When to use

Frame loader, layout engine, render, or preview code changed.

A frame YAML in scripts/diagrams/frames/ changed.

A new frame YAML was added.

A deliverable SVG changed and needs sanitization.

Procedure

Run npm --prefix packages/layout-engine test (TS — primary).

Run npm --prefix apps/preview test when preview routes, save flows, or shell behavior changed.

Run node scripts/check_no_new_python.mjs (spec 038 ratchet).

Start the preview server and confirm changed diagrams load at http://127.0.0.1:8100/view/v3:<slug> (manual look or tests — no agent screenshots unless the user asks).

Sanitize changed deliverable SVGs with python scripts/svg_illustrator_sanitize.py --write <svg>.

Update AGENTS.md (Handover section), TODO.md, or AGENT-INBOX.md only if the change altered current state or left durable follow-up.

Check the touched Markdown files for errors if the editor reports any.

Spot-check the changed SVG for syntax or portability issues.

Guardrails

Visual rules (gutter consistency, arrow clearance, typography hierarchy, box height floor, frame classes, separator sizing) are in DIAGRAM.md; runtime constants are in packages/layout-engine/src/tokens.ts and frame-classes.ts. Read both before running this procedure.

Key constraints to verify during build:

Do not skip the focused TypeScript tests when loader, layout, render, or preview code changed.

Do not add new Python product-path files; the ratchet must stay green.

Do not skip the sanitizer for changed deliverable SVGs.

Text must not overlap arrows, borders, icons, or other text.

Browser-verify the changed diagram in the v3 preview before treating the work as done (tests or user-confirmed load — not automatic screenshots).

When an arrow crosses helper text, change anchor sides or add waypoints — do not accept crossings.