agentleFS
Sign inStart free
salmandevsalmandev/everything-gemini/skills/gemini-multimodal/SKILL.md

gemini-multimodal

Skill2 starsChanged 28 days agoApache-2.0View on GitHub

Use this skill when analyzing visual mockups, inspecting UI screenshots, converting wireframes to frontend code, extracting architecture from diagrams, or performing visual QA regression checks using Gemini's native multimodal capabilities.

1 other project uses a version of this.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

3 rules. About 0 are common, 3 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈3

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Reference Assets: When inspecting diagrams or UI mockups, identify layout hierarchy:

    line 16
  2. Distinctive:

    When converting a visual mockup into web components:

    line 23
  3. Distinctive:

    When given an architectural whiteboard photo or flowchart:

    line 30

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Gemini Multimodal Engineering

Overview

Gemini 1.5/3.8 models feature native multimodal grounding across images, diagrams, video frames, and audio tokens. This skill guides the agent on how to effectively extract structured specifications from visual assets and translate them into production code.

Procedural Workflow

1. Visual Intake & Pre-Processing

  • Aspect Ratio & Resolution: Gemini processes visual inputs with native resolution preservation.
  • Reference Assets: When inspecting diagrams or UI mockups, identify layout hierarchy:
    • Header / Navigation bars
    • Main grid or flex container arrangements
    • Typography weights, line heights, and color hex values
    • Interactive elements (buttons, inputs, carousels, modals)

2. Mockup-to-Code Translation Pattern

When converting a visual mockup into web components:

  1. Layout First: Implement semantic HTML scaffolding matching visual hierarchy.
  2. Design Tokens: Extract exact color palettes, border radiuses, and shadow elevations into CSS variables.
  3. Responsive Breakpoints: Infer desktop, tablet, and mobile reflow logic from the visual layout.
  4. Interactive States: Emulate hover, focus-visible, and active states visible in the UI.

3. Diagram & Flowchart Extraction

When given an architectural whiteboard photo or flowchart:

  1. Transcribe nodes and connections into clean Mermaid.js diagrams.
  2. Extract data models, sequence flows, and component boundaries into typed interfaces.

4. Visual QA & Regression Diffing

  1. Capture screenshots of the rendered application using browser_subagent.
  2. Inspect layout anomalies: overlapping text, clipped containers, misalignment across viewports.
  3. Apply surgical CSS adjustments without affecting sibling components.

Verification Checklist

  • Visual hierarchy precisely reflects the reference asset
  • No placeholder assets or mock text left in production components
  • CSS uses fluid units (rem, ch, %) and CSS grid/flexbox
  • Visual artifacts verified via browser inspection or recording

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free