Skip to content

SKILL.md

Latest commit

 

History

History
323 lines (233 loc) · 9.27 KB

SKILL.md

File metadata and controls

323 lines (233 loc) · 9.27 KB
name sf-imagen
description AI-powered visual content generation for Salesforce development. Generates ERD diagrams, LWC mockups, architecture visuals using Nano Banana Pro. Also provides Gemini as a parallel sub-agent for code review and research.
license MIT
metadata
version author scoring
1.2.0
Jag Valaiyapathy
80 points across 5 categories

sf-imagen: Salesforce Visual AI Skill

Visual content generation and AI sub-agent for Salesforce development using Gemini CLI with Nano Banana Pro extension.

⚠️ IMPORTANT: Prerequisites Check

Before using this skill, ALWAYS run the prerequisites check first:

~/.claude/plugins/marketplaces/sf-skills/sf-imagen/scripts/check-prerequisites.sh

If the check fails, DO NOT invoke this skill. The user must fix the missing prerequisites first.

Requirements

Requirement Description How to Get
macOS Required for Preview app image display Built-in
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

Optional (for 4K/editing via Python script)

Requirement Description How to Get
uv Fast Python package runner curl -LsSf https://astral.sh/uv/install.sh | sh

Setting Up API Key

Add to ~/.zshrc (DO NOT commit to version control):

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

Core Capabilities

1. Visual ERD Generation

Generate actual rendered ERD diagrams (not just Mermaid code):

  • Query object metadata via sf-metadata
  • Generate visual diagram with Nano Banana Pro
  • Display in macOS Preview app (default)

2. LWC/UI Mockups

Generate wireframes and component mockups:

  • Data tables, record forms, dashboard cards
  • Experience Cloud page layouts
  • Mobile-responsive designs following SLDS

3. Gemini Code Review (Sub-Agent)

Parallel code review while Claude continues working:

  • Apex class/trigger review for best practices
  • LWC component review for accessibility
  • SOQL query optimization suggestions

4. Documentation Research (Sub-Agent)

Parallel Salesforce documentation research:

  • Look up API references and limits
  • Find best practices and patterns
  • Research release notes

🔄 Draft → Final Workflow (Cost-Effective Iteration)

For complex visuals, iterate at low resolution before generating the final:

Phase Resolution Purpose Time Method
Draft 1K Quick feedback, prompt refinement ~3s CLI or Python
Iteration 1K Style/layout adjustments ~3s CLI /edit or Python
Final 4K Production-quality output ~10s Python script only

Recommended Workflow

  1. Draft at 1K - Generate initial image quickly
  2. Iterate - Refine prompt or use /edit to adjust
  3. Final at 4K - Once satisfied, generate production quality

Example: Draft to Final

