Sf Diagram Nanobananapro

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

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

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

---

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

Architecture Template: Integration Flow

Prompt Template

Professional Salesforce integration architecture diagram:

SYSTEMS:
[List systems with types and icons]

INTEGRATION PATTERNS:
[List integrations with protocols and directions]

COMPONENTS:
- API Gateway (if applicable)
- Authentication layer
- Middleware/ESB (if applicable)
- Error handling/retry logic

STYLING:
- Cloud icon for Salesforce
- Server icons for external systems
- Arrows with protocol labels
- Color coding by system type
- Professional diagram style

FORMAT:
- Landscape orientation
- Left-to-right or hub-spoke layout
- Include legend

Example

gemini "/generate 'Salesforce integration architecture diagram:

Systems:
1. Salesforce (cloud icon, blue)
2. MuleSoft (middleware icon, purple)
3. SAP ERP (server icon, orange)

Flows:
1. Salesforce --REST--> MuleSoft --BAPI--> SAP
   - Account/Contact sync (bidirectional)

2. SAP --Events--> MuleSoft --Platform Events--> Salesforce
   - Invoice updates

Include:
- OAuth 2.0 authentication badges
- Error queue for failed messages

Style: Professional, clean lines, pastel colors'"

ERD Template: Core Salesforce Objects (Architect.salesforce.com Style)

Default Style

All ERDs now use the official architect.salesforce.com aesthetic by default:

• Dark border + light translucent fill boxes
• Header banner with Salesforce logo
• LEGEND bar with ENTITIES and RELATIONSHIPS
• Labeled relationship lines
• Footer with copyright

See references/architect-aesthetic-guide.md for full specification.

---

Prompt Template (Architect.salesforce.com Style)

Create a Salesforce Core CRM ERD in the EXACT architect.salesforce.com style:

PAGE TITLE (very top, large bold text):
'Core CRM Overview Data Model'

