Add banner-creator skill

- SKILL.md with 6-step workflow
- crop_banner.py script for ratio/size adjustment
- preview.html template (3-column grid)
- formats.md reference for platform sizes
- opc-banner-creation.md example

Author: Jing-yilin

skills.json

@@ -246,6 +246,43 @@
         "github": "https://github.com/ReScienceLab/opc-skills/tree/main/skills/logo-creator",
         "example": "https://github.com/ReScienceLab/opc-skills/blob/main/skills/logo-creator/examples/opc-logo-creation.md"
       }
+    },
+    {
+      "name": "banner-creator",
+      "version": "1.0.0",
+      "description": "Create banners using AI image generation. Discuss format/style, generate variations, iterate with user feedback, crop to target ratio for GitHub, Twitter, LinkedIn, etc.",
+      "icon": "image",
+      "color": "F59E0B",
+      "triggers": ["banner", "header", "hero image", "cover image", "create banner", "github banner", "twitter header", "readme banner"],
+      "dependencies": [],
+      "auth": {
+        "required": false,
+        "type": null,
+        "note": "Uses nano-banana-pro for image generation (no additional API keys needed)"
+      },
+      "install": {
+        "user": {
+          "claude": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t claude banner-creator",
+          "droid": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t droid banner-creator",
+          "opencode": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t opencode banner-creator",
+          "codex": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t codex banner-creator"
+        },
+        "project": {
+          "claude": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t claude -p banner-creator",
+          "droid": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t droid -p banner-creator",
+          "cursor": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t cursor -p banner-creator",
+          "opencode": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t opencode -p banner-creator",
+          "codex": "curl -fsSL https://raw.githubusercontent.com/ReScienceLab/opc-skills/main/install.sh | bash -s -- -t codex -p banner-creator"
+        }
+      },
+      "commands": [
+        "nano-banana-pro___generate_image(prompt, aspectRatio: '21:9', fileName)",
+        "python3 scripts/crop_banner.py {input.png} {output.png} --ratio 2:1 --width 1280"
+      ],
+      "links": {
+        "github": "https://github.com/ReScienceLab/opc-skills/tree/main/skills/banner-creator",
+        "example": "https://github.com/ReScienceLab/opc-skills/blob/main/skills/banner-creator/examples/opc-banner-creation.md"
+      }
     }
   ]
 }

skills/banner-creator/SKILL.md