# Step 1: Draft (fast, cheap)
gemini --yolo "/generate 'Account-Contact ERD with blue boxes'"
open ~/nanobanana-output/*.png  # Review

# Step 2: Iterate with /edit
gemini --yolo "/edit 'Add Opportunity, use thicker arrows'"

# Step 3: Final at 4K (requires Python script)
uv run scripts/generate_image.py \
  -p "Account-Contact-Opportunity ERD, blue boxes, thick arrows, legend" \
  -f "crm-erd-final.png" \
  -r 4K
open ~/nanobanana-output/*crm-erd-final*.png

Image Editing with /edit

Refine existing images with natural language instructions:

# Edit the most recent generated image
gemini --yolo "/edit 'Move Account box to center, make relationship arrows thicker'"

# Common editing commands
gemini --yolo "/edit 'Add a legend in the bottom right corner'"
gemini --yolo "/edit 'Change background to light gray'"
gemini --yolo "/edit 'Add Salesforce Lightning blue (#0176D3) to headers'"

Editing via Python Script (with resolution control)

uv run scripts/generate_image.py \
  -p "Add legend in bottom right, use SLDS colors" \
  -i ~/nanobanana-output/previous-erd.png \
  -f "erd-with-legend.png" \
  -r 2K

Artistic Styles & Variations

The CLI extension supports style modifiers for creative control:

# Apply artistic styles
gemini --yolo "/generate 'Salesforce ERD' --styles=modern,minimalist"

# Available styles
# photorealistic, watercolor, oil-painting, sketch, pixel-art
# anime, vintage, modern, abstract, minimalist

# Generate multiple variations
gemini --yolo "/generate 'Dashboard mockup' --count=3 --variations=color-palette"

# Reproducible output with seed
gemini --yolo "/generate 'Account ERD' --seed=42"

Workflow Patterns

Pattern A: Visual ERD Generation

Trigger: User asks for visual ERD, rendered diagram, or image-based data model

Workflow:

  1. Run prerequisites check
  2. Query object metadata via sf-metadata (if org connected)
  3. Build Nano Banana prompt with object relationships
  4. Execute Gemini CLI with /generate command (requires --yolo flag)
  5. Open result in macOS Preview app using open command

Example:

# Generate image
gemini --yolo "/generate 'Professional Salesforce ERD diagram showing:
   - Account (blue box, center)
   - Contact (green box, linked to Account with lookup arrow)
   - Opportunity (yellow box, linked to Account with master-detail thick arrow)
   Include legend. Clean white background, Salesforce Lightning style.'"

# Open in macOS Preview (DEFAULT)
open ~/nanobanana-output/[generated-file].png

Pattern B: LWC Mockup

Trigger: User asks for component mockup, wireframe, or UI design

Workflow:

  1. Load appropriate template from templates/lwc/
  2. Customize prompt with user requirements
  3. Execute via Nano Banana
  4. Open in Preview app

Pattern C: Parallel Code Review

Trigger: User asks for code review, second opinion, or "review while I work"

Workflow:

  1. Run Gemini in background with JSON output
  2. Claude continues with current task
  3. Return Gemini's findings when ready

Example:

gemini "Review this Apex trigger for:
   - Bulkification issues
   - Best practices violations
   - Security concerns (CRUD/FLS)
   Code: [trigger code]" -o json

Pattern D: Documentation Research

Trigger: User asks to look up, research, or find documentation

Workflow:

  1. Run Gemini with documentation query
  2. Return findings with sources

Commands Reference

Image Generation

# Generate image from prompt (MUST use --yolo for non-interactive)
gemini --yolo "/generate 'description'"

# Images are saved to ~/nanobanana-output/

Image Display

# Open in macOS Preview app (default)
open /path/to/image.png

# Open most recent generated image
open ~/nanobanana-output/$(ls -t ~/nanobanana-output/*.png | head -1)

# View inline in Claude Code conversation (multimodal vision)
# Use the Read tool → /path/to/image.png

Cross-Skill Integration

Skill Integration Usage
sf-diagram Enhance Mermaid with visual rendering "Convert this Mermaid ERD to a visual diagram"
sf-metadata Get object/field data for ERDs Query org before generating ERD
sf-lwc Generate component mockups "Mockup for the AccountList component"
sf-apex Review Apex code via Gemini "Get Gemini's opinion on this trigger"

Helper Scripts

Script Location Purpose
check-prerequisites.sh scripts/ Verify all requirements before use
generate_image.py scripts/ Direct API script for 4K resolution and image editing

Template Usage

ERD Templates (templates/erd/)

  • core-objects.md - Standard CRM objects
  • custom-objects.md - Custom data model

LWC Templates (templates/lwc/)

  • data-table.md - Lightning datatable mockups
  • record-form.md - Record form mockups
  • dashboard-card.md - Dashboard card mockups

Architecture Templates (templates/architecture/)

  • integration-flow.md - Integration architecture diagrams

Review Templates (templates/review/)

  • apex-review.md - Apex code review prompts
  • lwc-review.md - LWC review prompts

Troubleshooting

Prerequisites Check Failed

Run scripts/check-prerequisites.sh and fix each issue:

  • No API Key: Set GEMINI_API_KEY in ~/.zshrc (personal key from aistudio.google.com)
  • No Gemini CLI: Install with npm
  • No Nano Banana: Install extension via gemini CLI

Image Not Opening

  • Ensure you're on macOS (Preview app is macOS-only)
  • Check the file path exists: ls ~/nanobanana-output/
  • Try opening manually: open ~/nanobanana-output/[filename].png

API Key Errors

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

License

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