AI-powered visual content generation for Salesforce development. Generate ERD diagrams, LWC mockups, and architecture visuals using Gemini 3 Pro Image (Nano Banana Pro).
- Visual ERD Generation: Create actual rendered ERD diagrams (not just Mermaid code)
- LWC/UI Mockups: Generate wireframes and component mockups following SLDS
- Gemini Code Review: Parallel code review while Claude continues working
- Documentation Research: Parallel Salesforce documentation research via Gemini
# Install as part of sf-skills
claude /plugin install github:Jaganpro/sf-skills
# Or install standalone
claude /plugin install github:Jaganpro/sf-skills/sf-imagenIMPORTANT: Run the prerequisites check before using this skill:
~/.claude/plugins/marketplaces/sf-skills/sf-imagen/scripts/check-prerequisites.sh| Requirement | Description | How to Get |
|---|---|---|
| Ghostty Terminal | Required for Kitty graphics protocol | https://ghostty.org |
| GEMINI_API_KEY | Personal API key for Nano Banana Pro | https://aistudio.google.com/apikey |
| Gemini CLI | Command-line interface for Gemini | npm install -g @google/gemini-cli |
| Nano Banana Extension | Image generation extension | gemini extensions install nanobanana |
| timg | Terminal image viewer with Kitty support | brew install timg |
Add to ~/.zshrc:
export GEMINI_API_KEY="your-personal-api-key"
export NANOBANANA_MODEL=gemini-3-pro-image-previewSkill: sf-imagen
Request: "Generate an ERD diagram showing Account, Contact, and Opportunity relationships"
Images are displayed inline using Kitty graphics protocol (Ghostty) or via Claude's multimodal vision using the Read tool.
| Use Case | Example Request |
|---|---|
| ERD Diagrams | "Generate a visual ERD for Account, Contact, Opportunity" |
| LWC Mockups | "Create a mockup for an Account list datatable component" |
| Code Review | "Get Gemini's review of this Apex trigger" |
| Doc Research | "Research the Flow best practices in Salesforce docs" |
| Related Skill | When to Use |
|---|---|
| sf-diagram | Convert Mermaid to visual rendering |
| sf-metadata | Query object/field data before generating ERDs |
| sf-lwc | Generate mockups for LWC components |
| sf-apex | Review Apex code via Gemini sub-agent |
NEVER commit your GEMINI_API_KEY to version control
- Store API key in
~/.zshrconly (not in project files) - The key is personal and tied to your Google account billing
- Ghostty terminal (for Kitty graphics)
- Gemini CLI with Nano Banana extension
- GEMINI_API_KEY environment variable
- timg (for terminal image display)
MIT License. See LICENSE file. Copyright (c) 2024-2025 Jag Valaiyapathy