一键在 Manus 中运行任何 Skill

diagram-language-sync

星标2

分支0

更新时间2026年7月7日 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.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

canonical

canonical/diagram-generator

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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.

同仓库更多 Skills

同仓库

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.