Run any Skill in Manus with one click

banner-design

Stars3

Forks0

UpdatedMay 20, 2026 at 18:14

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".

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

madebymadhouse

madebymadhouse/skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

File Explorer

3 files

SKILL.md

readonly

name	banner-design
description	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".
allowed-tools	Bash, Read, Write

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

More from this repository

same repository

incubate

madebymadhouse/skills

Mad House project lifecycle manager. Create, list, stage, promote, ship, and archive projects in ~/dev/mad-house/lab. Every project has a stage (concept → prototype → building → shipped → maintained → archived) and a type (code, game, creative, tool, experiment, content, bot). Use when managing lab projects, moving a project between stages, promoting from lab to a GitHub org, marking something as shipped, or archiving a project.

2026-05-273

repo-bootstrap

madebymadhouse/skills

Bootstrap a new GitHub repo with all standard Mad House files. Creates the repo, clones it locally under the correct org path, and writes README, .gitignore, .env.example, Dockerfile, CHANGELOG, and AGENTS.md template. Triggers on "new repo", "bootstrap a repo", "create a new project", "start a new repo", "scaffold repo".

2026-05-273

agent-fleet

madebymadhouse/skills

Manage the Mad House agent fleet. List all agents in the central registry, check which repos have which agents deployed, and sync agents from the registry to target repos. Use when adding a new agent to the fleet, syncing agents across repos, auditing what agents are deployed where, or rebuilding the agent registry. Triggers on "sync agents", "deploy agents", "what agents are deployed", "add agent to repo", "agent fleet", "update agents".

2026-05-203

cargo-check

madebymadhouse/skills

Run cargo fmt, clippy, and tests on a Rust workspace before committing. Catches format failures that break CI. Triggers on "cargo check", "check rust", "run rust tests", "before I commit rust", "fmt and test", "check the workspace", "is the rust build clean".

2026-05-203

co-author-fix

madebymadhouse/skills

Check whether the last git commit in the current repo has the Claude co-author trailer. If missing, amend it. Triggers on "add co-author", "fix co-author", "missing co-author", "add claude to commit", "co-author trailer".

2026-05-203

confirm-gate

madebymadhouse/skills

Surface your interpretation of the task before writing any code or making any changes. Use this at the START of any Build mode task - before opening a single file to edit. Critical when the request contained multiple ideas, was written in fragments, affects more than 2 files, or has any ambiguity about scope. Triggers on "build", "create", "add", "implement", "write", "make", "fix", "update" when the request is non-trivial. Do not skip this step to save time - a wrong interpretation wastes more time than a confirmation.

2026-05-203

name	banner-design
description	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".
allowed-tools	Bash, Read, Write

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