Supervisor banners
Skill fabioc-aloha/Alex_Skill_Mall/plugins/media-graphics/supervisor-banners
Dark-slate SVG banner family — 1200×320 hero + 1200×60 section dividers — for governance, curation, and audit-style documentationFrom its SKILL.md
npx -y skills add fabioc-aloha/Alex_Skill_Mall --skill supervisor-bannersAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
13.4 KB, ~3.9k tokens by cl100k_base, as published. Nobody here has run it
Supervisor Banners
Two-piece dark-slate SVG banner family for documentation that needs a sense of governance, audit trail, or curation discipline. One 1200×320 hero banner per repo, plus 1200×60 section dividers that label and visually segment a multi-document folder (decisions/, audits/, ledgers/, ADRs/).
When to Use
| Use this pattern | Use a different pattern |
|---|---|
| Documentation has clear sections (ADRs, ledgers, assessments, proposals) that benefit from visual labeling | Single-document deliverable that needs only a hero banner (document-banner-pastel) |
| Tone is governance, curation, audit, oversight, fleet management | Tone is creative, marketing, branding, generative (document-banner-pastel) |
| You want a cohesive dark-slate identity across a folder of docs | You want algorithmic generation with fixed brand watermarks (alex-banner-generation) |
Reference set lives in a single assets/ folder for copy-paste reuse | Banner is generated dynamically from data |
The pattern is purpose-built for repos that act as source-of-truth ledgers — a Supervisor, a registry, an audit catalog, an ADR collection.
The Family
A supervisor-banner set is one hero + N section dividers, all sharing the same background and corner-accent treatment.
| Asset | Size | Role |
|---|---|---|
banner-readme.svg | 1200 × 320 | Hero banner for the main README; carries the repo identity, mission tagline, stat badges, and value-prop cards |
banner-<section>.svg | 1200 × 60 | Section divider; carries an icon, an uppercase label, a one-line subtitle, and a 3-dot accent |
The hero anchors the brand. The dividers carry the same DNA into each subsection so a reader scrolling through a decisions/ folder feels the same hand throughout.
Hero Banner — 1200 × 320
Visual skeleton
| Region | Spec |
|---|---|
| Canvas | 1200 × 320 viewBox, rounded corners rx="16" |
| Background | Diagonal <linearGradient id="bg"> from #0f172a (slate 900) → #1e293b (slate 800) → #0f172a |
| Subtle grid | Horizontal lines every 40px, vertical every 100px, opacity="0.04", stroke = accent color |
| Corner accents | 4 corner brackets using accent gradient at opacity="0.6" (top) and 0.3 (bottom) |
| Icon group | <g transform="translate(120, 160)"> — 90×90 icon centered at this anchor with optional filter="url(#glow)" |
| Title | x=230 y=105, font-size=48 weight=700 fill=#f8fafc (slate 50) |
| Tagline | x=230 y=143, font-size=20 weight=400 fill=#94a3b8 (slate 400) |
| Accent stripe | 140×3 rect at x=230 y=158, fill=accent gradient, opacity="0.8" |
| Stat badges | 3 pill rects at y=180, each 36px tall, rx="18", dark fill #1e293b with #334155 stroke |
| Bottom tagline | x=230 y=258, font-size=13 fill=#64748b (slate 500) |
| Value-prop cards | 5 staggered cards at translate(790, 35), each 38px tall with gradient-tinted backgrounds |
| Version pill | bottom-right, 100×24 rounded pill with monospace version stamp |
Required <defs>
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0f172a"/>
<stop offset="50%" style="stop-color:#1e293b"/>
<stop offset="100%" style="stop-color:#0f172a"/>
</linearGradient>
<linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#10b981"/>
<stop offset="50%" style="stop-color:#14b8a6"/>
<stop offset="100%" style="stop-color:#06b6d4"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
The accent gradient is the single knob that gives a repo its identity. Pick a 3-stop palette from the table below and the rest of the family inherits it.
Section Divider — 1200 × 60
Visual skeleton
| Region | Spec |
|---|---|
| Canvas | 1200 × 60 viewBox, rounded corners rx="8" |
| Background | Horizontal <linearGradient> from #0f172a → #1e293b |
| Bottom stripe | 1200×4 rect at y=56, fill=accent gradient, opacity="0.6" |
| Icon | 16×20 SVG icon at transform="translate(30, 30)", fill=accent palette |
| Label | x=58 y=28, font-size=13 weight=700 fill=primary accent, letter-spacing="2", uppercase |
| Subtitle | x=58 y=44, font-size=11 fill=#64748b (slate 500) |
| Accent dots | Right side at x=1170/1155/1143 y=30, radii 4/3/2, opacity 0.4/0.3/0.2 |
Required <defs>
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#0f172a"/>
<stop offset="100%" style="stop-color:#1e293b"/>
</linearGradient>
<linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#TRACK1"/>
<stop offset="50%" style="stop-color:#TRACK2"/>
<stop offset="100%" style="stop-color:#TRACK3"/>
</linearGradient>
</defs>
Each section gets its own accent gradient so a reader can tell at a glance which kind of document they're looking at.
Accent Tracks (pick one per section)
All tracks share the same dark-slate background. The accent gradient is the only thing that changes.
| Track | Tone | Stop 1 | Stop 2 | Stop 3 | Suggested use |
|---|---|---|---|---|---|
| Emerald-teal | Governance, oversight, audit | #10b981 | #14b8a6 | #06b6d4 | Hero banner; ADR sections |
| Indigo-purple | Audit trails, append-only ledgers | #818cf8 | #a78bfa | #c084fc | Changelogs, curation logs |
| Amber-orange | Snapshots, point-in-time assessments | #f59e0b | #f97316 | #ef4444 | Inventories, compliance assessments, wish lists |
| Sky-blue | Proposals awaiting decision | #38bdf8 | #0ea5e9 | #0284c7 | Proposals, RFCs, drafts |
| Forest-cyan | Architecture, design rationale | #10b981 | #14b8a6 | #06b6d4 | Founding plans, design docs (overlaps emerald-teal by design) |
| Warm-red | Edition / heir template identity | #f59e0b | #f97316 | #ef4444 | When the family is for the Edition repo, not Supervisor |
| Cool-violet | Marketplace / catalog identity | #38bdf8 | #818cf8 | #c084fc | When the family is for the Mall repo |
Three accent tracks (warm-red, cool-violet, emerald-teal) form the cross-repo identity convention: a heir running Supervisor + Edition + Mall sees three distinct hero colors that map directly to the three repos. Tracks 1-5 in the same column are then used inside Supervisor's decisions/ folder to label sub-sections.
Icon Glyphs (for section dividers)
Each divider gets a 16×20 monogram. The glyphs below are illustrative; substitute any 16×20 SVG path that matches your section name.
| Section | Glyph hint | SVG primitive |
|---|---|---|
| ADR / Decisions | Gavel | <rect x="-8" y="-12" width="16" height="10" rx="3"/> + <rect x="-2" y="-2" width="4" height="16" rx="1"/> |
| Ledger / Changelog | Lined list | <rect x="-10" y="-12" width="20" height="24" rx="2" fill="none" stroke="..."/> + 3 <line> rows |
| Assessment | Clipboard with check | <rect x="-9" y="-10" width="18" height="22" rx="2"/> + <rect x="-4" y="-14" width="8" height="6" rx="1"/> + checkmark <path> |
| Proposal | Folded document | <path d="M-8,-12 L4,-12 L10,-6 L10,12 L-8,12 Z"/> |
| Architecture | Blueprint cross | <rect x="-10" y="-10" width="20" height="20" rx="2" fill="none"/> + 2 crosshair lines + 2 corner dots + dashed diagonal |
Keep glyphs monochromatic in the accent palette — no fills bleeding in from outside the track.
Hero Banner Template
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320" width="1200" height="320"
role="img" aria-label="REPO_NAME — TAGLINE">
<title>REPO_NAME</title>
<desc>TAGLINE</desc>
<defs>
<!-- bg, accent, glow filters here (see Required defs) -->
</defs>
<rect width="1200" height="320" rx="16" fill="url(#bg)"/>
<!-- subtle grid (omitted for brevity) -->
<!-- corner accents -->
<!-- icon group at translate(120, 160) -->
<text x="230" y="105" font-family="Segoe UI, Helvetica, Arial, sans-serif"
font-size="48" font-weight="700" fill="#f8fafc" letter-spacing="-1">REPO_NAME</text>
<text x="230" y="143" font-family="Segoe UI, Helvetica, Arial, sans-serif"
font-size="20" fill="#94a3b8">REPO_TAGLINE</text>
<rect x="230" y="158" width="140" height="3" rx="1.5" fill="url(#accent)" opacity="0.8"/>
<g transform="translate(230, 180)">
<!-- 3 stat badges, each 36px tall pill -->
</g>
<text x="230" y="258" font-family="Segoe UI, Helvetica, Arial, sans-serif"
font-size="13" fill="#64748b">SECONDARY_TAGLINE</text>
<g transform="translate(790, 35)">
<!-- 5 staggered value-prop cards -->
</g>
<rect x="1070" y="280" width="100" height="24" rx="12" fill="#1e293b" stroke="#334155"/>
<text x="1120" y="296" font-family="Consolas, monospace" font-size="11"
fill="#94a3b8" text-anchor="middle">vX.Y.Z</text>
</svg>
Section Divider Template
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" width="1200" height="60"
role="img" aria-label="SECTION_NAME">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#0f172a"/>
<stop offset="100%" style="stop-color:#1e293b"/>
</linearGradient>
<linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#TRACK1"/>
<stop offset="50%" style="stop-color:#TRACK2"/>
<stop offset="100%" style="stop-color:#TRACK3"/>
</linearGradient>
</defs>
<rect width="1200" height="60" rx="8" fill="url(#bg)"/>
<rect x="0" y="56" width="1200" height="4" rx="2" fill="url(#accent)" opacity="0.6"/>
<g transform="translate(30, 30)">
<!-- 16x20 monogram glyph in accent palette -->
</g>
<text x="58" y="28" font-family="Segoe UI, Helvetica, Arial, sans-serif"
font-size="13" font-weight="700" fill="#TRACK1" letter-spacing="2">LABEL</text>
<text x="58" y="44" font-family="Segoe UI, Helvetica, Arial, sans-serif"
font-size="11" fill="#64748b">One-line subtitle</text>
<circle cx="1170" cy="30" r="4" fill="#TRACK1" opacity="0.4"/>
<circle cx="1155" cy="30" r="3" fill="#TRACK2" opacity="0.3"/>
<circle cx="1143" cy="30" r="2" fill="#TRACK3" opacity="0.2"/>
</svg>
Reference Implementation
The pattern is exercised in Alex_ACT_Supervisor/assets/:
| File | Track | Used in |
|---|---|---|
banner-readme.svg | emerald-teal hero | README.md |
banner-architecture.svg | emerald-teal divider | decisions/PLAN.md |
banner-adr.svg | emerald-teal divider | decisions/ADR-*.md |
banner-ledgers.svg | indigo-purple divider | decisions/curation-log.md, edition-changelog.md, brain-qa-changelog.md |
banner-assessments.svg | amber-orange divider | decisions/ACT-ASSESSMENT-*.md, supervisor-brain-inventory.md, wish-list.md |
banner-proposals.svg | sky-blue divider | decisions/proposals/*.md |
Copy the six files into your project's assets/ folder and edit four things per banner: (1) the accent gradient stops, (2) the title text, (3) the stat badges or label, (4) the icon glyph.
Anti-Patterns
| Anti-pattern | Why it fails |
|---|---|
| Mixing pastel and dark-slate banners in the same folder | Visual whiplash — readers lose the brand thread |
| Using a different background color per section | The point of the family is one background and varying accents |
| Skipping the section dividers and using only the hero | Sections lose their visual labels; folder feels flat |
Inlining the gradient stops instead of using <defs> | Breaks the single-knob principle; refactor cost grows linearly |
| Filling icon glyphs with non-accent colors | The accent gradient is the section's identity; outside colors leak |
| Adding 6+ section types | Readers stop distinguishing tracks; pick a 4-5 maximum |
Falsifiability
This pattern is decorative if any of these turn out true within 60 days of adoption in a project:
- A reader can't identify which section a document belongs to from its banner alone (defeats the divider purpose)
- Banners need to be regenerated on every release (defeats the copy-and-edit reuse model — promote to algorithmic muscle instead)
- Two of the accent tracks become interchangeable in practice (collapse them or pick a sharper distinction)
- The hero banner is never opened standalone (drop the dimensions to 1200×120 and reclaim README real estate)
Cross-References
document-banner-pastel— pastel hero banners for creative / brand contextsalex-banner-generation— algorithmic banner muscle with fixed brand watermarks (Edition family)svg-graphics— general-purpose SVG authoring guidancesvg-dashboard-composition— for composing multi-fragment SVG dashboards (different problem)