| name | ai-multimodal |
| description | Image/vision analysis, generation prompt crafting, and multimodal AI workflow orchestration |
| layer | utility |
| category | ai-tools |
| triggers | ["analyze this image","describe this screenshot","generate an image","vision analysis","image prompt","multimodal","read this diagram"] |
| inputs | [{"image_path":"Path to an image file for analysis"},{"analysis_goal":"What to extract or understand from the image"},{"generation_prompt":"Description of image to generate"},{"style":"Visual style preferences for generation"}] |
| outputs | [{"analysis":"Structured description of image contents"},{"extracted_data":"Specific data pulled from the image (text, UI elements, diagrams)"},{"generation_prompt":"Optimized prompt for image generation APIs"},{"recommendations":"Suggestions based on visual analysis"}] |
| linksTo | ["ui-ux-pro","media-processing","chrome-devtools"] |
| linkedFrom | ["orchestrator","planner"] |
| preferredNextSkills | ["ui-ux-pro","media-processing"] |
| fallbackSkills | ["chrome-devtools"] |
| riskLevel | low |
| memoryReadPolicy | selective |
| memoryWritePolicy | selective |
| sideEffects | [] |
AI Multimodal
Purpose
This skill handles all interactions involving visual content — analyzing screenshots, interpreting diagrams, extracting information from images, crafting image generation prompts, and orchestrating multimodal AI workflows. It bridges the gap between visual and textual reasoning.
Key Concepts
Vision Analysis Modes
| Mode | Use Case | Output |
|---|
| Descriptive | "What is in this image?" | Detailed natural language description |
| Extractive | "Read the text/data from this image" | Structured data extraction |
| Diagnostic | "What's wrong with this UI?" | Issue identification with recommendations |
| Comparative | "How do these two designs differ?" | Structured comparison |
| Interpretive | "What does this diagram mean?" | Semantic interpretation of visual information |
Image Understanding Framework
When analyzing any image, systematically assess:
LAYER 1 — COMPOSITION:
- Type: screenshot / photo / diagram / chart / illustration / icon
- Dimensions: aspect ratio and resolution implications
- Layout: grid / freeform / hierarchical / sequential
LAYER 2 — CONTENT:
- Primary subject(s): What dominates the image
- Text content: Any readable text (OCR-level extraction)
- Data content: Numbers, charts, graphs, tables
- UI elements: Buttons, forms, navigation, cards (if screenshot)
LAYER 3 — CONTEXT:
- Purpose: What this image is trying to communicate
- Audience: Who this is designed for
- Quality: Resolution, clarity, artifacts, compression
LAYER 4 — SEMANTICS:
- Meaning: What information does this convey beyond literal content
- Relationships: How elements relate to each other
- Flow: What sequence or hierarchy is implied
Workflows
Workflow 1: Screenshot Analysis (UI Review)
INPUT: Screenshot of a UI
STEP 1: Identify the application type
- Web app / mobile app / desktop app / CLI
- Platform: browser, iOS, Android, desktop OS
- Framework hints: React DevTools icon, specific component patterns
STEP 2: Catalog UI elements
- Navigation: header, sidebar, tabs, breadcrumbs
- Content: cards, lists, tables, forms
- Actions: buttons, links, toggles, dropdowns
- Feedback: alerts, toasts, loading states, empty states
STEP 3: Assess design quality
- Spacing: consistent padding and margins
- Typography: hierarchy, readability, font choices
- Color: contrast ratios, palette consistency, accessibility
- Alignment: grid adherence, visual balance
- Depth: shadows, elevation, layering
STEP 4: Identify issues
- Accessibility: contrast failures, missing labels, touch target sizes
- Usability: unclear CTAs, information overload, hidden actions
- Consistency: style deviations, mixed patterns
- Responsiveness: overflow, truncation, broken layouts
OUTPUT FORMAT:
SUMMARY: [1-2 sentence overview]
POSITIVE: [What works well]
ISSUES:
- [SEVERITY] [Issue description] → [Recommendation]
ACCESSIBILITY:
- [WCAG criterion] [Pass/Fail] [Details]
