mcpbeat Sign in

Collage Layout Expert Agent Skill

Expert in ALL computational collage composition: photo mosaics, grid layouts, scrapbook/journal styles, magazine editorial, vision boards, mood boards, social media collages, memory walls, abstract/generative arrangements, and art-historical techniques (Hockney joiners, Dadaist photomontage, Surrealist assemblage, Rauschenberg combines). Masters edge-based assembly, Poisson blending, optimal transport color harmonization, and aesthetic optimization. Activate on ''collage'', ''photo mosaic'', ''grid layout'', ''scrapbook'', ''vision board'', ''mood board'', ''photo wall'', ''magazine layout'', ''Hockney'', ''joiner'', ''photomontage''. NOT for simple image editing (use native-app-designer), generating new images (use Stability AI), single photo enhancement (use photo-composition-critic), or basic image similarity search (use clip-aware-embeddings).'

19k tokens
context cost
the whole folder, loaded on every use
11
files
instructions only
0
copies elsewhere
how many repositories repackaged it
177
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/curiositech/some_claude_skills --skill collage-layout-expert

The instruction itself

16 sections, as written by the author

Collage & Layout Composition Expert

Expert in ALL forms of computational collage composition - from Instagram grids to Hockney joiners, from magazine layouts to generative art.

When to Use This Skill

Use for:

  • Grid Collages: Instagram profiles, regular layouts, tiled compositions
  • Photo Mosaics: Small images forming larger pictures
  • Hockney-Style Joiners: Multi-perspective photographic assemblies
  • Scrapbook/Journal: Mixed media with text, frames, embellishments
  • Magazine/Editorial: Professional layouts with text integration
  • Vision/Mood Boards: Inspiration collections, design references
  • Memory Walls: Scattered Polaroid-style arrangements
  • Social Media: Stories, carousel previews, profile grids
  • Abstract/Generative: Algorithmic and procedural arrangements
  • Art-Historical: Dadaist, Surrealist, Pop Art styles

Do NOT use for:

  • Simple image editing → native-app-designer
  • Generating new images → Stability AI
  • Single photo quality → photo-composition-critic
  • Image similarity search → clip-aware-embeddings
  • Color palette extraction → color-theory-palette-harmony-expert

Expert vs Novice Shibboleths

| Topic | Novice | Expert |

|-------|--------|--------|

| Layout | "Just arrange randomly" | Visual weight, balance, golden ratio |

| Blending | Hard edges or simple feather | Poisson blending preserves gradients |

| Color | "Match colors manually" | Optimal transport; LAB space advantages |

| Composition | Fills all space | Negative space as design element |

| Scale | Same size for everything | Varies scale for hierarchy |

| Mosaic | "More tiles = better" | Tile size vs. recognition tradeoff |

| Hockney | "Stitch seamlessly" | Imperfection IS the technique |

Decision Tree: Choosing a Style

What's the purpose?

  • Systematic display → Grid Collage
  • Artistic portrait from photos → Photo Mosaic
  • Personal memories → Scrapbook or Memory Wall
  • Design inspiration → Mood Board
  • Professional/publication → Magazine Layout
  • Social media → Social Templates
  • Art project → Hockney/Dadaist/Surrealist

What's the vibe?

  • Clean, modern → Grid with tight gutters
  • Nostalgic, warm → Polaroid scatter, vintage frames
  • Edgy, disruptive → Dadaist sharp cuts
  • Dreamy, surreal → Seamless Poisson blending
  • Cubist, intellectual → Hockney joiners

Core Algorithms (Summary)

| Algorithm | Use Case | Performance |

|-----------|----------|-------------|

| Edge-Based Assembly | Hockney joiners | 0.5s for 10 photos |

| Poisson Blending | Seamless transitions | 20ms (512×512) |

| Optimal Transport | Color harmonization | Real-time w/ affine approx |

| Force-Directed | Organic scatter | 200ms (50 images) |

| K-d Tree Matching | Photo mosaic tiles | 2s for 10k tiles |

→ See references/algorithms.md for full implementations.

Anti-Patterns to Avoid

1. Ignoring Visual Weight

What it looks like: All images same size, random placement

Why it's wrong: No focal point, viewer's eye wanders aimlessly

Fix: Establish 60/30/10 hierarchy with one hero image

2. Over-Saturating the Canvas

What it looks like: Every pixel filled with image content

Why it's wrong: Visual claustrophobia, no breathing room

Fix: Use negative space intentionally (20-30% white space minimum)

3. Linear FFT for Color Matching

What it looks like: Poor perceptual color matches

Why it's wrong: RGB is not perceptually uniform

Fix: Use LAB color space for matching

4. Seamless Hockney Joiners

What it looks like: Perfectly stitched panorama

Why it's wrong: Misses the entire point - multiple perspectives

Fix: Embrace ±2° rotation variance, 5-15% overlap, intentional gaps

5. Global Poisson Blending

What it looks like: Entire image becomes washed out

Why it's wrong: Destroys local contrast, looks fake

Fix: Apply locally at seams only, preserve source gradients

6. Reusing Mosaic Tiles

What it looks like: Obvious repetition patterns in mosaic

Why it's wrong: Human eye detects patterns immediately

Fix: Track tile usage, penalize reuse, use larger tile library

MCP Integrations

| MCP | Purpose |

|-----|---------|

| Stability AI | Generate backgrounds, textures, missing elements |

| Firecrawl | Research techniques, algorithm papers, art history |

| WebFetch | Fetch documentation, tutorials, design references |

Performance Targets

| Operation | Mac M2 | iPhone 15 Pro |

|-----------|--------|---------------|

| Grid layout (20 photos) | <50ms | <100ms |

| Photo mosaic (10k tiles) | 2s | 5s |

| Force-directed (50 images) | 200ms | 500ms |

| Poisson blending (512×512) | 20ms | 50ms |

| Hockney assembly (10 photos) | 0.5s | 2s |

References

references/collage-types.md - Grid, mosaic, scrapbook, magazine, social templates

references/art-historical-styles.md - Hockney, Dadaist, Surrealist, Rauschenberg

references/algorithms.md - Edge assembly, Poisson, optimal transport, force-directed

references/advanced-techniques.md - Cross-photo interactions, narrative sequences

references/implementation-guide.md - Metal shaders, Core ML, performance

Integrates With

  • photo-composition-critic - Assess individual photos before collaging
  • color-theory-palette-harmony-expert - Extract/match color palettes
  • clip-aware-embeddings - Semantic grouping of images
  • native-app-designer - Build collage creation UI
  • metal-shader-expert - GPU-accelerated blending/effects

Remember: Great collages tell stories through arrangement. Whether grid-precise or Hockney-chaotic, the layout serves the narrative. Master both the math and the art.

Other skills for the same job

different authors, same section of the catalogue
Legacy Circuit Mockups
by github
vendor ×1

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.

37k tokens
Hyperframes Keyframes
by aiskillstore
×1

> 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.

17k tokens
Anydesign
by uxKero
×1

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.

728k tokens scripts
Brandkit
by lornshrimp
×1

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.

4k tokens
Imagegen Frontend Mobile
by lornshrimp
×1

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.

10k tokens
Perf Web Optimization
by christophacham
×1

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).

4k tokens
Brandkit
by nexu-io

| 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.

4k tokens
Gsap Performance
by nexu-io

| 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.

1k tokens

How to use it

Copy the folder

Take curiositech/collage-layout-expert from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

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.