converge-diagramslisted

This skill should be used when creating, editing, or reviewing inline SVG diagrams for the Converge landing site (anything under src/pages/**, src/components/sections/**, or src/content/blog/**). It encodes the component-based primitive system under src/components/diagrams/, the Converge dark-theme palette + shape semantics, the preview-and-verify loop using headless Chrome against the Astro dev/preview server, and the pitfalls that cost iterations to discover. Trigger phrases include "add a diagram to the landing page", "edit the Architecture diagram", "replace the SVG in the Hero", "make a diagram for the FeatureGrid", "draw the playbook lifecycle", "illustrate convergence", "check how the diagram looks".
openplaybooks-dev/converge · ★ 3 · AI & Automation · score 74

Install: claude install-skill openplaybooks-dev/converge

# Converge Landing Diagrams Inline SVG diagrams on the Converge landing site are authored as Astro components under `src/components/diagrams/`, composed from shape-semantic primitives that share the site's dark-theme palette and styling. One-off inline `<svg>` blocks inside section components (e.g. `ConvergenceJourney.astro`) are legacy decoration — always build new explanatory diagrams with the primitives so they stay consistent across the page. ## When this skill applies Apply this skill when: - Adding a new diagram to a landing-page section (`.astro` under `src/components/sections/` or `src/pages/`). - Adding or editing a diagram inside a blog post (`.mdx` under `src/content/blog/`). - Editing or replacing an existing diagram component under `src/components/diagrams/`. - Reviewing a rendered diagram for layout or style issues. - Reworking a legacy one-off inline `<svg>` into the primitive system. Do not apply for: - Pure decorative animations (e.g. `ConvergenceJourney.astro`) that exist only to set mood — they aren't trying to explain anything and don't need shape semantics. - General SVG editing outside `src/components/diagrams/` (icon files, social cards, OG images). ## The canonical reference Read `src/components/diagrams/README.md` **first**. It documents the shape vocabulary, palette vars from `src/styles/tokens.css`, shared CSS classes, animation conventions, directory layout, and the MDX/Astro embedding pattern. This SKILL.md assumes that referen