AI-powered banner creation with iterative design feedback and platform-specific cropping.
Works with
Guides users through discovery phase to gather requirements (purpose, target ratio, style, content elements, colors) before generation
Generates 20 banner variations at 21:9 ratio using the nanobanana skill, then crops to target formats (2:1 for GitHub, 3:1 for Twitter, 16:9 for websites)
Includes HTML preview template for browsing variations and iterating based on user feedback
Supports imag
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionbanner-creatorExecute the skills CLI command in your project's root directory to begin installation:
Fetches banner-creator from resciencelab/opc-skills and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate banner-creator. Access via /banner-creator in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Create detailed user stories, acceptance criteria, and feature specs
Example
Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios
Reduce spec writing time by 50%, ensure comprehensive coverage
Research competitors, compare features, identify gaps
Example
Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities
Complete competitive research in 2 hours instead of 2 days
Evaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs
Example
Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale
0
total installs
0
this week
682
GitHub stars
0
upvotes
Run in your terminal
0
installs
0
this week
682
stars
Create professional banners through AI image generation with an iterative design process.
Required API Keys (set in environment):
GEMINI_API_KEY - Get from Google AI StudioRequired Skills:
nanobanana - AI image generation (Gemini 3 Pro Image)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
Before generating, gather requirements from user:
Ask about:
Purpose - Where will the banner be used?
Target ratio/size - See references/formats.md:
2:1 (1280x640) - GitHub README3:1 (1500x500) - Twitter header16:9 (1920x1080) - Website heroStyle preference:
Content elements:
Color preferences:
Wait for user confirmation before proceeding!
Generate 20 banner variations using the nanobanana skill:
# 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:
21:9 ratio (widest available), crop later to targetbanner-01.png, banner-02.png, etc.Image Editing (for incorporating existing logo):
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
Copy the preview template and open in browser:
cp <skill_dir>/templates/preview.html .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html
Then open in default browser:
open .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html
IMPORTANT: Update the HTML to include the correct number of banners generated.
Ask user which banners they prefer:
Based on feedback:
banner-{original}-v{n}.png (e.g., banner-03-v1.png)Once user approves a banner, crop to target size:
python3 <skill_dir>/scripts/crop_banner.py {input.png} {output.png} --ratio 2:1 --width 1280
Common targets:
--ratio 2:1 --width 1280 → 1280x640--ratio 3:1 --width 1500 → 1500x500--ratio 16:9 --width 1920 → 1920x1080Present 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.
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}
Generate at widest ratio, then crop:
21:9 - Ultra-wide (recommended for generation)16:9 - Wide3:2 - Standard wideMake data-driven prioritization decisions faster
Draft PRDs, status updates, and stakeholder presentations
Example
Create executive summary of Q3 roadmap, monthly progress report, feature launch announcement
Save 3-5 hours/week on communication overhead
Prerequisites
Time Estimate
30-60 minutes to see productivity improvements
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
mattpocock/skills
parcadei/continuous-claude-v3
cursor/plugins
ailabs-393/ai-labs-claude-skills
pproenca/dot-skills
mattpocock/skills
Registry listing for banner-creator matched our evaluation — installs cleanly and behaves as described in the markdown.
I recommend banner-creator for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Keeps context tight: banner-creator is the kind of skill you can hand to a new teammate without a long onboarding doc.
Solid pick for teams standardizing on skills: banner-creator is focused, and the summary matches what you get after install.
Useful defaults in banner-creator — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
Keeps context tight: banner-creator is the kind of skill you can hand to a new teammate without a long onboarding doc.
banner-creator has been reliable in day-to-day use. Documentation quality is above average for community skills.
banner-creator reduced setup friction for our internal harness; good balance of opinion and flexibility.
We added banner-creator from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
Registry listing for banner-creator matched our evaluation — installs cleanly and behaves as described in the markdown.
showing 1-10 of 42