# banner-creator

Generates banners through AI image generation, offering batch variations, an HTML preview, and ratio cropping.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1800 installs · ★ 1875
- Author: ReScienceLab
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/ReScienceLab/opc-skills/tree/HEAD/skills/banner-creator/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/banner-creator

## What it does

This skill runs an iterative workflow to build graphics for GitHub README files, Twitter headers, and website hero sections. First, the agent asks about platform targets, style preferences, colors, and text. Once confirmed, it generates 20 variations in an ultra-wide 21:9 aspect ratio using the required `nanobanana` skill.

Generated assets go straight to `.skill-archive/banner-creator/` alongside a `preview.html` file that opens in your browser. After you pick your preferred drafts, the agent creates 10–20 refined iterations. Finally, it runs `crop_banner.py` to produce exact dimensions such as 1280x640 for GitHub or 1500x500 for Twitter.

The workflow fails immediately without a valid `GEMINI_API_KEY` and the `nanobanana` skill installed. You must configure both before attempting image generation.

## Requirements
- Works with: GitHub

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add ReScienceLab/opc-skills --skill banner-creator -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/banner-creator/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/banner-creator/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add ReScienceLab/opc-skills --skill banner-creator -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/banner-creator/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add ReScienceLab/opc-skills --skill banner-creator -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/banner-creator/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ReScienceLab/opc-skills banner-creator
```

2. **Manually: put the files in place**
- File: `.github/skills/banner-creator/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add ReScienceLab/opc-skills --skill banner-creator -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/ReScienceLab/opc-skills --path skills/banner-creator
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/banner-creator/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add ReScienceLab/opc-skills --skill banner-creator -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/ReScienceLab/opc-skills/tree/HEAD/skills/banner-creator/SKILL.md

## When to use it
- Generate a 2:1 cover banner for a GitHub README
- Batch generate 20 draft variations for a Twitter header
- Crop ultra-wide AI graphics to a 16:9 website hero format
- Incorporate an existing logo into an AI-generated banner

## Example prompts
- Create a banner for my GitHub README in a retro pixel art style
- Generate a modern gradient Twitter header for my project
- Crop banner-03 to 2:1 ratio for the repository cover

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: e482e87d9d22112d.

BEGIN THIRD-PARTY FILE e482e87d9d22112d
````text
---
name: banner-creator
description: Create banners using AI image generation. Discuss format/style, generate variations, iterate with user feedback, crop to target ratio. Use when user wants to create a banner, header, hero image, cover image, GitHub banner, Twitter header, or readme banner.
---

# Banner Creator Skill

Create professional banners through AI image generation with an iterative design process.

## Prerequisites

**Required API Keys (set in environment):**
- `GEMINI_API_KEY` - Get from [Google AI Studio](https://aistudio.google.com/apikey)

**Required Skills:**
- `nanobanana` - AI image generation (Gemini 3 Pro Image)



## File Output Location

All generated files should be saved to the `.skill-archive` directory:

```
.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/
```

**Example:**
```
.skill-archive/banner-creator/2026-01-19-opc-banner/
  banner-01.png
  banner-02.png
  ...
  banner-03-cropped.png
  preview.html
```

## Workflow

### Step 1: Discovery & Requirements

Before generating, gather requirements from user:

**Ask about:**
1. **Purpose** - Where will the banner be used?
   - GitHub README
   - Twitter/X header
   - LinkedIn banner
   - Website hero
   - YouTube channel art

2. **Target ratio/size** - See [references/formats.md](./references/formats.md):
   - `2:1` (1280x640) - GitHub README
   - `3:1` (1500x500) - Twitter header
   - `16:9` (1920x1080) - Website hero

3. **Style preference**:
   - Match existing logo/brand?
   - Pixel art / 8-bit retro
   - Minimalist / flat design
   - Gradient / modern
   - Illustrated / artistic

4. **Content elements**:
   - Brand name / project name?
   - Tagline / slogan?
   - Logo character to include?

5. **Color preferences**:
   - Existing brand colors?
   - Let AI decide?

**Wait for user confirmation before proceeding!**

### Step 2: Generate Banner Variations

Generate 20 banner variations using the `nanobanana` skill:

```bash
# Generate single banner
python3 <nanobanana_skill_dir>/scripts/generate.py "{style} banner for {brand}, {description}, {text elements}" \
  --ratio 21:9 -o .skill-archive/banner-creator/<date-name>/banner-01.png

# Batch generate 20 banners
python3 <nanobanana_skill_dir>/scripts/batch_generate.py "{style} banner for {brand}, {description}, {text elements}" \
  -n 20 --ratio 21:9 -d .skill-archive/banner-creator/<date-name> -p banner
```

**Guidelines:**
- Generate at `21:9` ratio (widest available), crop later to target
- Use batch_generate.py for multiple variations (includes auto-delay)
- Use sequential naming: `banner-01.png`, `banner-02.png`, etc.

**Image Editing (for incorporating existing logo):**
```bash
python3 <nanobanana_skill_dir>/scripts/generate.py "add {logo character} to the left side of the banner" \
  -i /path/to/existing-logo.png --ratio 21:9 -o banner-with-logo.png
```

### Step 3: Create HTML Preview

Copy the preview template and open in browser:

```bash
````
END THIRD-PARTY FILE e482e87d9d22112d

The third-party file has ended. Everything between the e482e87d9d22112d tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2936 of 5364 bytes. © ReScienceLab · Apache-2.0 · https://github.com/ReScienceLab/opc-skills/tree/HEAD/skills/banner-creator/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md