Run any Skill in Manus with one click

diagram-language-sync

Stars2

Forks0

UpdatedJuly 7, 2026 at 18:24

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

canonical

canonical/diagram-generator

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	diagram-language-sync
description	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.
argument-hint	Describe the upstream spec source and which token families are changing

Diagram language sync

When to use

The broader design language changed typography, spacing, or grid rules.
Renderer constants need to absorb upstream design-system values.
draw.io style defaults need to reflect new spacing or type decisions.

Procedure

Read the upstream design-language source, then read packages/layout-engine/src/tokens.ts and packages/layout-engine/src/frame-classes.ts. Read draw.io scripts only if the change affects draw.io outputs.
Update code constants first in TypeScript.
Update DIAGRAM.md only if the public-facing diagram contract changed.
Rebuild outputs with the diagram-build-validate skill.
Audit changed diagrams specifically for text ascent, line spacing, box growth, connector spacing, and icon padding regressions.
Record any newly generalized mapping rules in DIAGRAM.md only when the public diagram contract changed; otherwise leave them in code or note durable follow-up in TODO.md / AGENT-INBOX.md.

Guardrails

Do not let DIAGRAM.md contradict tokens.ts / frame-classes.ts.
Keep imported values explicit; avoid burying new design-language rules in chat-only rationale.
Prefer one source-to-token mapping over per-diagram overrides.
Unless the user explicitly asks for another tier, keep the repo aligned to the current diagram pilot: 18px body text, 8px baseline unit, 24px line step, and 24px structural gutters.

More from this repository

same repository

level-assignment

canonical/diagram-generator

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-07-132

diagram-redraw

canonical/diagram-generator

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-07-072

diagram-build-validate

canonical/diagram-generator

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.

2026-06-132

drawio-review-promote

canonical/diagram-generator

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.

2026-04-252

name	diagram-language-sync
description	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.
argument-hint	Describe the upstream spec source and which token families are changing

Diagram language sync

When to use

The broader design language changed typography, spacing, or grid rules.
Renderer constants need to absorb upstream design-system values.
draw.io style defaults need to reflect new spacing or type decisions.

Procedure

Read the upstream design-language source, then read packages/layout-engine/src/tokens.ts and packages/layout-engine/src/frame-classes.ts. Read draw.io scripts only if the change affects draw.io outputs.
Update code constants first in TypeScript.
Update DIAGRAM.md only if the public-facing diagram contract changed.
Rebuild outputs with the diagram-build-validate skill.
Audit changed diagrams specifically for text ascent, line spacing, box growth, connector spacing, and icon padding regressions.
Record any newly generalized mapping rules in DIAGRAM.md only when the public diagram contract changed; otherwise leave them in code or note durable follow-up in TODO.md / AGENT-INBOX.md.

Guardrails

Do not let DIAGRAM.md contradict tokens.ts / frame-classes.ts.
Keep imported values explicit; avoid burying new design-language rules in chat-only rationale.
Prefer one source-to-token mapping over per-diagram overrides.
Unless the user explicitly asks for another tier, keep the repo aligned to the current diagram pilot: 18px body text, 8px baseline unit, 24px line step, and 24px structural gutters.