Masonry
Handles Pinterest-style layouts where content has varying heights and stacks into columns without strict rows. It covers when to pick masonry over regular grids (galleries and portfolios versus product catalogs), implementation approaches from CSS columns to Masonry.js, and the big SEO gotcha: masonry plus infinite scroll means crawlers can't reach your content. The guidance on paginated component pages and pushState is solid if you're building something like Behance or Unsplash. Also breaks down masonry versus bento versus carousel, which is helpful since these all get conflated. Worth using if you're building visual-first browsing experiences and need to avoid the common crawlability mistakes.
- skills.sh installs
- 1.1K
- GitHub stars
- 1.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add kostja94/marketing-skills --skill masonry --agent claude-codeInstalls into .claude/skills of the current project.
Files
Masonry construction has moved
Masonry construction is now maintained in the Masonry reference in Bricks, the component layer for AI agents.
npx skills add kostja94/bricks --skill component-builder
Ask the agent to use component-builder to build a new Masonry. This compatibility entry contains no component rules and is no longer maintained.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/kostja94/marketing-skills
- Categories
- Frontend Development, Code Review & Quality, Marketing & SEO, Design & UI/UX
- First seen
- May 16, 2026
More from kostja94/marketing-skills
All 172- Product Hunt Launch1.1K
- Resources Page Generator1.1K
- Solutions Page Generator1.1K
- List1.1K
- Template Page Generator1.1K
- Brand Monitoring1.1K
- Ctv Ads1.1K
- Migration Page Generator1.1K
- Press Coverage Page Generator1K
- Tab Accordion1K
- Public Relations1K
- Signup Login Page Generator1K
- Open Source Strategy1K
- Education Program1K
- Rendering Strategies1K
- Api Page Generator851
- Pricing Strategy839
- Discount Marketing Strategy814
- Domain Selection790
- Domain Architecture786
- Multi Domain Brand Seo779
- Comparison Table Generator765
- Howto Section Generator763
- Copywriting4K
Recommended
More Frontend Development
no-use-effectfactory-ai/factory-pluginsEnforce the no-useEffect rule when writing or reviewing React code. ACTIVATE when writing React components, refactoring existing useEffect calls, reviewing PRs 1.1Kskills.sh installs
trpc-type-safetybobmatnyc/claude-mpm-skillstRPC end-to-end type-safe APIs for TypeScript with React Query integration and full-stack type safety1Kskills.sh installs
storybookdalestudy/skillsStorybook 스토리 작성 및 CSF 3.0 베스트 프랙티스 스킬. 다음 상황에서 사용: (1) 새 스토리 파일(.stories.tsx, .stories.ts) 작성 시, (2) 기존 스토리 수정 시, (3) Args, Decorators, Parameters 설정 시, (4) St980skills.sh installs
compose-slot-api-patternchrisbanes/skillsUse when designing or reviewing a reusable Jetpack Compose component whose visual regions vary by caller, or when primitive content parameters and boolean shape970skills.sh installs
static-renderingpatternsdev/skillsTeaches static rendering (SSG) for build-time HTML generation. Use when your pages don't change per request and can be pre-rendered at build time for maximum ca965skills.sh installs
design-systemsmindrally/skillsComprehensive design system guidelines for building consistent, accessible, and scalable component libraries. Use when creating design tokens, building componen932skills.sh installs