AGENT SKILLBY KOSTJA94
Masonry
AT A GLANCE
Masonry is a go-to-market agent skill from kostja94. Guides masonry layout design for content with varying heights. It is published in the kostja94/marketing-skills GitHub repository (691 stars) under the MIT license. Its SKILL.md runs to about 550 words. Install it with: npx skills add kostja94/marketing-skills --skill masonry
- SOURCE REPOSITORY
- kostja94/marketing-skills (opens GitHub in a new tab)
- REPO STARS
- SOURCE REPOSITORY
- LICENSE
- MIT
- CATEGORIES
- SKILL.MD SIZE
- 3.8 KB82 LINES
QUICK ANSWER
- WHAT IT IS01
- Guides masonry layout design for content with varying heights. Its edge is a particular angle on masonry, giving the agent tighter constraints than a plain masonry request.
- INPUTS02
- Context the agent needs: your goals, audience, constraints, and any source material the skill asks for.
- OUTPUT03
- A ready-to-use result: the analysis, copy, or recommendations the agent produces.
INSTALL
One command adds this skill from its source repository.
npx skills add kostja94/marketing-skills --skill masonryREAD THE SKILL.MD BELOW BEFORE YOU RUN IT. SKILLS INSTRUCT YOUR AGENT.
SKILL.MD
The full file, as published in the source repository. Copy it, download it or open it on GitHub.
ON THIS PAGE · 8
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 (opens in a new tab)
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
- image-optimization: Lazy load, aspect ratio, LCP
FAQ
07 QUESTIONS
01What is the Masonry agent skill?
Guides masonry layout design for content with varying heights. It is listed under go-to-market in the 100xLab agent skills directory.
02How do I install Masonry in Cursor, Claude Code, or Codex?
Run npx skills add kostja94/marketing-skills --skill masonry in the project where you want it, then ask your agent for the skill by name. The --skill flag installs only Masonry, not every skill in the repository.
03What does the Masonry SKILL.md cover?
The SKILL.md includes sections on When to Use Masonry, Masonry vs Grid vs Bento vs Carousel, Masonry Structure, Implementation, SEO Considerations and Best Practices. Read the full text on this page or in plain markdown at /resources/agent-skills/kostja94-marketing-skills--masonry--tesyj7/raw.
04Which agents can use Masonry?
Masonry installs with the cross-agent skills installer (npx skills add), which sets it up for agents such as Claude Code, Cursor and Codex. Each agent loads the SKILL.md when you ask for the skill by name.
05What license is Masonry under?
The kostja94/marketing-skills repository declares the MIT license. Read the license file in the repository before you copy or redistribute the skill.
06Is Masonry free to use?
Reading, copying and installing Masonry costs nothing: it is published in a public GitHub repository under the MIT license. Reuse and redistribution follow that license.
07Where is the source of Masonry?
Masonry comes from https://github.com/kostja94/marketing-skills, which has 691 GitHub stars. The SKILL.md is at https://github.com/kostja94/marketing-skills/blob/HEAD/skills/components/layout/masonry/SKILL.md. The author is kostja94.
Need an agent workflow built around your stack?
Tell us the workflow you want automated. We reply within 4 working hours (IST).
ATTRIBUTION
Masonry was written by its original authors and is published in kostja94/marketing-skills (opens GitHub in a new tab) under the MIT license. All rights stay with the original authors.
100xLab did not write, maintain or endorse this skill. This page lists it for discovery. Repo stars belong to the source repository, not to the skill. Review any skill before you install it.