@@ -0,0 +1,202 @@
+---
+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, or cover image.
+triggers:
+  - "banner"
+  - "header"
+  - "hero image"
+  - "cover image"
+  - "create banner"
+  - "github banner"
+  - "twitter header"
+  - "readme banner"
+---
+
+# Banner Creator Skill
+
+Create professional banners through AI image generation with an iterative design process.
+
+## Prerequisites
+
+**Required Tools:**
+- `nano-banana-pro___generate_image` - AI image generation
+- `chrome-devtools` MCP - For previewing banners in browser
+
+## 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 `nano-banana-pro___generate_image`:
+
+```
+nano-banana-pro___generate_image(
+  prompt: "{style} banner for {brand}, {description}, {text elements}",
+  aspectRatio: "21:9",
+  fileName: "/path/to/.skill-archive/banner-creator/<date-name>/banner-01.png"
+)
+```
+
+**Guidelines:**
+- Generate at `21:9` ratio (widest available), crop later to target
+- Generate in batches of 10 (API rate limit: 20/minute)
+- Wait 60 seconds between batches if hitting limits
+- Use sequential naming: `banner-01.png`, `banner-02.png`, etc.
+
+**Character Consistency:**
+If incorporating an existing logo character, use the `image` parameter:
+```
+nano-banana-pro___generate_image(
+  prompt: "...",
+  aspectRatio: "21:9",
+  image: "/path/to/existing-logo.png",
+  fileName: "..."
+)
+```
+
+### Step 3: Create HTML Preview
+
+Copy the preview template and open in browser:
+
+```bash
+cp <skill_dir>/templates/preview.html .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html
+```
+
+Then use Chrome DevTools MCP to view:
+
+```
+chrome-devtools___navigate_page(url: "file://.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html")
+chrome-devtools___take_screenshot(fullPage: true)
+```
+
+**IMPORTANT:** Update the HTML to include the correct number of banners generated.
+
+### Step 4: Iterate with User
+
+Ask user which banners they prefer:
+- "Which banners do you like? (e.g., #3, #7, #15)"
+- "What do you like about them?"
+- "Any changes you'd want?"
+
+Based on feedback:
+1. Generate 10-20 more variations of favorite styles
+2. Use naming: `banner-{original}-v{n}.png` (e.g., `banner-03-v1.png`)
+3. Update HTML preview
+4. Repeat until user selects final banner
+
+### Step 5: Crop to Target Ratio
+
+Once user approves a banner, crop to target size:
+
+```bash
+python3 <skill_dir>/scripts/crop_banner.py {input.png} {output.png} --ratio 2:1 --width 1280
+```
+
+**Common targets:**
+- GitHub README: `--ratio 2:1 --width 1280` → 1280x640
+- Twitter header: `--ratio 3:1 --width 1500` → 1500x500
+- Website hero: `--ratio 16:9 --width 1920` → 1920x1080
+
+### Step 6: Deliver Final Assets
+
+Present final deliverables:
+
+```
+## Final Banner Assets
+
+| File | Description | Size |
+|------|-------------|------|
+| banner-03.png | Original (21:9) | 2016x864 |
+| banner-03-cropped.png | GitHub README (2:1) | 1280x640 |
+
+All files saved to: `.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/`
+Copy final banner to user's desired location.
+```
+
+## Quick Reference
+
+### Common Prompt Patterns
+
+**With Text:**
+```
+Wide banner for {brand}, {style} style, featuring "{text}" prominently displayed, {colors}, {scene/elements}
+```
+
+**With Character:**
+```
+Wide banner featuring {character description}, {style} style, {scene}, text "{brand name}" on {position}, {colors}
+```
+
+**Abstract/Gradient:**
+```
+Abstract {style} banner, {colors} gradient, geometric patterns, modern tech feel, text "{brand}" centered
+```
+
+**Scene-based:**
+```
+{Style} illustration banner, {scene description}, {character} in {action}, "{brand}" text overlay, {colors}
+```
+
+### Aspect Ratios for nano-banana
+
+Generate at widest ratio, then crop:
+- `21:9` - Ultra-wide (recommended for generation)
+- `16:9` - Wide
+- `3:2` - Standard wide
+
+## References
+
+- [references/formats.md](./references/formats.md) - Common banner sizes by platform
+- [examples/opc-banner-creation.md](./examples/opc-banner-creation.md) - Full example conversation

skills/banner-creator/examples/opc-banner-creation.md

@@ -0,0 +1,89 @@
+# Example: OPC Skills Banner Creation
+
+This documents the actual banner creation process for opc.dev.
+
+## Requirements Gathered
+
+**Project:** OPC Skills (opc.dev)
+**Purpose:** GitHub README banner
+**Target size:** 1280×640 (2:1 ratio)
+**Style:** Pixel art, matching existing crowned king logo
+**Text:** "opc.dev" and "Agent Skills"
+**Character:** Pixel art crowned king from logo
+
+## Generation Process
+
+### Round 1: Initial 16:9 Banners
+
+First generated 20 banners at 16:9 ratio with character consistency:
+
+```
+nano-banana-pro___generate_image(
+  prompt: "Wide pixel art banner featuring a pixel art crowned solopreneur king character, 
+           8-bit retro game style, the character is coding on a laptop with a golden crown, 
+           text 'opc.dev' prominently displayed, 'Agent Skills' as tagline, 
+           dark purple/blue gradient background with pixel stars",
+  aspectRatio: "16:9",
+  image: "/path/to/opc-logo.svg",
+  fileName: ".skill-archive/banner-creator/2026-01-19-opc-banner/banner-01.png"
+)
+```
+
+### Round 2: 2:1 GitHub Format
+
+User noted GitHub banners work best at 2:1 ratio. Generated 20 more at 21:9 (widest available):
+
+```
+nano-banana-pro___generate_image(
+  prompt: "Ultra-wide pixel art banner, 8-bit retro game style, 
+           pixel crowned king character on the left side holding a laptop, 
+           'opc.dev' in large pixel font, 'Agent Skills' subtitle, 
+           gradient background from deep purple to blue, pixel art style throughout",
+  aspectRatio: "21:9",
+  image: "/path/to/opc-logo.svg",
+  fileName: ".skill-archive/banner-creator/2026-01-19-opc-banner/banner-21-01.png"
+)
+```
+
+### Cropping to 2:1
+
+Cropped all 21:9 banners to 2:1 (1280×640):
+
+```bash
+python3 scripts/crop_banner.py banner-21-01.png banner-21-01-cropped.png --ratio 2:1 --width 1280
+```
+
+## User Selection
+
+User selected **#03** from the cropped 2:1 banners:
+- Featured pixel crowned king with laptop
+- "opc.dev" text clearly visible
+- "Agent Skills" tagline included
+- Clean dark gradient background
+
+## Final Deliverables
+
+| File | Size | Description |
+|------|------|-------------|
+| banner-03.png | 2016×864 | Original 21:9 |
+| banner-03-cropped.png | 1280×640 | Final 2:1 GitHub banner |
+
+## Integration
+
+Banner was added to:
+1. `README.md` - Centered at top
+2. `website/worker.js` - Hero section with max-width: 560px
+
+```markdown
+<!-- README.md -->
+<p align="center">
+  <img src="website/opc-banner.png" alt="OPC Skills" width="640">
+</p>
+```
+
+## Tips Learned
+
+1. **Generate wider, crop narrower** - 21:9 gives flexibility to crop to any target
+2. **Character consistency** - Use `image` parameter to maintain logo character
+3. **Text placement** - Request text on specific side if cropping will occur
+4. **Multiple rounds** - First round explores styles, second round refines winner

