메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.
Sync broader design-language specs into the diagram system. Use when importing typography, spacing, or grid rules from the upstream design language into tokens.ts, shared renderer constants, draw.io style sync, or layout helpers.
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.
Safely modify manually edited draw.io files. Use when preparing a review copy, checkpointing an original draw.io file, promoting reviewed changes back, or documenting a revert path for protected manual edits.
| name | diagram-build-validate |
| description | 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. |
| argument-hint | Describe which diagram slugs or files changed |
scripts/diagrams/frames/ changed.npm --prefix packages/layout-engine test (TS — primary).npm --prefix apps/preview test when preview routes, save flows, or shell behavior changed.node scripts/check_no_new_python.mjs (spec 038 ratchet).http://127.0.0.1:8100/view/v3:<slug> (manual look or tests — no agent screenshots unless the user asks).python scripts/svg_illustrator_sanitize.py --write <svg>.AGENTS.md (Handover section), TODO.md, or AGENT-INBOX.md only if the change altered current state or left durable follow-up.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: