From trousse
Orchestrates diagram creation with iterative render-and-check workflow. Invoke FIRST when asked to 'create a diagram', 'Venn diagram', 'flow chart', 'architecture diagram', 'visualize this' — ensures CRAP-principled self-critique before showing user, preventing amateur layouts and low-contrast text. Composes with brand skills for styling. (user)
npx claudepluginhub spm1001/batterie-de-savoir --plugin trousseThis skill is limited to using the following tools:
Create conceptual charts and diagrams as SVG, render to PNG, self-critique, iterate, and show user.
Generates 13 types of editorial-quality HTML+SVG diagrams (architecture, flowcharts, sequences, ER models, timelines) for blog posts and documentation with brand-matched styling and no external dependencies.
Generates standalone HTML files with inline SVG for 13 diagram types: architecture, flowcharts, sequences, state machines, ERDs, timelines, swimlanes, quadrants, trees, and more. Customizable style guide with first-run onboarding.
Generates branded infographics using @antv/infographic with 114 templates across 7 categories for data visualizations, process diagrams, timelines, and comparisons.
Share bugs, ideas, or general feedback.
Create conceptual charts and diagrams as SVG, render to PNG, self-critique, iterate, and show user.
User typically provides:
Clarify these before drawing. The structure is theirs, the execution is yours.
If a brand skill exists (e.g., itv-brand), read its specs for:
If no brand specified, use sensible defaults:
Canvas: 1280×720 (16:9) default. Brand skill may override.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
<rect x="0" y="0" width="1280" height="720" fill="#BACKGROUND"/>
<!-- Content -->
</svg>
For human-editable SVGs: Structure multi-line text as siblings in one transform group:
<g transform="translate(250, 175)">
<text x="0" y="0" text-anchor="middle">Line One</text>
<text x="0" y="28" text-anchor="middle">Line Two</text>
</g>
This keeps lines together as one selectable object in editors like Inkscape. (Note: Affinity breaks this apart on import — see references/svg-interop.md.)
CRITICAL: Never create separate unlinked <text> elements for lines that belong together semantically. If "New stories / to tell" is one label, it's one group — always. Ungrouped lines become editing nightmares.
Prerequisite: brew install librsvg — required for arrow markers and full SVG rendering fidelity.
rsvg-convert -w 1280 -h 720 input.svg -o /tmp/chart.png
sips is faster but silently drops SVG markers (arrows, arrowheads). Only use sips for diagrams with no markers. If rsvg-convert is not installed, warn the user before rendering — arrows will be missing.
Read the PNG and critique against CRAP principles before showing user:
Proximity — Are related items grouped?
Alignment — Do elements connect visually?
Repetition — Is styling consistent?
Contrast — Is hierarchy clear?
Composition Check — After CRAP, step back and ask:
Centering calculation:
left_edge = leftmost content x-coordinate
right_edge = rightmost content x-coordinate
content_center = (left_edge + right_edge) / 2
offset = canvas_center - content_center
# Shift everything by offset
See references/design-principles.md for detailed interventions.
View the PNG at 50-75% size (or squint). Problems that hide at full size emerge:
If something looks wrong small, it IS wrong.
If issues found, fix and render again. One fix often creates another problem — repositioning to fix an overlap can create a new gap; resizing text can break alignment. Run at least two critique cycles before declaring done.
Common fixes:
Before showing user, ask: what's missing from the domain? You're visualising someone's mental model — have you captured all the key elements they'd expect to see? If the diagram is about "data partnerships" and you only listed two when there are three, the user will notice. This isn't about design; it's about content accuracy.
open -a "Google Chrome" /tmp/chart.png
Or copy to Desktop if user needs the file.
Title > Highlighted element > Content. Three levels maximum. The title is largest. The key insight (e.g., Venn intersection) is second. Everything else supports these. The difference between levels should be obvious — 2x size minimum between title and body text.
In Venn diagrams, intersection text should be visually contained within the overlap shape. Each piece of content should be unambiguously inside its region.
No straddling, no ambiguity about "which side does this belong to?" Content occupies clear territory.
Circle labels, box labels — keep clear space from edges. Position labels at "clock positions" (10 o'clock, 2 o'clock) rather than centered above. Text inside shapes (cards, banners, rounded rectangles) should be inset 10-15px from borders on all sides — text touching shape edges looks cramped and accidental.
When placing multiple detail items within a region (e.g., items inside a Venn circle), scatter them organically to fill the territory. Don't default to neat vertical stacks or bullet-list layouts — that's document thinking, not visual thinking. Let items breathe and occupy the space naturally. Stacking looks rigid; scattering looks designed.
Labels and titles get consistent Title Case capitalisation.
Review labels for specificity before finalising. Bare nouns often need modification to land:
Ask: would someone unfamiliar with the context understand what this means? If not, add the adjective.
Before removing any element, ask: "What job is this doing?"
Visual metaphors have rules. Breaking them breaks comprehension:
If your visual breaks the metaphor's rules, the viewer's mental model breaks.
Not every region needs a label. In Venn diagrams, if an overlap's meaning is self-evident from the surrounding content, leave it empty. Labelling everything creates noise. The unlabelled center can be more powerful than a forced "synergy" label. Ask: does this label add meaning, or am I labelling because I feel I should?
Everything needs a visual relationship to something else:
Never use emoji or Unicode symbols as visual elements. They render inconsistently across platforms, browsers, and export formats. Use proper SVG shapes — a circle with a checkmark path, not ✅. A triangle with an exclamation mark, not ⚠️.
Hierarchy of preferences:
If you need a key, contain it. If you're adding labels to explain what colors mean, the colors might not be working.
| Element | Size | Notes |
|---|---|---|
| Title | 36-40px | Largest, top hierarchy |
| Highlighted text | 24-28px | Second hierarchy |
| Labels | 20-24px | Circle/region labels |
| Content text | 18-20px | Inside regions |
| Strokes | 3-4px | Circle outlines, connectors |
When a brand skill exists:
Example: For ITV-branded charts, also invoke the itv-styling skill.
| Pattern | Problem | Fix |
|---|---|---|
| Skip self-critique | Quality issues persist | Always render and check before showing user |
| Low contrast text | Illegible on projection | White/near-white on dark, WCAG 4.5:1 minimum, test at 50% zoom |
| Crowded layouts | Visual overload | 3-4 key elements per visual, split rather than shrink |
| Wimpy size differences | Hierarchy invisible | 2x minimum between levels (36px title / 18px body) |
| Text touching shape edges | Looks cramped | 10-15px inset on all sides |
| Single fix, no re-check | New problems introduced | Two critique cycles minimum |
| Same dark background every time | Monotonous, mismatched tone | Vary palette to match content |
| Emoji as icons | Inconsistent rendering | Use SVG shapes |
| Skip brand check | Inconsistent styling | Load brand skill first when brand applies |
references/design-principles.md — Full CRAP framework with SVG-specific interventionsreferences/slide-design-principles.md — Slide-specific thresholds (spacing, density, layout vocabulary). Load when output is for presentations. Universal rules (marked U) apply to all diagrams.references/svg-interop.md — SVG editor compatibility notesreferences/svg-recipes.md — Code snippets for common elements