Claude MarketplacesSubmit
forcedotcom avatar

Generating Visual Diagrams

forcedotcom/afv-library

This is for when you need actual rendered images, not text diagrams. It uses Nano Banana Pro via the Gemini CLI to generate PNGs and SVGs of ERDs, UI mockups, wireframes, and architecture illustrations with a Salesforce architect aesthetic. The workflow is sensible: draft at 1K to check composition, iterate with /edit commands to save tokens, then render final at 4K once you're happy. It gates on prerequisites and defaults to an interview mode that asks clarifying questions before generating, unless you say "quick" or "just generate." Delegates text Mermaid diagrams to a different skill and hands off to LWC or Apex skills once the visual is approved. Honest take: the draft-first approach will save you from expensive 4K regenerations when the layout is wrong.

skills.sh installs
531
GitHub stars
705
last updated
Jul 14, 2026
View on GitHub

Install

$ npx -y skills add forcedotcom/afv-library --skill generating-visual-diagrams --agent claude-code

Installs into .claude/skills of the current project.

Files

This is for when you need actual rendered images, not text diagrams. It uses Nano Banana Pro via the Gemini CLI to generate PNGs and SVGs of ERDs, UI mockups, wireframes, and architecture illustrations with a Salesforce architect aesthetic. The workflow is sensible: draft at 1K to check composition, iterate with /edit commands to save tokens, then render final at 4K once you're happy. It gates on prerequisites and defaults to an interview mode that asks clarifying questions before generating, unless you say "quick" or "just generate." Delegates text Mermaid diagrams to a different skill and hands off to LWC or Apex skills once the visual is approved. Honest take: the draft-first approach will save you from expensive 4K regenerations when the layout is wrong.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/forcedotcom/afv-library
Category
Design & UI/UX
First seen
Jun 3, 2026

More from forcedotcom/afv-library

All 58

Recommended

More Design & UI/UX
1aj-geddes avatarkpi-dashboard-designaj-geddes/useful-ai-promptsDesign and build dashboards that track key performance indicators. Select relevant metrics, visualize data effectively, and communicate insights to stakeholders528skills.sh installs
2theqtcompanyrnd avatarqt-figma-component-generationtheqtcompanyrnd/agent-skills>506skills.sh installs
3yangagent avatarwhiteboard-animationyangagent/whiteboard-animation-skill从图片生成白板手绘动画视频。将任意彩色图片转换为包含线稿绘制和上色两个阶段的动画，带手部覆盖效果，输出 H.264 MP4 视频。支持单张和批量两种模式。当用户说"把图片做成白板动画"、"白板动画"、"批量白板动画"时触发。464skills.sh installs
4omer-metin avatarlanding-page-designomer-metin/skills-for-antigravityWorld-class landing page expertise combining conversion rate optimization science, persuasive design psychology, and the craft of pages that turn visitors into 458skills.sh installs
5rgmez avatarswiftui-accessibility-auditorrgmez/apple-accessibility-skillsAudits SwiftUI views on iOS, iPadOS, and macOS for VoiceOver, Dynamic Type, keyboard focus, and semantic structure issues. Use when reviewing or fixing SwiftUI 441skills.sh installs
6jezweb avataricon-designjezweb/claude-skillsSelect semantically appropriate icons for websites using Lucide, Heroicons, or Phosphor. Covers concept-to-icon mapping, React/HTML templates, and tree-shaking 428skills.sh installs