skills.rest
yogvidwankhede
yogvidwankhedeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

layout-composition

Design responsive web layouts with CSS Grid, Flexbox, and Container Queries.

1|Updated Jul 26, 2026
Search Tags:#accessibility#layout#css#responsive#flexbox#grid#web-design
One-click install
npx skills add https://github.com/yogvidwankhede/vishwakarma --skill layout-composition-yogvidwankhede
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layout-composition
Source: https://github.com/yogvidwankhede/vishwakarma/tree/main/.claude/skills/layout-composition
Command: npx skills add https://github.com/yogvidwankhede/vishwakarma --skill layout-composition-yogvidwankhede

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the common issue of undifferentiated, fragile, and non-responsive web layouts by providing a rigorous, arithmetic-based approach to CSS architecture.

Core Features & Use Cases

  • Layout Logic: Provides precise rules for choosing between flow, flex, and grid to ensure structural integrity.
  • Overflow Prevention: Offers specific techniques to eliminate horizontal scrolling and layout shifts caused by intrinsic sizing issues.
  • Design Contract: Includes a comprehensive checklist to audit components for accessibility, responsiveness, and stacking context issues.

Quick Start

Apply the layout-composition skill to audit the current component for overflow bugs and structural alignment issues.

Frequently Asked Questions about layout-composition

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

FAQPage Schema
How do I fix horizontal overflow and cumulative layout shifts in responsive web layouts?▼

You fix horizontal overflow in responsive web layouts by applying specific CSS techniques that eliminate intrinsic sizing issues and enforce strict modern CSS standards for structural integrity.

When should I use CSS Grid vs Flexbox for interface architecture?▼

You choose between CSS Grid and Flexbox for interface architecture by applying precise layout logic rules that ensure structural integrity based on whether the design requires two-dimensional or one-dimensional alignment.

What is the best way to audit web components for accessibility and stacking context conflicts?▼

The best way to audit web components for accessibility and stacking context conflicts is using a comprehensive design contract checklist that enforces strict modern CSS standards and accessibility requirements.

Can I use Container Queries to build robust application shells without breaking existing CSS architecture?▼

Yes, you can use Container Queries to build robust application shells by following an arithmetic-based approach to CSS architecture that prevents common layout failures and maintains responsive structural integrity.

Why does my CSS layout fail in complex application shells despite using modern responsive design techniques?▼

Your CSS layout fails in complex application shells because undifferentiated, fragile layouts lack a rigorous arithmetic-based approach to CSS architecture, causing stacking context conflicts and horizontal overflow.

Related Skills

Explore More Design & Creative Skills→
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
louisbrulenaudetlouisbrulenaudet
18

review-ui

Audit React frontend applications for WCAG 2.2 AA compliance and Tailwind CSS theme consistency.

Community
Intermediate
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
ceslepceslep

tailwind-css-patterns

Provide utility-first styling patterns for Tailwind CSS v4.1+.

Community
Intermediate