material-design-3-layout

Implement Material Design 3 layouts with 4dp spacing and mobile-first grids.

Updated Nov 24, 2021

Search Tags:#layout #spacing #responsive-design #containment #grid #elevation #material-design-3

Ready to run

npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-layout-ishiyan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: material-design-3-layout
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/material-design-3-layout
Command: npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-layout-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing user interfaces that consistently follow Material Design 3 layout, spacing, and elevation can be error-prone without a codified system.

Core Features & Use Cases

4dp spacing scale with semantic tokens for component, layout, and list spacing.
Responsive grid and breakpoints that enable mobile-first layouts across devices.
Elevation, tinting, and background blur patterns to convey depth and containment.
Clear guidelines for explicit and implicit containment to structure content.

Quick Start

Begin by applying the 4dp spacing scale and the mobile-first grid defaults to construct a baseline MD3 layout for your page.

Frequently Asked Questions about material-design-3-layout

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

FAQPage Schema

How do I apply Material Design 3 spacing scales to my web layout?▼

Material Design 3 spacing is applied using a strict 4dp spacing scale with semantic tokens. These tokens categorize spacing for components, layouts, and lists to ensure visual consistency across your web interfaces.

What are the Material Design 3 breakpoints for building mobile-first responsive grids?▼

Material Design 3 responsive grids use defined breakpoints to enable mobile-first layouts across devices. You start with mobile grid defaults and progressively adapt the layout structure as screen sizes increase.

How does Material Design 3 handle elevation, tinting, and background blur for containment?▼

Material Design 3 handles elevation using specific elevation tokens alongside tinting and background blur patterns. These mechanisms convey depth and structure content through explicit and implicit containment principles.

Do I need external dependencies to implement Material Design 3 layouts and elevation tokens?▼

No external dependencies are required to implement Material Design 3 layouts and elevation tokens. The system provides a codified set of rules for spacing, grids, and depth that you can apply directly to your project.

Why does my Material Design 3 layout lack consistent depth and containment across components?▼

Inconsistent depth and containment in Material Design 3 layouts usually occurs when elevation tokens and explicit containment principles are not applied. Codifying these patterns ensures structured content and uniform visual depth.