skills/banner-creator/references/formats.md

@@ -0,0 +1,55 @@
+# Banner Formats Reference
+
+## Platform-Specific Sizes
+
+| Platform | Size (px) | Ratio | Notes |
+|----------|-----------|-------|-------|
+| **GitHub README** | 1280×640 | 2:1 | Most common for project banners |
+| **Twitter/X Header** | 1500×500 | 3:1 | Profile header image |
+| **LinkedIn Banner** | 1584×396 | 4:1 | Personal profile background |
+| **LinkedIn Company** | 1128×191 | ~6:1 | Company page banner |
+| **YouTube Channel** | 2560×1440 | 16:9 | Channel art (safe area: 1546×423) |
+| **Facebook Cover** | 820×312 | ~2.6:1 | Personal profile |
+| **Discord Server** | 960×540 | 16:9 | Server banner |
+| **Website Hero** | 1920×1080 | 16:9 | Full-width hero section |
+| **Website Hero (tall)** | 1920×800 | 2.4:1 | Shorter hero section |
+| **Email Header** | 600×200 | 3:1 | Newsletter headers |
+| **Product Hunt** | 1270×760 | ~1.67:1 | Gallery images |
+
+## Generation Strategy
+
+Since `nano-banana-pro` supports these ratios:
+- `1:1`, `2:3`, `3:2`, `3:4`, `4:3`, `4:5`, `5:4`, `9:16`, `16:9`, `21:9`
+
+**Recommended approach:**
+1. Generate at `21:9` (widest available)
+2. Crop to target ratio using `crop_banner.py`
+
+This ensures:
+- Maximum flexibility for different platforms
+- Content centered properly
+- No stretching or distortion
+
+## Ratio Quick Reference
+
+```
+21:9  ████████████████████████████████  (ultra-wide, cinematic)
+16:9  ████████████████████████          (widescreen)
+3:1   ████████████████████████████████  (Twitter header)
+2:1   ████████████████                  (GitHub README)
+4:1   ████████████████████████████████████████████  (LinkedIn)
+```
+
+## File Size Guidelines
+
+- **GitHub**: < 10MB, PNG or JPG
+- **Twitter**: < 5MB, PNG, JPG, or GIF
+- **LinkedIn**: < 8MB, PNG or JPG
+- **Website**: Optimize for web (< 500KB ideally)
+
+## Tips
+
+1. **Safe zones**: Keep important content (text, logo) in center 60% for platforms that crop on mobile
+2. **Text legibility**: Use high contrast, avoid small text
+3. **Brand consistency**: Match colors and style with existing logo
+4. **Mobile preview**: Check how banner looks on mobile (often cropped)