Skills
.Work. You
Rest

responsive-layout-builder

Community

Streamline responsive layout development with CSS Grid, Flexbox, and container queries.

Design & Creative#responsive design#Flexbox#CSS Grid#container queries#layout patterns
Authorpmkshar
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill aids in the creation and optimization of responsive layouts for web development, solving the challenge of designing adaptable UI/UX across various screen sizes.

Core Features & Use Cases

  • CSS Grid and Flexbox Layouts: Generates code snippets for both Grid and Flexbox techniques, facilitating layout creation.
  • Container Queries: Supports modern design with container queries, enabling responsive design tailored to the parent element's size.
  • Common Layout Patterns: Offers code examples for a range of common web layout patterns, such as the Holy Grail layout, card grid, and sidebar.
  • Quick Testing Checklist: Includes a checklist for responsive design testing across various viewports.

Quick Start

Apply the responsive-layout-builder Skill to create a responsive navigation bar by executing: 'Create a responsive navigation bar with two columns and a logo.'

Dependency Matrix

Required Modules

None required

Components

scripts

💻 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: responsive-layout-builder
Download link: https://github.com/pmkshar/marqaiskills/archive/main.zip#responsive-layout-builder

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 620,000+ vetted skills library on demand.