sf-diagram-nanobananapro_skill

Overview

This skill provides AI-powered visual content generation tailored for Salesforce development using Nano Banana Pro and the Gemini CLI. It creates rendered ERD diagrams, LWC/UI mockups, and architecture visuals, while running a parallel Gemini sub-agent for code review and documentation research. The workflow emphasizes a fast draft→iterate→final approach and integrates Salesforce metadata when available.

How this skill works

The skill runs a prerequisites check, queries org metadata when connected, then builds optimized Nano Banana prompts from a short interview with the user. It invokes the Gemini CLI to generate or edit images, opens results in macOS Preview by default, and runs a Gemini sub-agent in parallel for code review or documentation lookups. For high-resolution final images, it uses an optional Python script to produce 4K outputs.

When to use it

• Generate a visual ERD for documentation or architecture reviews
• Create LWC component mockups, wireframes, and responsive UI previews
• Iteratively refine diagrams or UI mockups before final production
• Run a parallel AI code review of Apex, LWC, or SOQL while working
• Look up Salesforce API references, limits, or release notes in context

Best practices

• Always run the prerequisites check script before invoking the skill
• Use the interview-first flow to collect objects, style, purpose, and extras
• Start with a 1K draft for quick iteration, then produce 4K for final output
• Keep GEMINI_API_KEY private and exported only in your shell config
• When connected to an org, allow sf-metadata queries to include accurate fields and relationships

Example use cases

• Generate a Sales Cloud ERD showing Account, Contact, Opportunity with architect.salesforce.com styling
• Produce a record-form LWC mockup for mobile and desktop using SLDS colors
• Iterate a dashboard card design: draft at 1K, tweak with /edit, finalize at 4K
• Run a Gemini background review of an Apex trigger for bulkification and security issues
• Convert a Mermaid ERD into a rendered image that matches Salesforce branding