sf-diagram-nanobananapro

SKILL.md

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.sh

If prerequisites fail, stop and route the user to setup guidance in:

references/gemini-cli-setup.md

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 4K

Full iteration guide: references/iteration-workflow.md

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

references/gemini-cli-setup.md

references/interview-questions.md

references/iteration-workflow.md

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