skills.rest
RSHVR
RSHVRCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

elite-layouts

Generate CSS templates for Bento grids, horizontal scroll, and container queries.

1|Updated Feb 3, 2026
Search Tags:#layout#editorial#container-queries#css-grid#bento-grid#horizontal-scroll#sticky-parallax
One-click install
npx skills add https://github.com/RSHVR/elite-web-design --skill elite-layouts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: elite-layouts
Source: https://github.com/RSHVR/elite-web-design/tree/main/skills/elite-layouts
Command: npx skills add https://github.com/RSHVR/elite-web-design --skill elite-layouts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Modern CSS layout patterns for premium web experiences. Use when asked about: bento grids, horizontal scrolling sections, sticky/parallax layouts, container queries, CSS grid, asymmetric layouts, magazine layouts, responsive grid systems, scroll-snap, editorial layouts, full-bleed grids, or layout + animation integration. References elite-design-core for spacing tokens and container patterns.

Core Features & Use Cases

  • Bento Grid patterns for asymmetric, modular layouts.
  • Horizontal scrolling sections for storytelling and galleries.
  • Sticky & parallax layouts for depth and motion.
  • Container queries and responsive grids for component-level adaptation.
  • Scroll-snapping and layout-animation integration for polished UX.

Quick Start

Describe your project and the required patterns to generate CSS templates and component recipes.

Frequently Asked Questions about elite-layouts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a responsive bento grid layout that adapts using container queries?▼

Container queries allow bento grid layouts to adapt based on the parent container's width rather than the viewport. This Skill provides CSS grid patterns and modular recipes to build asymmetric, component-level responsive grids for editorial and marketing pages.

What is the best way to build a horizontal scroll section with scroll-snapping?▼

Horizontal scroll sections with scroll-snapping provide polished storytelling and gallery UX. This Skill generates CSS layout templates that integrate scroll-snapping properties to create smooth, controlled horizontal scrolling experiences across responsive breakpoints.

How do CSS grid and sticky parallax layouts work together for magazine layouts?▼

CSS grid structures the magazine layout while sticky positioning creates parallax depth and motion. This Skill provides combined layout patterns that use sticky containers and grid placement for premium editorial designs.

Can I use these CSS layout patterns for a 12-column responsive grid system?▼

Yes, these CSS layout patterns support 12-column grid systems, precise spacing tokens, and full-bleed grids. They are designed for front-end developers building responsive marketing sites, portfolios, and editorial pages.

Do I need external dependencies to implement layout and animation integration?▼

No external dependencies are required to implement layout and animation integration. This Skill provides standalone CSS templates and component recipes that handle animation integration natively within modern CSS grid and container query structures.

Why are my container queries not working in complex asymmetric layouts?▼

Container queries fail when the parent container lacks a defined containment context. This Skill provides correct container patterns and precise spacing tokens to ensure component-level adaptation functions properly within complex bento grids.

Related Skills

Explore More Design & Creative Skills→
moughamirmoughamir

tailwindcss-advanced-layouts

Generate Tailwind CSS grid and flexbox layouts with responsive breakpoints.

Community
Advanced
oalansilvaoalansilva

css-layout-helper

Diagnose CSS alignment and spacing issues with minimal flex or grid fixes.

Community
Basic
wshobsonwshobson
38.6k

visual-design-foundations

Apply typography, color, spacing, and iconography principles to create design tokens and style guides.

Community
Intermediate
ancolemanancoleman
503

designing-layouts

Design responsive layouts with CSS Grid, Flexbox, and breakpoints.

Community
Advanced