# Masonry Human Guide

## What This Is For
Guides masonry layout design for content with varying heights. It gives the agent a clearer input/output frame for masonry: what context to ask for, what decisions to make, and what usable artifact to return.

Use this as a human-readable version of the Masonry agent skill. It is meant for marketers, operators, founders, and other non-coders who want the workflow without reading agent-specific implementation instructions.

## When To Use This
- Use this when you need a repeatable process for masonry.
- Use this when the task needs judgment, examples, constraints, or a clear output format rather than a one-off prompt.
- Use this when you want to hand an AI assistant enough context to produce a usable marketing artifact.

## When Not To Use This
- Do not use this when you only need a quick factual answer.
- Do not use this when the work depends on private data you cannot share with the assistant.
- Do not use this as a replacement for legal, compliance, financial, or medical review.

## What You Need Before Starting
- The goal or business outcome you want.
- The audience, customer segment, or market context.
- Any source material the assistant should respect, such as notes, briefs, examples, URLs, or brand guidance.
- Constraints such as tone, length, channel, deadline, region, or approval requirements.
- A clear definition of what a good final answer should look like.

## Step-By-Step Workflow
1. State the job clearly: "Use the Masonry guide to help me with..."
2. Add context: audience, goal, offer, channel, source material, and constraints.
3. Ask the assistant to identify missing inputs before producing the final output.
4. Have the assistant follow the skill-specific guidance below.
5. Review the result against the final checklist and ask for revisions where needed.

## Skill-Specific Guidance
- **CSS columns**: `column-count`; simple, no JS; but items flow top-to-bottom then next column
- **Masonry.js / libraries**: True masonry (left-to-right fill); may need JS
- **CSS Grid + `grid-auto-flow: dense`**: Approximate; no JS; see **grid** for dense grid
- **site-crawlability**: Infinite scroll SEO; paginated component pages; search-friendly implementation
- **grid**: Equal-height grid; when masonry is overkill
- **carousel**: Carousel for slides/rotation; when masonry is overkill
- **card**: Card structure; masonry often uses cards
- **showcase-page-generator**: Gallery masonry
- **image-optimization**: Lazy load, aspect ratio, LCP

## Decision Points And Nuance
The original skill emphasizes: When to Use Masonry, Masonry vs Grid vs Bento vs Carousel, Masonry Structure, Implementation, SEO Considerations, Best Practices, Use Cases, Related Skills.

Use these questions to steer the work:
- What is the intended audience or buyer?
- What source material must be preserved?
- What should the assistant optimize for: clarity, persuasion, accuracy, speed, creativity, or conversion?
- What examples represent the desired quality bar?
- What should the assistant avoid?

## Common Mistakes
- | **Aspect ratio** | Preserve original; avoid forced cropping |

## Copy-And-Paste Prompt
```text
Use the Masonry human guide.

My goal:
[Describe the business outcome]

Audience:
[Describe who this is for]

Context and source material:
[Paste notes, examples, links, or existing copy]

Constraints:
[Tone, length, channel, timeline, must-include items, must-avoid items]

Before producing the final output, ask me for any missing information that would materially improve the result.
```

## Final Checklist
- [ ] The output matches the original goal.
- [ ] The audience and context are reflected in the answer.
- [ ] Important constraints and source material were preserved.
- [ ] The assistant made the relevant decisions explicit.
- [ ] The final artifact is ready to use, review, or hand to the next person.

## Source
This guide was generated from the kostja94/marketing-skills skill entry for `masonry`.

## Source Skill Notes
These notes preserve the nuance from the original skill. Use them as supporting reference when the workflow above feels too generic.

# Components: Masonry Layout

Guides masonry layout design for content with varying heights. Masonry stacks items in columns without distinct rows; items fill gaps like a brick wall. Best for image galleries, portfolios, and discovery-focused platforms.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## When to Use Masonry

| Use masonry when | Use grid when |
|------------------|---------------|
| **Varying heights** | Equal-height items |
| Image-heavy; varied aspect ratios | Products, templates (consistent) |
| Gallery, portfolio, showcase | Card grid |
| Discovery, browsing; visual-first | Structured browsing |

See **grid** for equal-height grid; **card** for card structure.

## Masonry vs Grid vs Bento vs Carousel

| Layout | Structure | Best for |
|--------|-----------|----------|
| **Grid** | Equal rows and columns; uniform items | Products, templates, features |
| **Masonry** | Columns; items stack without rows; gaps filled | Pinterest, Behance; varied content |
| **Bento** | Intentional sections; predefined sizes | Homepage, dashboard; Apple-style |
| **Carousel** | Slides; one/few visible; swipe/click | Testimonials, logos, featured items; see **carousel** |

## Masonry Structure

| Element | Purpose |
|---------|---------|
| **Columns** | 2–4 columns; fluid or fixed |
| **Items** | Varying heights; natural aspect ratio |
| **Gap** | Consistent horizontal and vertical spacing |
| **Order** | Top-to-bottom fill within columns |

## Implementation

- **CSS columns**: `column-count`; simple, no JS; but items flow top-to-bottom then next column
- **Masonry.js / libraries**: True masonry (left-to-right fill); may need JS
- **CSS Grid + `grid-auto-flow: dense`**: Approximate; no JS; see **grid** for dense grid

**Note**: Pure masonry can create accessibility challenges (screen reader order); ensure logical DOM order.

## SEO Considerations

**Masonry + infinite scroll = content not crawlable.** Masonry galleries often use infinite scroll or lazy load; crawlers cannot emulate scroll or "Load more" clicks, so content beyond the initial view is not discoverable.

| If you use | Then |
|------------|------|
| **Infinite scroll** | Provide paginated component pages with full URLs; implement pushState; see **site-crawlability** for search-friendly infinite scroll |
| **Lazy load** | Ensure content exists in HTML or is reachable via crawlable links |
| **Pagination** | Prefer for SEO-critical content; crawlers can follow next/prev links |

**Reference**: [Google – Infinite scroll search-friendly recommendations](https://developers.google.com/search/blog/2014/02/infinite-scroll-search-friendly)

## Best Practices

| Principle | Practice |
|-----------|----------|
| **Visual-first** | Thumbnails; minimal text |
| **Aspect ratio** | Preserve original; avoid forced cropping |
| **Lazy load** | Many images; load on scroll |
| **Performance** | Masonry can be heavy; consider grid for simpler cases |

## Use Cases

| Use case | Format | Page Skill |
|----------|--------|------------|
| **Showcase / Gallery** | User work; varied sizes | **showcase-page-generator** |
| **Portfolio** | Projects; mixed media | — |
| **Pinterest-style** | Pins; discovery | — |
| **Image-heavy blog** | Blog with varied images | **blog-page-generator** |

## Related Skills

- **site-crawlability**: Infinite scroll SEO; paginated component pages; search-friendly implementation
- **grid**: Equal-height grid; when masonry is overkill
- **carousel**: Carousel for slides/rotation; when masonry is overkill
- **card**: Card structure; masonry often uses cards
- **showcase-page-generator**: Gallery masonry