Generate 1280x640 PNG social preview images for GitHub repositories using nano-banana-pro. Use when user mentions social preview, Open Graph image, or needs repository images for social media sharing.
/plugin marketplace add laurigates/claude-plugins/plugin install github-actions-plugin@lgates-claude-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Generate professional social preview images for GitHub repositories. These images appear when repository links are shared on social media platforms like Twitter, LinkedIn, Slack, and Discord.
This skill piggybacks on the nano-banana-pro skill for image generation. Ensure:
GOOGLE_API_KEY or GEMINI_API_KEY is setpip install google-genai Pillow (or use uv run)| Requirement | Value |
|---|---|
| Minimum dimensions | 640 × 320 pixels |
| Recommended dimensions | 1280 × 640 pixels |
| Aspect ratio | 2:1 (width:height) |
| File formats | PNG, JPG, GIF |
| Max file size | 1 MB |
| Transparency | Supported (PNG only) |
PNG transparency can be beneficial for dark mode, but test against:
# Generate a social preview for your repository
uv run python ~/.claude/scripts/nano_banana_pro.py \
"Professional GitHub social preview image for [PROJECT NAME]: [DESCRIPTION]. \
Modern, clean design with bold typography. Tech-focused aesthetic. \
Include visual elements representing [KEY FEATURE]. \
Optimized for social media sharing." \
--aspect 16:9 \
--resolution 2K \
--output social-preview.png
Note: Use 16:9 aspect ratio (closest to 2:1) for optimal display.
Professional GitHub social preview for a developer tool called "[NAME]".
Modern terminal aesthetic with code-inspired elements.
Bold, readable project name. Dark background with syntax highlighting colors.
Clean, minimalist design suitable for social media sharing.
GitHub social preview for "[NAME]" - a [LANGUAGE] library for [PURPOSE].
Abstract geometric patterns representing [CONCEPT].
Project name in bold modern typography.
Professional tech aesthetic with gradients.
Social preview image for "[NAME]" application.
Illustrate the core functionality: [DESCRIPTION].
Clean UI mockup or abstract representation.
Vibrant colors with professional polish.
GitHub preview for "[NAME]" - [DESCRIPTION].
Data visualization or neural network inspired graphics.
Modern scientific aesthetic with clean typography.
Blue and purple color scheme.
If you have an existing brand image or style reference:
uv run python ~/.claude/scripts/nano_banana_pro.py \
"GitHub social preview in the style of the reference. \
Include project name '[NAME]' prominently. \
Maintain brand consistency." \
--aspect 16:9 \
--resolution 2K \
--reference brand-logo.png \
--output social-preview.png
# Check image dimensions
magick identify social-preview.png
# Should show: 1280x640 or similar 2:1 ratio
# Resize to exact GitHub recommended dimensions
magick social-preview.png -resize 1280x640! github-preview.png
# Or resize maintaining aspect ratio (adds letterboxing)
magick social-preview.png -resize 1280x640 \
-gravity center -background '#1a1a1a' \
-extent 1280x640 github-preview.png
# Optimize PNG (must be under 1MB)
magick social-preview.png -strip -quality 95 optimized-preview.png
# Check file size
ls -lh optimized-preview.png
Before uploading, preview how the image will appear:
The preview may take a few minutes to propagate across platforms.
# 1. Generate the image
uv run python ~/.claude/scripts/nano_banana_pro.py \
"GitHub social preview for 'dotfiles' - a cross-platform configuration manager. \
Show abstract connected nodes representing configuration sync. \
Modern dark theme with blue accents. Bold 'dotfiles' text." \
--aspect 16:9 \
--resolution 2K \
--output generated/social-preview.png
# 2. Resize to exact dimensions
magick generated/social-preview.png \
-resize 1280x640^ \
-gravity center \
-extent 1280x640 \
social-preview-final.png
# 3. Verify size (must be < 1MB)
ls -lh social-preview-final.png
# 4. Check dimensions
magick identify social-preview-final.png
# Reduce quality
magick social-preview.png -quality 85 -strip smaller.png
# Convert to JPEG (smaller but no transparency)
magick social-preview.png -quality 85 preview.jpg
✓ Use for:
✗ Don't use for:
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.