| name | alex-banner-generation |
| description | Generate current-brand Alex SVG banners with the canonical x-loop and navy/emerald/teal/cyan palette. Use for READMEs, plans, notes, and release artifacts. |
| lastReviewed | 2026-07-13T00:00:00.000Z |
Alex Banner Generation
Generate visually consistent, self-contained SVG banners using the current Alex brand template.
When to Use
- User asks for a banner, header image, or document decoration
- Creating a significant new document (README, PLAN-*.md, ROADMAP, CHANGELOG)
- User mentions adding a "header" or "branded image" to a doc
Looking for a lighter, hand-authored variant? The Mall ships document-banner-pastel -- pastel 1200x240 banners with content-specific iconography (tracks / hub-and-spokes / mockup / badge / symbol). Use that pattern for branding, education, or audience-facing docs; use this muscle for technical artifacts that need brand-stamped consistency.
Brand Constants (do not change)
| Element | Value |
|---|
| Dimensions | 1200 × 320 px |
| Background | #0f172a (Slate 900) |
| Accent | #10b981 → #14b8a6 → #06b6d4 |
| Brand label | ALEX + ARTIFICIAL CRITICAL THINKING |
| Mark | Canonical emerald x-loop, embedded in output |
| Letter spacing | 0 |
| Title | 56px / weight 700 / #f1f5f9 |
| Subtitle | 18px / weight 600 / #94a3b8 |
| Watermark | ~100px / weight 800 / #f1f5f9 / 10% opacity |
Watermark Categories
Pick the one that matches the document's role:
| Watermark | Use For |
|---|
ACT | Critical-thinking content, ACT framework artifacts, manifestos |
EDITION | Top-level repo identity (root README, ABOUT) |
DOCS | User guides, tutorials, reference material |
RELEASE | CHANGELOGs, release notes, version stamps |
PLAN | Planning docs, roadmaps, milestone trackers |
NOTE | Session notes, ad-hoc memos |
If no category fits, ask the user before inventing one — the muscle rejects unknown watermarks.
Procedure
Step 1 — Gather inputs
Ask the user only for what's missing. Defaults:
- Title — the document's name. Keep ≤ 32 chars (the muscle enforces this).
- Subtitle — a single-line purpose statement, ≤ 80 chars. Lift it from the doc's first paragraph or its north-star sentence; don't invent.
- Watermark — pick from the table above based on doc role.
- Filename — defaults to
assets/banner-<title-slug>.svg. Override with --out if the user wants a specific path.
Step 2 — Generate
node .github/skills/alex-banner-generation/scripts/generate-banner.cjs \
--title "Document Title" \
--subtitle "One-line purpose statement." \
--watermark PLAN
Add --force to overwrite an existing file. Add --out path/to/banner.svg for a non-default location.
The muscle exits 0 on success, 1 on validation errors (length, watermark whitelist), 2 on filesystem errors (file exists without --force).
Step 3 — Embed in the document
Add this line just under the document's H1:
The muscle prints the exact embed line; copy it verbatim.
Subtitle Craft (the LLM-judgment part)
The muscle takes whatever subtitle you pass — quality is your job. Good subtitles:
- State the document's purpose, not its contents (
"Critical thinking made operational." not "This document explains ACT.")
- Are one clause, not a sentence list
- End with a period
- Avoid hype ("revolutionary", "ultimate") and meta language ("this document")
- Match the document's actual first paragraph — don't promise things the doc doesn't deliver
If you're not sure the subtitle is right, show two options to the user before generating.
Validation Checklist
Before declaring done:
PNG Conversion (optional)
GitHub renders SVG banners natively in README.md and most surfaces, so SVG is preferred. If a downstream tool needs PNG:
npx svgexport assets/banner-foo.svg assets/banner-foo.png 1200:320
Don't ship PNGs unless required — they double the asset weight and can drift from the SVG source.
Boundaries
- The muscle does not pick the watermark or write the subtitle — that is an LLM/skill judgment call.
- The muscle does not edit the source markdown — embedding the banner in the doc is a separate step.
- Custom colors / fonts / dimensions are not supported. If the user wants a non-template design, generate raw SVG manually rather than forking the muscle.
Falsifiability
Revisit this skill by 2026-08-26 (90 days) or sooner if any of the following fires:
- Banners shipped via this skill are aesthetically rejected by the user ≥3 times in a quarter
- The SVG pipeline renders incorrectly in >10% of target environments (GitHub, VS Code preview, browsers) over any 30-day window
- The muscle adds new template categories without a corresponding entry being added to this skill within the same change
- Users request customization the skill forbids (custom colors/fonts/dimensions) ≥3 times in a quarter — signal the brand constants are too tight
