Media Processor Skill for Claude
Specialized visual and multimedia processing tools. Use this skill whenever a task involves complex visual content — UI mockups, dense screenshots, design images, charts, artwork — where precise details like spacing, hex colors, font sizes, and component hierarchy need to be extracted accurately. Also use for: reviewing or auditing existing UI against designs, comparing screenshots for visual regressions, transcribing audio/video, extracting data from PDFs with complex layouts, and generating images. Trigger whenever the user wants to implement from a design, review or compare UI screenshots, analyze visual details precisely, describe artwork or aesthetic content, or process any media file (audio, video, PDF).
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/avibebuilder/claude-prime --skill media-processorWhat comes with it
34 794 bytes besides the instructionThe instruction itself
7 sections, as written by the authorMedia Processor
Specialized tools for extracting precise visual details (exact colors, spacing, hierarchy), processing audio/video, and generating images.
Tools
All scripts live in scripts/ relative to this skill's directory. They auto-select the best model per task and handle retries, large file uploads, and error reporting.
| Script | Purpose |
|--------|---------|
| gemini_batch_process.py | Analyze images, transcribe audio/video, extract data from PDFs |
| image_gen.py | Generate and edit images (paid plan required) |
| document_converter.py | Convert PDF, DOCX, XLSX, PPTX to Markdown; extract page ranges and images |
Requires GEMINI_API_KEY in environment or .env in this skill's directory. Run any script with --help for setup details and available parameters.
Quick start — image analysis:
python <skill-dir>/scripts/gemini_batch_process.py \
--files <image-path> \
--task analyze \
--prompt "<tailored prompt>" \
--output <output-path>.md
Prompt Quality Matters
The prompt sent to the processing model is the single biggest factor in output quality. Tailor prompts to what the task actually needs — generic prompts produce generic results.
What makes a good analysis prompt:
- Ask for the specific details the task requires (hex colors, spacing in px, component hierarchy) rather than "describe this image"
- Structure the ask as a numbered list — the model mirrors the structure back, making output easy to parse
- Name the desired output format ("as a markdown table", "as JSON", "as a component tree")
- Include implementation context when relevant ("for React with Tailwind") so the model emphasizes useful details
Example prompt patterns:
UI implementation: *"Extract component hierarchy, layout type, exact hex colors, typography (sizes/weights), spacing in px, interactive states, icons and decorative elements"*
Chart data: *"Extract chart type, axes with units, every data point with exact values, legend entries with colors. Output as a markdown table"*
Design review: *"Compare this screenshot against the design. Flag differences in spacing, colors, alignment, missing elements, and visual inconsistencies. Note exact values for each discrepancy"*
Pasted Images
When a user pastes images in chat, they are auto-saved to:
$CLAUDE_DIR/image-cache/<current_session_id>/<image_number>.png
Use ls "$CLAUDE_DIR/image-cache/" to discover the session ID, then list its contents to find available images.
Model Overrides
Scripts auto-select models per task (see model-routing.md). Override with --model <model-id> when the default isn't enough — for example, --model gemini-3.1-pro-preview for complex visual analysis where the pro model catches more detail than flash.
References
| Reference | When to read |
|-----------|-------------|
| api-gotchas.md | Before using image generation, video processing, or raw API calls — prevents common failures |
| model-routing.md | When choosing or overriding the default model for a task |
| media-optimization.md | When files are too large to upload — ffmpeg compression recipes |
Gotchas
- Rate limits — scripts retry up to 3 times with backoff. If still rate-limited after retries, stop and ask the user to check their API key quota or provide a new key.
- Model IDs change — Google frequently rotates preview model IDs. If you get a 404, the model was likely superseded — check the models page for current IDs.
- Safety filters — the API may refuse some content. Report clearly to the user rather than retrying.
- Large files auto-upload — files >20MB automatically use the File API (2GB max, 48h retention). No action needed.
Other skills for the same job
different authors, same section of the catalogue
Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.
> Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.
Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
| Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
| Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
How to use it
Take avibebuilder/media-processor from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.