Banner design

Skill samhcus/skills/skills/banner-design

Skills for any AI agent harness, by Mad House

Install

npx -y skills add samhcus/skills --skill banner-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
3 stars3 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.

What its author says it does

Copied from the file, not written here

Generate SVG banners and navigation buttons for GitHub README files. Creates repeatable, customizable SVG assets - hero banners with title, subtitle, and tagline, and sets of rounded-corner navigation buttons with Inter font. Use when building or refreshing a repo README, updating branding, or generating any SVG visual assets. Triggers on "generate banner", "create svg banner", "make readme buttons", "banner for the readme", "design banner", "add banner to readme".

SKILL.md

2.8 KB, as published. Nobody here has run it

Banner Design

Generates SVG hero banners and navigation button sets for GitHub READMEs. All output is repeatable - run again to regenerate with different parameters.

Tools

scripts/generate-banner.sh

Generates a hero SVG banner (dark background, red accent, Inter font).

Input (env vars):
- BANNER_TITLE - main title text (uppercased in output)
- BANNER_SUBTITLE - secondary red label below title
- BANNER_TAGLINE - small muted line (default: "written with love")
- BANNER_OUTPUT - output path (default: ./assets/banner.svg)
- BANNER_ACCENT - accent color (default: #cc2200)
- BANNER_WIDTH / BANNER_HEIGHT - dimensions (default: 900x160)
Output: {generated, output, title, subtitle, dimensions}

scripts/generate-buttons.sh

Generates a set of SVG navigation buttons - one file per label.

Input (env vars):
- BUTTONS_LABELS - comma-separated button labels
- BUTTONS_OUTPUT_DIR - where to write files (default: ./assets/buttons/)
- BTN_BG - background color (default: #cc2200)
- BTN_RADIUS - corner radius (default: 4 - slightly rounded)
- BTN_HEIGHT / BTN_FONT_SIZE / BTN_PADDING - size tuning
Output: JSON manifest with {generated, output_dir, buttons: [{label, slug, file}]}

Workflow

Generating a banner

BANNER_TITLE="Mad House" BANNER_SUBTITLE="How-Tos" BANNER_TAGLINE="written with love" \
  BANNER_OUTPUT="~/dev/mad-house/how-tos/assets/banner.svg" \
  bash scripts/generate-banner.sh

Generating navigation buttons

BUTTONS_LABELS="Vibe Coding,VPS & Server,Bots,Incubation,Org Setup" \
  BUTTONS_OUTPUT_DIR="~/dev/mad-house/how-tos/assets/buttons/" \
  bash scripts/generate-buttons.sh

Using in a README

Reference the SVGs as relative paths in Markdown:

![Mad House How-Tos](assets/banner.svg)

<a href="#vibe-coding"><img src="assets/buttons/btn-vibe-coding.svg" /></a>
<a href="#vps--server"><img src="assets/buttons/btn-vps--server.svg" /></a>

Rules

Always run from the repo root so relative paths resolve correctly
If regenerating, existing files are overwritten - safe to re-run
BANNER_TITLE and button labels are uppercased in the SVG output automatically
SVGs use Inter with system font fallbacks - works on GitHub's renderer without external resources