diagram-designlisted

# Diagram Design Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system. Twenty-seven visual types. Semantic patterns describe behavior independently; type references describe layout. For the full reference files (type-*.md, style-guide.md, onboarding.md, animation.md, semantic-patterns.md, export.md, import-*.md, primitive-*.md), clone the upstream repo at `https://github.com/cathrynlavery/diagram-design` and read `skills/diagram-design/references/`. --- ## 0. First-time setup — style guide gate **Before generating your first diagram in a new project, verify the style guide has been customized.** Don't silently ship default-skinned diagrams into a branded project. The default tokens are paper `#faf7f2`, ink `#1c1917`, accent `#b5523a` (rust). If they're still the shipped defaults, **pause and ask the user**: > *"This is your first Schematic in this project. The style guide is still at the default (neutral stone + rust). Do you want to customize it to match your brand first? Options: (a) pull from your website URL, (b) extract from an installed skill, (c) extract from a local folder / design-system directory, (d) paste tokens manually, (e) proceed with the default for now."* Then branch: - **(a)** → fetch the site, extract palette + fonts, propose a diff, and write `style-guide.md`. - **(b)** → ask which skill, read its SKILL.md / CSS / token files, map to semantic roles, propose diff. - **(c)** →