Skills
.Work. You
Rest

layout-composition

Community

Master web layouts with CSS Grid & Flexbox.

Design & Creative#layout#responsive design#web design#visual hierarchy#flexbox#css grid#bento grid
AuthorArnavPuri
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides practical CSS code snippets and strategies to build robust, responsive, and visually appealing web page layouts, from simple grids to complex bento designs.

Core Features & Use Cases

  • CSS Grid & Flexbox Patterns: Implement common and advanced layout structures like 12-column grids, auto-fit grids, named grid areas, and flexbox components (navbars, card rows).
  • Bento Grids: Design modern, visually engaging bento layouts with flexible sizing and arrangement.
  • Responsive Design: Utilize techniques like auto-fit and media queries for seamless adaptation across devices.
  • Visual Hierarchy & Whitespace: Apply principles to guide user attention and improve readability.
  • Use Case: Quickly generate the HTML and CSS for a responsive product listing page using an auto-fit grid, ensuring cards display optimally on any screen size.

Quick Start

Generate a 12-column CSS grid with a 1.5rem gap and responsive column spans for a desktop layout.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: layout-composition
Download link: https://github.com/ArnavPuri/designskills/archive/main.zip#layout-composition

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.