HEADER SECTION (below title):
- Left: Salesforce cloud logo + 'SALESFORCE PLATFORM Overview' in dark teal (#0B827C) banner box
- Center: LEGEND with 'ENTITIES' section showing:
  * Cloud Entity box (dark teal #0B827C border, light teal ~25% opacity fill)
  * Related Entity box (dark teal border, lighter fill)
  * External Entity box (black border, white fill)
- Right: 'RELATIONSHIPS' section showing notation symbols for Parent/Child, Required, Optional, Many-to-Many

BOX STYLING - CRITICAL:
- DARK BORDER: Solid 2px border in dark teal (#0B827C)
- LIGHT TRANSLUCENT FILL: Same teal hue at ~25% opacity
- Rounded corners (8-12px radius)
- Text in dark gray/black on the light fill

ENTITY BOX FORMAT:
┌─────────────────────────┐
│ Logical Name            │  (Bold, larger)
│ APIName                 │  (Smaller, italic, gray)
│ • Field1                │  (Bullet points)
│ • Field2                │
└─────────────────────────┘

OBJECTS TO INCLUDE (all with dark teal border + light teal fill):

- Account (center position):
  Account
  Account
  • Account Number
  • Name
  • Industry
  • Type

- Contact (linked to Account):
  Contact
  Contact
  • Name
  • Email
  • Title
  • Phone

- Opportunity (linked to Account):
  Opportunity
  Opportunity
  • Name
  • Amount
  • Close Date
  • StageName

- Case (linked to Account and Contact):
  Case
  Case
  • CaseNumber
  • Type
  • Priority
  • Status

RELATIONSHIP LINES:
- Thin black lines with text labels ON the lines
- Contact → Account: "child of" (crow's foot on Contact side)
- Opportunity → Account: "child of" (crow's foot on Opportunity side)
- Case → Account: "related to" (crow's foot on Case side)
- Case → Contact: "related to" (optional)
- STRAIGHT LINES ONLY (horizontal and vertical, no diagonals)

FOOTER:
Left: '©2024 Salesforce - Subject to change without notice'
Right: 'Last modified: [current date]'

CRITICAL: Dark teal borders with LIGHT translucent teal fill - NOT solid filled boxes.

---

Usage

# Quick draft at 1K (iterate here)
gemini --yolo "/generate '[paste prompt above]'"
open ~/nanobanana-output/*.png  # Review and refine

# Final at 4K (when satisfied)
uv run scripts/generate_image.py \
  -p "[your refined prompt]" \
  -f "core-crm-erd.png" \
  -r 4K
open ~/nanobanana-output/*core-crm*.png

---

Cloud Color Reference

---

Resolution Guide

Tip: Iterate at 1K until layout is correct, then generate 4K final.

ERD Template: Custom Objects

Prompt Template

Professional Salesforce ERD diagram showing custom objects:

OBJECTS:
[List custom objects with relationships]

COLOR CODING:
- Standard Objects: Blue (#bae6fd fill, #0369a1 border)
- Custom Objects: Orange (#fed7aa fill, #c2410c border)
- External Objects: Green (#a7f3d0 fill, #047857 border)

RELATIONSHIPS:
- Lookup (LK): Dashed arrow, optional parent
- Master-Detail (MD): Solid thick arrow, cascade delete

STYLING:
- Clean white background
- Pastel fill colors with dark borders
- Relationship labels on arrows
- Professional diagram layout
- Include color legend

FORMAT:
- Auto-layout based on relationships
- Primary objects centered
- Child objects positioned below/right of parents

Example

# Draft at 1K (iterate here)
gemini --yolo "/generate 'Salesforce ERD for real estate app:
- Property__c (orange, center): Main custom object
- Listing__c (orange, right): Master-Detail to Property__c
- Showing__c (orange, below): Lookup to both Property__c and Contact

Orange boxes for custom objects, blue for standard (Contact).
Include legend. Professional style.'"
open ~/nanobanana-output/*.png  # Review and refine

# Final at 4K (when satisfied)
uv run scripts/generate_image.py \
  -p "Salesforce ERD for real estate app..." \
  -f "realestate-erd.png" \
  -r 4K

Resolution Guide

Tip: Iterate at 1K until layout is correct, then generate 4K final.

LWC Template: Dashboard Card Mockup

Prompt Template

Salesforce Lightning dashboard card/tile mockup:

CARD TYPE: [metric/chart/list/progress]

METRIC CARD:
- Large metric value
- Label below
- Trend indicator: up/down arrow with percentage
- Sparkline mini chart (optional)
- Icon in corner

CHART CARD:
- Chart type: [bar/line/pie/donut]
- Legend position
- Data labels on hover

LIST CARD:
- Title with "View All" link
- 3-5 list items
- Each item: icon, primary text, secondary text

STYLING:
- SLDS card component
- White background with subtle shadow
- Rounded corners
- Header with title and action menu

Example: Metric Card

gemini "/generate 'Salesforce dashboard metric card:
- Large number: $1.2M
- Label: Total Pipeline Value
- Trend: +12% (green up arrow)
- Icon: Opportunity icon (top-right)
- Sparkline: Show 7-day trend mini chart

Style: SLDS card, white background, subtle shadow'"

LWC Template: Data Table Mockup

Prompt Template

Salesforce Lightning Web Component data table mockup:

COMPONENT: lightning-datatable style

HEADER:
- Component title: "[Title]"
- Search box (right-aligned)
- Action buttons: New, Refresh, Export

COLUMNS:
[List columns with types]

SAMPLE DATA:
- Show 5-7 sample rows with realistic data
- Include row selection checkboxes
- Show sorting arrows on sortable columns

STYLING:
- SLDS (Salesforce Lightning Design System)
- Zebra striping on rows
- Hover highlight
- Blue header bar
- White background

ACTIONS:
- Row-level action menu (three dots)
- Bulk action buttons when rows selected

FORMAT:
- Desktop view (1200px width)
- Full component with card wrapper
- Include pagination footer

Example

gemini "/generate 'Salesforce LWC data table mockup:
Title: Recent Opportunities
Columns:
1. Opportunity Name (link)
2. Account Name (text)
3. Amount (currency, right-aligned)
4. Stage (picklist badge)
5. Close Date (date)
6. Owner (user with avatar)

Sample data: Show 5 realistic opportunities
Include: Search, New button, row actions menu
Style: SLDS, professional, clean
Pagination: 1-5 of 127'"

LWC Template: Record Form Mockup

Prompt Template

Salesforce Lightning Web Component record form mockup:

COMPONENT: lightning-record-form style

HEADER:
- Object icon and label
- Edit/Save/Cancel buttons (right)
- Record name as title

LAYOUT:
- Two-column layout for desktop
- Responsive single column for mobile

SECTIONS:
[Define sections with fields]

FIELD TYPES:
- Text inputs with labels above
- Picklists as dropdown
- Lookups with search icon
- Date pickers with calendar
- Currency with formatting
- Checkboxes for boolean

STYLING:
- SLDS record page styling
- Compact spacing
- Blue section headers
- Required field indicators (*)
- Help text icons where applicable

Example

gemini "/generate 'Salesforce LWC record form mockup:
Object: Opportunity
Mode: Edit

Sections:
1. Opportunity Information:
   - Opportunity Name* (text)
   - Account Name* (lookup with search)
   - Type (picklist)
   - Lead Source (picklist)

2. Amount & Dates:
   - Amount (currency)
   - Close Date* (date picker)
   - Stage* (picklist)
   - Probability (percentage)

Footer: Save and Cancel buttons
Style: SLDS, professional, desktop view'"

Apex Code Review Template

Gemini Review Prompt

Review this Apex code for best practices and issues:

CODE:
[paste code here]

REVIEW CATEGORIES:

1. BULKIFICATION
   - SOQL queries in loops
   - DML operations in loops
   - Governor limit risks
   - Collection usage

2. SECURITY
   - CRUD permissions check
   - FLS enforcement
   - Sharing model compliance
   - Injection vulnerabilities

3. BEST PRACTICES
   - Trigger handler pattern
   - One trigger per object
   - Separation of concerns
   - Proper exception handling

4. PERFORMANCE
   - Selective SOQL queries
   - Index usage
   - Unnecessary computation

5. MAINTAINABILITY
   - Code comments
   - Method length
   - Test coverage considerations

OUTPUT FORMAT:
JSON with summary, issues array, bestPractices array, and score

Usage

gemini "Review this Apex trigger for issues: [paste code]" -o json

Severity Guidelines

LWC Code Review Template

Gemini Review Prompt

Review this Lightning Web Component for best practices:

JAVASCRIPT:
[paste JS code]

HTML TEMPLATE:
[paste HTML code]

REVIEW CATEGORIES:

1. ACCESSIBILITY (A11Y)
   - ARIA labels and roles
   - Keyboard navigation
   - Screen reader compatibility

2. PERFORMANCE
   - Wire service usage
   - Rendering optimization
   - Event handling

3. SECURITY
   - Locker Service compliance
   - XSS prevention

4. BEST PRACTICES
   - Component lifecycle
   - Error handling
   - Data binding

5. SALESFORCE PATTERNS
   - Lightning Data Service
   - Navigation service
   - Toast notifications

OUTPUT FORMAT:
JSON with summary, issues array, accessibility score, and overall score

Usage

gemini "Review this LWC component: [paste code]" -o json

Credits & Acknowledgments

This skill leverages cutting-edge AI technologies and tools from Google and the open-source community.

---

Technologies & Tools

Google Gemini

[Google AI Studio](https://aistudio.google.com/)

Key capabilities:

• Gemini 3 Pro multimodal AI model
• Image generation via Nano Banana Pro extension
• Code review and analysis capabilities
• Documentation research and summarization

Gemini CLI

[npm: @google/gemini-cli](https://www.npmjs.com/package/@google/gemini-cli)

Key features:

• Command-line access to Gemini models
• Extension support (Nano Banana)
• Non-interactive mode with --yolo flag
• JSON output for programmatic use

Nano Banana Pro

Gemini Image Generation Extension

Key features:

• High-quality image generation
• ERD and diagram creation
• UI/UX mockup generation
• Architecture visualization

---

Display Technologies

timg

[GitHub: hzeller/timg](https://github.com/hzeller/timg)

Key features:

• Terminal image viewer
• Kitty graphics protocol support
• Multiple format support (PNG, JPG, GIF)
• Inline terminal display

Kitty Graphics Protocol

[Kitty Documentation](https://sw.kovidgoyal.net/kitty/graphics-protocol/)

Key features:

• High-fidelity image display in terminals
• Supported by Ghostty, Kitty, WezTerm
• Enables visual content in CLI workflows

Ghostty Terminal

[ghostty.org](https://ghostty.org/)

Key features:

• Modern GPU-accelerated terminal
• Kitty graphics protocol support
• Cross-platform (macOS, Linux)
• High performance rendering

---

Salesforce Resources

Salesforce Lightning Design System (SLDS)

[lightningdesignsystem.com](https://www.lightningdesignsystem.com/)

• Design patterns for LWC mockups
• Color palettes and typography
• Component specifications

Salesforce Developers

[developer.salesforce.com](https://developer.salesforce.com/)

• API documentation
• Best practices guides
• Platform architecture references

---

Special Thanks

• Google AI team for Gemini and the Gemini CLI
• The timg project for terminal graphics
• Ghostty team for excellent Kitty protocol support
• Salesforce community for design system resources

---

If we've missed anyone whose work influenced this skill, please let us know so we can add proper attribution.

sf-diagram-nanobananapro

AI-powered visual content generation for Salesforce development. Generate ERD diagrams, LWC mockups, and architecture visuals using Gemini 3 Pro Image (Nano Banana Pro).

Features

• 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

Installation

# Install as part of sf-skills
npx skills add Jaganpro/sf-skills

# Or install just this skill
npx skills add Jaganpro/sf-skills --skill sf-diagram-nanobananapro

Prerequisites

IMPORTANT: Run the prerequisites check before using this skill:

~/.claude/skills/sf-diagram-nanobananapro/scripts/check-prerequisites.sh

Quick Start

1. Set up your API key

Add to ~/.zshrc:

export GEMINI_API_KEY="your-personal-api-key"
export NANOBANANA_MODEL=gemini-3-pro-image-preview

2. Invoke the skill

Skill: sf-diagram-nanobananapro
Request: "Generate an ERD diagram showing Account, Contact, and Opportunity relationships"

3. View the result

Images are displayed inline using Kitty graphics protocol (Ghostty) or via Claude's multimodal vision using the Read tool.

Use Cases

Cross-Skill Integration

Documentation

• Gemini CLI Setup

Security Notes

NEVER commit your GEMINI_API_KEY to version control

• Store API key in ~/.zshrc only (not in project files)
• The key is personal and tied to your Google account billing

Requirements

• Ghostty terminal (for Kitty graphics)
• Gemini CLI with Nano Banana extension
• GEMINI_API_KEY environment variable
• timg (for terminal image display)

License

MIT License. See LICENSE file. Copyright (c) 2024-2025 Jag Valaiyapathy

<!-- Parent: sf-diagram-nanobananapro/SKILL.md -->

Official Salesforce Architect ERD Aesthetic Guide

Reference for generating ERDs matching the architect.salesforce.com visual style. This is the default style for all ERD diagrams generated by sf-diagram-nanobananapro.

---

Cloud-Specific Color Palettes

Each Salesforce cloud has its own brand color. The skill auto-detects which cloud to use based on the objects requested.

---

The Signature Box Style: "Dark Border + Light Fill"

This is the defining visual pattern of architect.salesforce.com diagrams:

Visual Example

┌─────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░ │  ← Light translucent fill
│ ░ Opportunity          ░ │  ← Bold logical name
│ ░ Opportunity          ░ │  ← Smaller italic API name
│ ░ • Name               ░ │  ← Key fields with bullets
│ ░ • Amount             ░ │
│ ░ • Close Date         ░ │
└─────────────────────────┘
  ↑ Dark solid border

---

Page Structure

1. Page Title (Top)

Large bold text centered at the very top:

• Format: "[Cloud Name] Overview Data Model"
• Example: "Sales Cloud Overview Data Model"

2. Header Banner

Below the title, a horizontal banner containing:

┌──────────────────────────────────────────────────────────────────────────────┐
│ [salesforce]  SALES CLOUD   │  LEGEND:                                       │
│               Overview      │  ENTITIES        │  RELATIONSHIPS              │
│                             │  [boxes...]      │  [symbols...]               │
└──────────────────────────────────────────────────────────────────────────────┘

Left Section:

• Salesforce cloud logo
• "[CLOUD NAME] Overview" in dark background

Center Section - ENTITIES:

• Cloud Entity (dark border + light fill)
• Related Entity (dark border + light fill)
• External Entity (black border + white fill)

Right Section - RELATIONSHIPS:

• Parent to Child (Many-to-One)
• Required to Required (One-to-One)
• Optional to Optional (Zero-or-One to Zero-or-One)
• Many-to-Many

3. Main Diagram Area

The ERD with objects and relationship lines.

4. Footer

┌──────────────────────────────────────────────────────────────────────────────┐
│ ©2024 Salesforce - Subject to change without notice    Last modified: [DATE]│
└──────────────────────────────────────────────────────────────────────────────┘

---

Entity Box Format

Each object box contains:

┌─────────────────────────┐
│ Opportunity             │  ← Bold logical name (larger font)
│ Opportunity             │  ← API name (smaller, italic, gray)
│ • Name                  │  ← Key field 1 with bullet
│ • Amount                │  ← Key field 2 with bullet
│ • Close Date            │  ← Key field 3 with bullet
│ • StageName             │  ← Key field 4 (optional)
└─────────────────────────┘

Recommended Fields by Object

---

Relationship Line Labels

Always include descriptive text labels on relationship lines.

Line Styling

---

Master Prompt Template

Use this template when generating ERDs:

Create a Salesforce [CLOUD_NAME] ERD in the EXACT architect.salesforce.com style:

PAGE TITLE (very top, large bold text):
'[Cloud Name] Overview Data Model'

HEADER SECTION (below title):
- Left: Salesforce cloud logo + '[CLOUD_NAME] Overview' in dark [COLOR] (#[HEX]) banner box
- Center: LEGEND with 'ENTITIES' section showing:
  * Cloud Entity box (dark [COLOR] border, light [COLOR] ~25% opacity fill)
  * Related Entity box (dark border, lighter fill)
  * External Entity box (black border, white fill)
- Right: 'RELATIONSHIPS' section showing notation symbols

BOX STYLING - CRITICAL:
- DARK BORDER: Solid 2px border in dark [COLOR] (#[HEX])
- LIGHT TRANSLUCENT FILL: Same [COLOR] hue at ~25% opacity
- Rounded corners (8-12px radius)
- Text in dark gray/black on the light fill

ENTITY BOX FORMAT:
┌─────────────────────────┐
│ Logical Name            │  (Bold, larger)
│ APIName                 │  (Smaller, italic, gray)
│ • Field1                │  (Bullet points)
│ • Field2                │
└─────────────────────────┘

OBJECTS TO INCLUDE:
[List objects with their fields]

RELATIONSHIP LINES:
- Thin black lines with text labels ON the lines
- 'child of' / 'parent of' / 'related to' labels
- Crow's foot on many side, bar on one side
- STRAIGHT LINES ONLY (horizontal and vertical)

FOOTER:
Left: '©[YEAR] Salesforce - Subject to change without notice'
Right: 'Last modified: [DATE]'

CRITICAL: Dark [COLOR] borders with LIGHT translucent [COLOR] fill.

---

Cloud-Specific Templates

Sales Cloud

COLOR: Teal #0B827C
OBJECTS: Lead, Account, Contact, Opportunity, Campaign, CampaignMember,
         Quote, Order, Product2, PricebookEntry, Territory

Service Cloud

COLOR: Magenta #9E2A7D
OBJECTS: Case, Knowledge, KnowledgeArticle, Entitlement, Asset,
         ServiceContract, WorkOrder, Swarm, Incident, Problem

Platform (Generic)

COLOR: Purple #5A67D8
OBJECTS: Account, Contact, User, Custom Objects

---

Quick Reference Checklist

ARCHITECT.SALESFORCE.COM ERD CHECKLIST
═══════════════════════════════════════

☐ Page title at very top ("[Cloud] Overview Data Model")
☐ Header banner with Salesforce logo + "[CLOUD] Overview"
☐ Legend bar (ENTITIES + RELATIONSHIPS sections)
☐ DARK border in cloud's brand color
☐ LIGHT translucent fill (~25% opacity)
☐ Entity boxes: Name + API Name + bullet fields
☐ Labeled relationship lines ("child of", "related to")
☐ Crow's foot notation for many-side
☐ Straight lines only (no diagonals)
☐ Footer with copyright + last modified date
☐ Clean white background

---

Version History

<!-- Parent: sf-diagram-nanobananapro/SKILL.md -->

Examples

Example prompts and outputs for sf-diagram-nanobananapro.

ERD Examples

# Basic CRM ERD
gemini --yolo "/generate 'Salesforce ERD diagram: Account (blue), Contact (green), Opportunity (yellow). Show relationships with arrows. Clean white background.'"

# Custom Object ERD
gemini --yolo "/generate 'ERD diagram for custom objects: Project__c, Task__c, Resource__c. Master-detail and lookup relationships shown.'"

LWC Mockup Examples

# Data Table Mockup
gemini --yolo "/generate 'Lightning datatable mockup showing Account records with columns: Name, Industry, Annual Revenue. Include search bar and pagination.'"

# Record Form Mockup
gemini --yolo "/generate 'Salesforce Lightning record form for Contact object. Show Name, Email, Phone, Account lookup fields.'"

Architecture Examples

# Integration Flow
gemini --yolo "/generate 'Integration architecture diagram: Salesforce to ERP sync via MuleSoft. Show Platform Events, Named Credentials, External Services.'"

Output Location

Generated images are saved to ~/nanobanana-output/

<!-- Parent: sf-diagram-nanobananapro/SKILL.md -->

Gemini CLI Setup for sf-diagram-nanobananapro

Prerequisites

1. Authenticate with Google

# Start Gemini CLI - opens browser for OAuth
gemini

# Select "Login with Google" when prompted
# Credentials cached at ~/.gemini/oauth_creds.json

2. Install Nano Banana Extension

gemini extensions install https://github.com/gemini-cli-extensions/nanobanana

3. Install timg for Image Display

brew install timg

4. Configure Environment

Add to ~/.zshrc:

export NANOBANANA_MODEL=gemini-3-pro-image-preview
export PATH="$HOME/.local/bin:$PATH"

---

Verification

# Check Gemini CLI
gemini --version

# Check Nano Banana
gemini extensions list

# Check timg
which timg

# Test image generation
gemini "/generate 'A blue circle on white background'"
timg ~/gemini-images/*.png

---

File Locations

<!-- Parent: sf-diagram-nanobananapro/SKILL.md -->

Interview Questions Reference

This document defines the questions Claude should ask (via AskUserQuestion) before generating images with sf-diagram-nanobananapro.

---

How to Use This Reference

When a user requests an image, Claude should:

1. Detect image type from the request 2. Find the matching question set below 3. Invoke AskUserQuestion with those questions 4. Build prompt using the answers 5. Generate image with optimized parameters

Skip Interview Triggers

Skip questions and use defaults when user says:

• "quick" - e.g., "Quick ERD of Account-Contact"
• "simple" - e.g., "Simple LWC mockup"
• "just generate" - e.g., "Just generate an architecture diagram"
• "fast" - e.g., "Fast ERD draft"

---

ERD Diagram Questions

When to Use

User mentions: ERD, entity relationship, data model, object relationships, schema diagram

Questions

{
  "questions": [
    {
      "question": "Which objects should be included in the ERD?",
      "header": "Objects",
      "multiSelect": false,
      "options": [
        {
          "label": "Core CRM (Recommended)",
          "description": "Account, Contact, Opportunity, Case - standard sales/service objects"
        },
        {
          "label": "Sales Cloud",
          "description": "Lead, Campaign, Quote, Order, PriceBook, Product"
        },
        {
          "label": "Service Cloud",
          "description": "Case, Knowledge, Entitlement, Asset, ServiceContract"
        },
        {
          "label": "Custom objects",
          "description": "I'll specify the custom objects to include"
        }
      ]
    },
    {
      "question": "What visual style do you prefer?",
      "header": "Style",
      "multiSelect": false,
      "options": [
        {
          "label": "Architect.salesforce.com (Recommended)",
          "description": "Official Salesforce style: dark border + light fill, header banner, legend bar"
        },
        {
          "label": "Whiteboard",
          "description": "Hand-drawn look, casual feel for brainstorming"
        },
        {
          "label": "Technical",
          "description": "Detailed with field names and data types"
        },
        {
          "label": "Minimalist",
          "description": "Simple boxes, focus on relationships only"
        }
      ]
    },
    {
      "question": "What's the primary purpose of this ERD?",
      "header": "Purpose",
      "multiSelect": false,
      "options": [
        {
          "label": "Documentation (4K)",
          "description": "High quality for wikis, docs, long-term reference"
        },
        {
          "label": "Quick draft (1K)",
          "description": "Fast iteration, refine the prompt first"
        },
        {
          "label": "Presentation",
          "description": "Slides for stakeholders, clean and simple"
        },
        {
          "label": "Architecture review",
          "description": "Technical discussion with developers/architects"
        }
      ]
    },
    {
      "question": "Any special requirements? (Select all that apply)",
      "header": "Extras",
      "multiSelect": true,
      "options": [
        {
          "label": "Include legend",
          "description": "Add a legend explaining colors and relationship types"
        },
        {
          "label": "Show field names",
          "description": "Display key fields inside each object box"
        },
        {
          "label": "Color-code by type",
          "description": "Standard=blue, Custom=orange, External=green"
        },
        {
          "label": "None",
          "description": "Use default styling without extras"
        }
      ]
    }
  ]
}

Answer-to-Prompt Mapping

Default Values (for Skip Mode)

• Objects: Core CRM
• Style: Architect.salesforce.com
• Purpose: Quick draft (1K)
• Extras: Include legend

---

LWC Component Mockup Questions

When to Use

User mentions: LWC, Lightning Web Component, component mockup, wireframe, UI mockup, form, table, card

Questions

{
  "questions": [
    {
      "question": "What type of component do you need?",
      "header": "Component",
      "multiSelect": false,
      "options": [
        {
          "label": "Data table (Recommended)",
          "description": "List view with columns, sorting, row actions"
        },
        {
          "label": "Record form",
          "description": "Create/edit form with fields and sections"
        },
        {
          "label": "Dashboard card",
          "description": "Metrics, charts, or KPI tiles"
        },
        {
          "label": "Custom layout",
          "description": "I'll describe the specific layout needed"
        }
      ]
    },
    {
      "question": "Which Salesforce object is this for?",
      "header": "Object",
      "multiSelect": false,
      "options": [
        {
          "label": "Account",
          "description": "Customer/company records"
        },
        {
          "label": "Contact",
          "description": "Individual person records"
        },
        {
          "label": "Opportunity",
          "description": "Sales deals and pipeline"
        },
        {
          "label": "Custom object",
          "description": "I'll specify the object name"
        }
      ]
    },
    {
      "question": "Where will this component be used?",
      "header": "Context",
      "multiSelect": false,
      "options": [
        {
          "label": "Lightning Record Page (Recommended)",
          "description": "Embedded on Account, Contact, etc. detail pages"
        },
        {
          "label": "Lightning App Page",
          "description": "Home page, dashboard, or custom app"
        },
        {
          "label": "Experience Cloud",
          "description": "Customer/partner portal (community)"
        },
        {
          "label": "Standalone app",
          "description": "Full-page Lightning app or utility bar"
        }
      ]
    },
    {
      "question": "Style preferences? (Select all that apply)",
      "header": "Style",
      "multiSelect": true,
      "options": [
        {
          "label": "SLDS standard",
          "description": "Standard Lightning Design System styling"
        },
        {
          "label": "Dense/compact",
          "description": "Reduced spacing for data-heavy views"
        },
        {
          "label": "Mobile-responsive",
          "description": "Adapts to mobile screen sizes"
        },
        {
          "label": "Card-based",
          "description": "Elevated card container with shadow"
        }
      ]
    }
  ]
}

Answer-to-Prompt Mapping

Default Values (for Skip Mode)

• Component: Data table
• Object: Account
• Context: Lightning Record Page
• Style: SLDS standard

---

Architecture/Integration Diagram Questions

When to Use

User mentions: architecture, integration, system diagram, data flow, API flow, authentication flow

Questions

{
  "questions": [
    {
      "question": "What type of diagram do you need?",
      "header": "Diagram",
      "multiSelect": false,
      "options": [
        {
          "label": "Integration flow (Recommended)",
          "description": "System-to-system data synchronization"
        },
        {
          "label": "Data flow",
          "description": "Entity movement between systems"
        },
        {
          "label": "Authentication flow",
          "description": "OAuth, JWT, SSO sequence diagram"
        },
        {
          "label": "Event-driven",
          "description": "Platform Events, CDC, pub/sub architecture"
        }
      ]
    },
    {
      "question": "Which systems are involved?",
      "header": "Systems",
      "multiSelect": false,
      "options": [
        {
          "label": "Salesforce + ERP",
          "description": "SAP, Oracle, NetSuite, Microsoft Dynamics"
        },
        {
          "label": "Salesforce + Marketing",
          "description": "Marketo, Pardot, HubSpot, Marketing Cloud"
        },
        {
          "label": "Salesforce + Custom APIs",
          "description": "Internal services, microservices, legacy systems"
        },
        {
          "label": "Multiple systems",
          "description": "I'll specify the systems involved"
        }
      ]
    },
    {
      "question": "What protocols/patterns are used? (Select all that apply)",
      "header": "Protocols",
      "multiSelect": true,
      "options": [
        {
          "label": "REST APIs",
          "description": "JSON over HTTP, most common pattern"
        },
        {
          "label": "Platform Events / CDC",
          "description": "Salesforce event-driven integration"
        },
        {
          "label": "MuleSoft / iPaaS",
          "description": "Integration platform as middleware"
        },
        {
          "label": "SOAP / Legacy",
          "description": "XML-based, enterprise protocols"
        }
      ]
    },
    {
      "question": "What elements should be highlighted? (Select all that apply)",
      "header": "Elements",
      "multiSelect": true,
      "options": [
        {
          "label": "Auth badges",
          "description": "Show OAuth 2.0, JWT, API Key on connections"
        },
        {
          "label": "Error handling",
          "description": "Retry logic, dead letter queues, fallbacks"
        },
        {
          "label": "Data transforms",
          "description": "Mapping, conversion, enrichment steps"
        },
        {
          "label": "Timing/frequency",
          "description": "Sync intervals, batch schedules"
        }
      ]
    }
  ]
}

Answer-to-Prompt Mapping

Default Values (for Skip Mode)

• Diagram: Integration flow
• Systems: Salesforce + Custom APIs
• Protocols: REST APIs
• Elements: Auth badges

---

Code Review Questions (Gemini Sub-Agent)

When to Use

User mentions: review, code review, check my code, analyze, audit, best practices

Questions for Apex Review

{
  "questions": [
    {
      "question": "What type of Apex code is this?",
      "header": "Code Type",
      "multiSelect": false,
      "options": [
        {
          "label": "Trigger",
          "description": "Before/after trigger on an object"
        },
        {
          "label": "Batch job",
          "description": "Batch Apex for large data processing"
        },
        {
          "label": "Service class",
          "description": "Business logic, utility, or helper class"
        },
        {
          "label": "Controller",
          "description": "Aura/LWC controller or VF controller"
        }
      ]
    },
    {
      "question": "What should the review focus on?",
      "header": "Focus",
      "multiSelect": true,
      "options": [
        {
          "label": "Bulkification",
          "description": "SOQL/DML in loops, governor limits"
        },
        {
          "label": "Security",
          "description": "CRUD/FLS checks, injection vulnerabilities"
        },
        {
          "label": "Performance",
          "description": "Query optimization, caching, efficiency"
        },
        {
          "label": "Best practices",
          "description": "Naming, structure, patterns, testability"
        }
      ]
    }
  ]
}

---

Quick Reference Card

---

Example: Full Interview Flow

User Says

"I need an ERD for my Service Cloud implementation"

Claude Invokes AskUserQuestion

Objects: Core CRM / Sales Cloud / Service Cloud / Custom
Style: Professional / Whiteboard / Technical / Minimalist
Purpose: Documentation / Quick draft / Presentation / Review
Extras: Legend / Field names / Color-code / None

User Selects

• Objects: Service Cloud
• Style: Professional
• Purpose: Documentation
• Extras: Legend, Color-code

Claude Builds Prompt

Professional Salesforce ERD diagram showing Service Cloud objects:
- Case (blue, center): Main service object
- Knowledge (green, right): Linked articles
- Entitlement (yellow, left): Service level agreements
- Asset (orange, below): Customer-owned products
- ServiceContract (purple, top): Contract management

Relationships:
- Case → Knowledge (Lookup, dashed arrow)
- Case → Asset (Lookup, dashed arrow)
- Asset → ServiceContract (Master-Detail, solid arrow)

Color coding: Standard objects (blue), Service objects (green/yellow)
Include legend in bottom-right corner.
Clean white background, SLDS styling.

Claude Generates

uv run scripts/generate_image.py \
  -p "[prompt above]" \
  -f "service-cloud-erd.png" \
  -r 4K

<!-- Parent: sf-diagram-nanobananapro/SKILL.md -->

Iteration Workflow: Draft → Final

Best practices for cost-effective image generation with sf-diagram-nanobananapro.

Why Iterate at Low Resolution?

Key Insight: Get the prompt right at 1K before spending on 4K generation.

---

The Workflow

┌─────────────────────────────────────────────────────────────┐
│                     DRAFT PHASE (1K)                        │
│                                                             │
│  1. Generate initial image with CLI                         │
│     gemini --yolo "/generate 'Your prompt...'"              │
│                                                             │
│  2. Review in Preview                                       │
│     open ~/nanobanana-output/*.png                          │
│                                                             │
│  3. Is the layout correct? ─────────────────┐               │
│     │                                       │               │
│     ▼ No                                    ▼ Yes           │
│     Refine prompt or use /edit              Continue        │
│     └──────────────────────────────────────►│               │
└─────────────────────────────────────────────┼───────────────┘
                                              │
                                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    FINAL PHASE (4K)                         │
│                                                             │
│  4. Generate production quality with Python script          │
│     uv run scripts/generate_image.py \                      │
│       -p "Your refined prompt" \                            │
│       -f "final-output.png" \                               │
│       -r 4K                                                 │
│                                                             │
│  5. Open and use                                            │
│     open ~/nanobanana-output/*final-output*.png             │
└─────────────────────────────────────────────────────────────┘

---

Common Iteration Patterns

Pattern 1: Prompt Refinement

# Attempt 1: Too generic
gemini --yolo "/generate 'Account ERD'"
# Result: Missing relationships, wrong colors

# Attempt 2: Add specifics
gemini --yolo "/generate 'Account ERD with Contact and Opportunity, blue boxes'"
# Result: Better, but legend missing

# Attempt 3: Add styling details
gemini --yolo "/generate 'Salesforce ERD: Account (blue, center), Contact (green),
Opportunity (yellow). Master-detail = thick arrow. Lookup = dashed. Include legend.'"
# Result: Perfect layout!

# Final: Generate at 4K
uv run scripts/generate_image.py \
  -p "Salesforce ERD: Account (blue, center)..." \
  -f "crm-erd-final.png" \
  -r 4K

Pattern 2: Edit-Based Iteration

# Start with basic ERD
gemini --yolo "/generate 'Account-Contact ERD'"

# Edit to add more objects
gemini --yolo "/edit 'Add Opportunity linked to Account with master-detail'"

# Edit to improve styling
gemini --yolo "/edit 'Add legend, use Salesforce Lightning blue (#0176D3)'"

# Final at 4K
uv run scripts/generate_image.py \
  -p "Account-Contact-Opportunity ERD with legend, SLDS colors" \
  -f "final-erd.png" \
  -r 4K

Pattern 3: Python Script for Editing

# Generate at 1K
uv run scripts/generate_image.py \
  -p "Dashboard mockup with charts" \
  -f "dashboard-v1.png"

# Edit with resolution control
uv run scripts/generate_image.py \
  -p "Add a KPI summary bar at the top" \
  -i ~/nanobanana-output/*dashboard-v1*.png \
  -f "dashboard-v2.png" \
  -r 2K

# Final version
uv run scripts/generate_image.py \
  -p "Polish: add subtle shadows, round corners on cards" \
  -i ~/nanobanana-output/*dashboard-v2*.png \
  -f "dashboard-final.png" \
  -r 4K

---

Timestamp Filenames

The Python script automatically adds timestamps for easy versioning:

~/nanobanana-output/
├── 2026-01-13-10-30-15-erd-v1.png      # First attempt
├── 2026-01-13-10-32-45-erd-v2.png      # After edit
├── 2026-01-13-10-35-00-erd-final.png   # Production 4K

Tip: Use descriptive filenames like crm-erd.png - the timestamp is auto-prepended.

---

When to Use Each Method

---

Cost Optimization Tips

1. Never generate 4K on first attempt - always draft at 1K first 2. Use `/edit` for small changes - cheaper than regenerating 3. Batch similar requests - get all ERDs right before final generation 4. Save working prompts - reuse successful prompt patterns 5. Use `--seed` for reproducibility - same seed = similar output

---

Troubleshooting

Image doesn't match prompt

• Add more specific details (colors, positions, relationships)
• Use SLDS color codes: #0176D3 (blue), #04844B (green), #FFB75D (yellow)
• Specify layout: "center", "top-right", "below parent"

Edit not applying correctly

• Be specific about what to change
• Reference existing elements: "Move the Account box to center"
• One change at a time for precision

4K output looks different from 1K draft

• Use exact same prompt text
• Consider using --seed for consistency
• Minor variations are normal due to model behavior