Imagen
sanjay3290/ai-skills
Generate images using Google Gemini's image generation capabilities.
AI-powered image generation for Salesforce visuals via Nano Banana Pro.
Install Sf Diagram Nanobananapro
$ npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Jaganpro/sf-skills sf-diagram-nanobananapro --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/sf-diagram-nanobananapro .claude/skills/sf-diagram-nanobananapro && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "sf-diagram-nanobananapro" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-diagram-nanobananapro into .claude/skills/sf-diagram-nanobananapro/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-diagram-nanobananapro", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-diagram-nanobananaproType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Jaganpro/sf-skills sf-diagram-nanobananapro --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/sf-diagram-nanobananapro .agents/skills/sf-diagram-nanobananapro && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "sf-diagram-nanobananapro" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-diagram-nanobananapro into .agents/skills/sf-diagram-nanobananapro/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-diagram-nanobananapro", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Jaganpro/sf-skills sf-diagram-nanobananapro --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/sf-diagram-nanobananapro .cursor/skills/sf-diagram-nanobananapro && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "sf-diagram-nanobananapro" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-diagram-nanobananapro into .cursor/skills/sf-diagram-nanobananapro/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-diagram-nanobananapro", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Jaganpro/sf-skills.git --path skills/sf-diagram-nanobananapro--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Jaganpro/sf-skills sf-diagram-nanobananapro --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/sf-diagram-nanobananapro .gemini/skills/sf-diagram-nanobananapro && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "sf-diagram-nanobananapro" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-diagram-nanobananapro into .gemini/skills/sf-diagram-nanobananapro/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-diagram-nanobananapro", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Jaganpro/sf-skills sf-diagram-nanobananaproInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/sf-diagram-nanobananapro .github/skills/sf-diagram-nanobananapro && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "sf-diagram-nanobananapro" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-diagram-nanobananapro into .github/skills/sf-diagram-nanobananapro/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-diagram-nanobananapro", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Jaganpro/sf-skills sf-diagram-nanobananapro --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Jaganpro/sf-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/sf-diagram-nanobananapro .opencode/skills/sf-diagram-nanobananapro && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "sf-diagram-nanobananapro" agent skill from https://github.com/Jaganpro/sf-skills/tree/main/skills/sf-diagram-nanobananapro into .opencode/skills/sf-diagram-nanobananapro/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sf-diagram-nanobananapro", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
sf-diagram-nanobananapro- GitHub stars
- 424
- Token cost
- ~1.6k tokens
- SKILL.md length
- 579 words
- Files
- 19 (incl. scripts, references, assets)
- Skills in repo
- 36
- Repo updated
- First seen
- Licence
- MIT
At a glance
AI-powered image generation for Salesforce visuals via Nano Banana Pro.
- Works in 5 steps: Gather inputs → Build a concrete prompt → Generate a fast draft first → …
- : user asks for PNG/SVG output
- SKILL.md covers Hard Gate: Prerequisites First, When This Skill Owns the Task, Required Context to Gather First and Interview-First Workflow, plus 7 more sections
- Calls gemini and uv
What it does
Sf Diagram Nanobananapro is an agent skill from Jaganpro/sf-skills. AI-powered image generation for Salesforce visuals via Nano Banana Pro. TRIGGER when: user asks for PNG/SVG output, UI mockups, wireframes, visual ERDs, or says "generate image" / "create mockup". DO NOT TRIGGER when: text-based Mermaid diagrams (use sf-diagram-mermaid), or non-visual documentation tasks.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 24 other files, including scripts, reference files and assets (for example `CREDITS.md`, `README.md` and `assets/architecture/integration-flow.md`).
It sits in Media & Creative, covering Image generation, Diagrams and UI design. It works with Mermaid, Salesforce and Google Gemini. The repository describes itself as: [ARCHIVED — migrated to forcedotcom/afv-library] Salesforce Skills for Agentic Coding Tools — Apex, Flow, LWC, SOQL, Agentforce, Data Cloud, OmniStudio. Read-only archive; active… The licence is MIT.
When your agent uses it
- : user asks for PNG/SVG output
- Says generate image / create mockup
- : text-based Mermaid diagrams (use sf-diagram-mermaid)
- Non-visual documentation tasks
Example prompts
- “generate image”
- “create mockup”
- “/sf-diagram-nanobananapro”
Requirements
- Python 3
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 53c9956. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
geminiuv
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use uv, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Sf Diagram Nanobananapro loads about 1.6k tokens when it runs, and up to ~9.9k if it reads all its reference files. Until then it costs about 83 tokens; SKILL.md has 579 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from Jaganpro/sf-skills at commit 53c9956, republished under its MIT licence (© Jaganpro). 579 words, ~1,626 tokens.
Download SKILL.mdSave it as
.claude/skills/sf-diagram-nanobananapro/SKILL.md (or your agent's skills folder). This skill also uses 18 other files; get the full folder from GitHub.- name
- sf-diagram-nanobananapro
- description
- AI-powered image generation for Salesforce visuals via Nano Banana Pro. TRIGGER when: user asks for PNG/SVG output, UI mockups, wireframes, visual ERDs, or says "generate image" / "create mockup". DO NOT TRIGGER when: text-based Mermaid diagrams (use sf-diagram-mermaid), or non-visual documentation tasks.
- license
- MIT
- metadata.version
- 1.5.0
- metadata.author
- Jag Valaiyapathy
- metadata.scoring
- 80 points across 5 categories
sf-diagram-nanobananapro: Salesforce Visual AI Skill
Use this skill when the user needs rendered visuals, not text diagrams: ERDs, UI mockups, architecture illustrations, slide-ready images, or image edits using Nano Banana Pro.
Hard Gate: Prerequisites First
Always run the prerequisites check before using the skill:
~/.claude/skills/sf-diagram-nanobananapro/scripts/check-prerequisites.shIf prerequisites fail, stop and route the user to setup guidance in:
When This Skill Owns the Task
Use sf-diagram-nanobananapro when the user wants:
- PNG / SVG-style image output
- rendered ERDs or architecture diagrams
- LWC or Experience Cloud mockups / wireframes
- visual polish beyond Mermaid
- edits to a previously generated image
Delegate elsewhere when the user wants:
- Mermaid or text-only diagrams → sf-diagram-mermaid
- metadata discovery for ERDs → sf-metadata
- LWC implementation after the mockup → sf-lwc
- Apex review / implementation → sf-apex
Required Context to Gather First
Ask for or infer:
- image type: ERD, UI mockup, architecture illustration, or image edit
- subject scope and key entities / systems
- target quality: draft vs presentation vs production asset
- preferred style and aspect ratio
- whether the user wants quick mode or an interview-driven prompt build
Interview-First Workflow
Unless the user explicitly asks for quick/simple/just generate, ask clarifying questions first.
Minimum question set
| Request type | Ask about |
|---|---|
| ERD / schema | objects, visual style, purpose, extras |
| UI mockup | component type, object/context, device/layout, style |
| architecture image | systems, boundaries, protocols, emphasis |
| image edit | what to keep, what to change, output quality |
Question bank: references/interview-questions.md
Quick mode defaults
If the user says “quick”, “simple”, or “just generate”, default to:
- professional style
- 1K draft output
- legend included when helpful
- one image first, then iterate
Recommended Workflow
1. Gather inputs
Decide which of these are needed:
- object list / metadata
- purpose: draft vs presentation vs documentation
- desired aesthetic
- aspect ratio / resolution
- whether this is a fresh render or edit of an existing image
2. Build a concrete prompt
Good prompts specify:
- subject and scope
- composition / layout
- color treatment
- labels / legends / relationship lines
- output quality goal
3. Generate a fast draft first
gemini --yolo "/generate 'Professional Salesforce ERD with Account, Contact, Opportunity; clean legend; white background; Salesforce-style colors'"4. Iterate before final
Use natural-language edits:
gemini --yolo "/edit 'Move Account to center, thicken relationship lines, add legend in bottom right'"5. Use the Python script for controlled final output
Use the script when you need higher resolution or explicit edit inputs:
uv run scripts/generate_image.py \
-p "Final production-quality Salesforce ERD with legend and field highlights" \
-f "crm-erd-final.png" \
-r 4KFull iteration guide: references/iteration-workflow.md
Show full SKILL.md (231 more words)Show less
Default Style Guidance
For ERDs, default to the architect.salesforce.com aesthetic unless the user asks otherwise:
- dark border + light fill cards
- cloud-specific accent colors
- clean labels and relationship lines
- presentation-ready whitespace and hierarchy
Style guide: references/architect-aesthetic-guide.md
Common Patterns
| Pattern | Default approach |
|---|---|
| visual ERD | get metadata if available, then render a draft first |
| LWC mockup | use component template + user context + one draft iteration |
| architecture illustration | emphasize systems and flows, reduce field-level detail |
| image refinement | use /edit for small changes before regenerating |
| final production asset | switch to script-driven 2K/4K generation |
Examples: references/examples-index.md
Output / Review Guidance
After generating, do one of these:
- open the file in Preview for visual inspection
- attach/read the image in the coding session for multimodal review
- ask the user whether to iterate on layout, labeling, or color before finalizing
Keep the first pass cheap; only spend on high-res output after the composition is right.
Cross-Skill Integration
| Need | Delegate to | Reason |
|---|---|---|
| Mermaid first draft or text diagram | sf-diagram-mermaid | faster structural diagramming |
| object / field discovery for ERD | sf-metadata | accurate schema grounding |
| turn mockup into real component | sf-lwc | implementation after design |
| review Apex / trigger code in parallel | sf-apex | code-quality follow-up |
Reference Map
Start here
Visual style / examples
- references/architect-aesthetic-guide.md
- references/examples-index.md
- assets/erd/
- assets/lwc/
- assets/architecture/
- assets/review/
Score Guide
| Score | Meaning |
|---|---|
| 70+ | strong image prompt / workflow choice |
| 55–69 | usable draft with iteration needed |
| 40–54 | partial alignment to request |
| < 40 | poor fit; re-interview and rebuild prompt |
© Jaganpro, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 18 other files (scripts, references, assets) in skills/sf-diagram-nanobananapro of Jaganpro/sf-skills.
- SKILL.md
- CREDITS.md
- README.md
- assets/architecture/integration-flow.md
- assets/erd/core-objects.md
- assets/erd/custom-objects.md
- assets/lwc/dashboard-card.md
- assets/lwc/data-table.md
- assets/lwc/record-form.md
- assets/review/apex-review.md
- assets/review/lwc-review.md
- references/architect-aesthetic-guide.md
- references/examples-index.md
- references/gemini-cli-setup.md
- references/interview-questions.md
- … and 4 more
Open the folder on GitHubat commit 53c9956
Compare with similar skills
Sf Diagram Nanobananapro next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Sf Diagram Nanobananapro this skillJaganpro/sf-skills | 424 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Imagensanjay3290/ai-skills | 432 | 6 repos | ~657 | Automated safety check: Pass | Apache-2.0 | |
| Cursor Image Generationtmcfarlane/oh-my-cursor | 109 | — | ~1.8k | Automated safety check: Pass | MIT | |
| Nanobanana Skillfeiskyer/claude-code-settings | 1.7k | — | ~1.1k | Automated safety check: Pass | MIT | |
| Image PromptingBlockRunAI/blockrun-mcp | 391 | — | ~3.6k | Automated safety check: Pass | MIT | |
| CLI Hub Matrix Image DesignHKUDS/CLI-Anything | 52k | — | ~2.4k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Cursor Image Generation
tmcfarlane/oh-my-cursor
Generate and iterate images in Cursor using the built-in image model and strong prompts.
Nanobanana Skill
feiskyer/claude-code-settings
Generate or edit images via Google Gemini (nanobanana). An agent skill from feiskyer/claude-code-settings.
Image Prompting
BlockRunAI/blockrun-mcp
A skill your agent uses when generating or editing images via blockrunimage — especially with GPT Image 2, Nano Banana, or Grok Imagine for posters, UI mockups, marketing assets, product shots, or…
CLI Hub Matrix Image Design
HKUDS/CLI-Anything
Capability-based multi-tool matrix for image and graphic design: AI generation, raster/vector editing, UI mockups, diagrams, upscaling, photo library, and publishing.
Imagen
nexu-io/open-design
Generate images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets.
More from Jaganpro/sf-skills
All 36 skills in this repoSf AI Agentforce Observability
Jaganpro/sf-skills
Agentforce session tracing extraction and analysis. An agent skill from Jaganpro/sf-skills.
Sf AI Agentscript
Jaganpro/sf-skills
Agent Script DSL for deterministic Agentforce agents. An agent skill from Jaganpro/sf-skills.
Sf Datacloud
Jaganpro/sf-skills
Salesforce Data Cloud product orchestrator for connect→prepare→harmonize→segment→act workflows.
Sf Diagram Mermaid
Jaganpro/sf-skills
Salesforce architecture diagrams using Mermaid with ASCII fallback.
Sf Flow
Jaganpro/sf-skills
Creates and validates Salesforce Flows with 110-point scoring.
Sf Integration
Jaganpro/sf-skills
Salesforce integration architecture with 120-point scoring. An agent skill from Jaganpro/sf-skills.
Related
Works with
Questions about Sf Diagram Nanobananapro
What does Sf Diagram Nanobananapro do?
AI-powered image generation for Salesforce visuals via Nano Banana Pro. Sf Diagram Nanobananapro is an agent skill from Jaganpro/sf-skills. AI-powered image generation for Salesforce visuals via Nano Banana Pro.
When should I use Sf Diagram Nanobananapro?
Sf Diagram Nanobananapro fits situations like: : user asks for PNG/SVG output; says generate image / create mockup; : text-based Mermaid diagrams (use sf-diagram-mermaid); non-visual documentation tasks.
How do I install Sf Diagram Nanobananapro in Claude Code?
Run `npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a claude-code`. Or copy the skill folder (skills/sf-diagram-nanobananapro in Jaganpro/sf-skills) into .claude/skills/sf-diagram-nanobananapro in your project. Claude Code loads it when a task matches its description.
How do I install Sf Diagram Nanobananapro in Codex?
Run `npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a codex`. Or copy the skill folder (skills/sf-diagram-nanobananapro in Jaganpro/sf-skills) into .agents/skills/sf-diagram-nanobananapro in your project. Codex loads it when a task matches its description.
Can I use Sf Diagram Nanobananapro in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sf-diagram-nanobananapro, .gemini/skills/sf-diagram-nanobananapro, .github/skills/sf-diagram-nanobananapro and .opencode/skills/sf-diagram-nanobananapro in your project.
What does Sf Diagram Nanobananapro need to run?
Going by SKILL.md and its folder, Sf Diagram Nanobananapro needs the command-line tools its instructions call (gemini and uv). Our summary lists: Python 3.
Does Sf Diagram Nanobananapro access the network?
SKILL.md contains no URLs. Its commands use uv, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Sf Diagram Nanobananapro safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Sf Diagram Nanobananapro use?
Sf Diagram Nanobananapro is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Sf Diagram Nanobananapro use?
About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 8.3k tokens, read only when the agent opens those files.
What are the alternatives to Sf Diagram Nanobananapro?
Skills that share tags, products or a category with Sf Diagram Nanobananapro: Imagen (sanjay3290/ai-skills, 432 stars), Cursor Image Generation (tmcfarlane/oh-my-cursor, 109 stars), Nanobanana Skill (feiskyer/claude-code-settings, 1.7k stars) and Image Prompting (BlockRunAI/blockrun-mcp, 391 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Sf Diagram Nanobananapro?
Jaganpro (a GitHub user) maintains it in Jaganpro/sf-skills, which has 424 GitHub stars. The repository holds 36 skills in this directory. The repository was last updated on April 27, 2026.
Source: Jaganpro/sf-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.