animated-architecturelisted

Create a fixed-layout, dark-canvas, hand-drawn animated architecture diagram with flowing glow paths and pulsing highlights. Two layouts: three-card (parallel stages) and conveyor (factory-line process with feedback belt). Produces .excalidraw + .png + animated .gif from a JSON spec. Trigger on: "animated architecture diagram", "animated GIF diagram", "hand-drawn architecture animation", "architecture diagram gif", "animated system diagram", "factory-line process graphic", "premium architecture diagram with animation", or when the user wants a dark themed architecture flow with motion (distinct from static excalidraw-diagram, mermaid-diagram, or scroll-animated animated-website).
petermcalister/shared-skills · ★ 2 · Web & Frontend · score 68

Install: claude install-skill petermcalister/shared-skills

# Animated Architecture Diagram Generate a **fixed-layout** (1210x1138), dark-canvas, hand-drawn architecture diagram with animated glow paths. One JSON spec drives the deliverables: | Output | Purpose | |--------|---------| | `.png` | Static hero frame (premium finish: glow, grain, vignette) | | `.gif` | Animated flow (~41 frames; multi-MB is normal) | | `.excalidraw` | Editable hand-drawn source (fontFamily 5 / Excalifont pin) | | `.layout-audit.json` | Per-element geometry (every text extent, icon bbox, container, declared containment rule) — the data the visual checks run on | Two layouts share the same spec fields (copy stays portable between them): the default `"three-card"` reads as parallel stages; `"conveyor"` reads as sequential factory stations with a quality gantry and a feedback return belt. Pick with the optional top-level `"layout"` field. ## Requirements - **uv** on PATH (runs the PEP 723 renderer; Pillow>=10.1 declared in the script block) - **Bundled renderer:** `references/render_animated_diagram.py` — self-contained, no imports from this repo's Python tree. Invoke only via `uv run ${CLAUDE_PLUGIN_ROOT}/...` below. - No FFmpeg / ffprobe — validation is the script's own `--check` ## Workflow ### Step 1: Extract architecture content From the user's description (or source doc), identify: - Title prefix, highlight phrase, subtitle - Up to **4** input sources (icons: folder, file, scan, shield, db, hash, package) - **3** core pipeline cards (validate